jquery submit form from text link

Question

Hi all, I'm trying to create a small form that submits a form and passes a value from a text link.. Here's what I've got so far..

<form id="calendar" name="calendar" action="" method="post">
<a href="<?php echo $next_month; ?>" class="submitCal">&raquo;</a>
</form>

<script type="text/javascript">
jQuery.noConflict();
jQuery('.submitCal').click(function () {
  jQuery("#calendar").submit();  
});
</script>

I'd like the href to become a form variable called "time", I'm just not sure if I'm heading in the right direction or not.. If someone could help, that'd be great :)

Cheers

Answer 1

You could do it like this:

jQuery('.submitCal').click(function () {
  var timeVar = jQuery("<input type='hidden' name='time'/>");
  timeVar.val(jQuery(this).attr("href"));
  jQuery("#calendar").append(timeVar).submit();  
  return false;
});

This will create a hidden form element inside your form, with the value of your href attribute

Answer 2

Probably the easiest thing to do would be just output a hidden form field with the time value there as well. That makes your form compatible with no-javascript browsers too.

<form id="calendar" name="calendar" action="" method="post">
<input type="hidden" value="<?php echo $next_month; ?>" name="time" />
<a href="<?php echo $next_month; ?>" class="submitCal">&raquo;</a>
</form>

Then you're done and done! Your jquery looks good except for the noConflict() bit. The best practice for that is to stick it in your document header, right after you've loaded the jQuery libraries.

Answer 3

If you're using jQuery 1.4 this might work:

jQuery('.submitCal').click(function() {
    $(this).closest('form').append($('<input>', {
        id: 'time',
        name: 'time',
        val: $(this).attr('href')
    })).submit();
});