How to pass the form id or submit button into ajax

Question

This is my index.php

$('#searchAdv').click(function() {
  //What to be put here            
  $.ajax({
    //what to be put here
    url:"filter.php",
    success: function(response){
      $('#view').html(response);
    }              
  });
});


<form>
  <select id="adv1" name="task1">
     <option value="blabla">Bla Bla</option>
     .
     .
     .
  </select>
  <select id="adv2" name="task2">
     <option value="blabla">Bla Bla</option>
     .
     .
     .
  </select>
  <input type="submit" id="searchAdv" value="Filter">
</form>

<div id="view"></div>

How to pass the form id or submit button into ajax in order to send the form contents into another php page

Is there a reason you are using the selector of the submit button rather than using the form (and on submit call)? — Devon, Sep 17 '16 at 15:06
no i dont think so. I only wanted to pass both "select" value into the ajax — nzrnfourtwenty, Sep 17 '16 at 15:07
this might be helpfull http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — Mirza Obaid, Sep 17 '16 at 15:08

score 0 · Answer 1 · answered Sep 17 '16 at 15:09

First, you don't have an id of the form. So add that...

<form id="myForm">

Then I believe your problem would be resolved if you just bind to the submit call from the form and don't bind the click from the submit button.

$( "#myForm" ).submit(function( event ) {
  // use ajax call in here, this will now refer to your form
  var serialized = $(this).serialize();
});

You could keep the click bind, but it's just unusual for me. Then you'd just access the form using the $("#myForm") selector inside your current function.

score 0 · Answer 2 · edited Sep 18 '16 at 09:39

you can do the altenative like this:

 <form>
 <select id="adv1" name="task1">
 <option value="blabla">Bla Bla</option>
 .
 .
 .
</select>
<select id="adv2" name="task2">
 <option value="blabla">Bla Bla</option>
 .
 .
 .
</select>
<input type="submit" onclick="add()" >
</form>

and then your ajax must add the datatype and data(what your data) like this :

function add(){
  var username = $("#adv1").val();
  var password = $("#adv2").val();
  $.ajax({
    dataType: 'html',
    url: "filter.php>",
    type: "POST",
    data: username+password,
  }).done(function(data) {
    $('#view').html(response);
  });
}

score -1 · Answer 3 · edited Sep 18 '16 at 18:12

You can use jQuery's submit event handler to capture field values when the form is submitted and then send them to the ajax method. But first you need to attach an id to your form. Let's say we keep an id="form".

$('#form').on('submit',function(){
    method = $(this).attr('method');
    url = $(this).attr('action');

/*define these attributes in your form. Here you grab them and pass them to the ajax method later.*/

/* next you want the values of all your input fields.
 * So we grab them values and assign them to their respective name attributes
 * and we put the whole thing in the data object which we will send via ajax.
 * It will look something like:
   { name_attribute_of_a_field:"value of that field",
     name_attribute_of_another_field:"value of that field",
     ..and so on}
 */

    data = {};

    $(this).find('[name]').each(function(){  
    /*this will find all elements with a name attribute in it and loop through each of them.*/

        name = $(this).attr('name');
        value = $(this).val();

        data[name] = value;
    });

    $.ajax({
        url:url,
        method:method,
        data:data,
        datatype:"type-of-response-data you expect",
        success: function(data){
            $('#view').html(data);
        }
    });
});

How to pass the form id or submit button into ajax

3 Answers3