jquery trigger - 'change' function

Question

I have a radio button set called "pick_up_point" and I have a change handler to detect the radio button that is checked. In the change handler I call a function "clearFields()" which basically clears out the input fields.

function clearFields()
{
 $("#Enquiry_start_point").val("");
 $("#Enquiry_start_town").val("");
 $("#Enquiry_start_postcode").val("");
}

$("input[name='pick_up_point']").change(function()
{
 if($("input[name='pick_up_point']:checked").val() == "pick_up_airport")
 {
  $("#pick_up_airport_div").slideDown();
  $("#start_point_div").hide();
  clearFields();
 }
});

I also have a trigger which will retain the view if the form is redisplayed due to a validation error.

$('input[name='pick_up_point']').trigger('change');

Now when I post the form the trigger is run and it calls the change handler, which of course runs the clearFields() function. So how can I get around this? I don't want the fields being cleared when the form is re-displayed.

Answer 1

Try using a custom event handler, like so:

$("input[name='pick_up_point']").change(function()
{
    $(this).trigger("displayForm");
    clearForm();
});

$("input[name='pick_up_point']").bind("displayForm", function() {
 if($("input[name='pick_up_point']:checked").val() == "pick_up_airport")
 {
  $("#pick_up_airport_div").slideDown();
  $("#start_point_div").hide();
 }
});

So instead of triggering the change event, trigger the custom displayForm handler, like this:

$('input[name='pick_up_point']').trigger('displayForm');

And now, when change is triggered, it works as expected, but for the special case of displaying the form without clearing the input fields, you can simply trigger your new custom event handler.