Question

I have a drop-down list box and two text fields of id values namely user, datePicker1,datePicker2. I have this code, which works fine for user :

$("#user").change(function() {
   $.ajax({
      url: "${createLink(controller :"tasks", action : "test23")}",
      data: "userName=" + e1.find('option:selected').text(),
      cache: false,
      success: function(html) {
         $(".errors").append(html);
      }
   });
});  

that is, after a user selecting from the drop-down list, I send a ajax call and append the received data’s to the class of div errors.

But what I want actually is, after the user have have been selected from user div, I need to look for both datePicker1,datePicker2 events by keeping user div event the same. Now after both datePicker1,datePicker2 events are available I need to send a ajax call.

My html code :

user div element :

<select name="user.id" id="user" required="" class="many-to-one" >
<option value="">-Choose any User from the list</option>
<option value="1" >admin</option>
<option value="2" >anto</option>
</select> 

datePicker1 div element:

<input type="text" name="startDate" value="" id="datePicker1" /> 

datePicker2 div element:

<input type="text" name="endDate" value="" id="datePicker2" /> 

Edit:

After the user have selected values of all the three drop-down box then I can make a ajax call..So it means that I need three values from drop-down list and at the same time, a change to one field should call the ajax method provided that the other two field has already selected. Hope I’m clear on this.

How I can do this?

Can anyone help me out in this, I’m new to jquery and I got stuck with it.

Thanks in advance.

Answer 1

Well assuming the default values for the 3 fields are the empty string, you could do:

$("#user,#datePicker1,#datePicker2").change(function() {
  if ($("#user").val() != "" && $("#datePicker1").val() != "" && $("#datePicker2").val() != "") {
     //make your ajax call

   } 


});

This will get fired whenever any of the fields change but will only submit the values to the server if all 3 values are set..

Check this jsfiddle, it should work:

http://jsfiddle.net/nFKT6/1/