how to send form values to php using AJAX without reloading page?

Question

I have this AJAX function which starts PHP function in server without reloading page and sends back generated info, but I also need to send a form input values to that PHP script how do I do that?

AJAX:

    function sorting() 
{

  var ajax = getRequest();
  ajax.onreadystatechange = function()
  {
      if(ajax.readyState == 4)
      {
          document.getElementById('main').innerHTML = ajax.responseText;
      }

  }
  document.getElementById('main').innerHTML = "<br/><img src=img/ajax-loader.gif><br/><br/>";
  ajax.open("POST", "sorting.php", true);
  ajax.send(null);
}

Truncated HTML form:

 <form method="post"  action="" name="dateform" id="dateform">

<select name="n_metai" id="n_metai" ><option value="1">1</option>... 
</select>   

<select name="n_menuo" id="n_menuo" ><option value="2">2</option>... 
</select> 

<input type="text" name="skaitliukas" id="skaitliukas" size="3" value="1" title="Mažiausias skambučių pasikartojimas">

<input type="checkbox" name="nuliniai" id="nuliniai"   value="1" title="Rodyti tik su nulinėmis trukmėmis">

<button name="submit_button" onclick='sorting(); return false;'> Pateikti</button>
</form>

your put the form body in your send method. ajax.send("txt1=text2"); — DevZer0
– DevZer0, Commented Aug 5, 2013 at 8:17
@user2630991: txt1=txt2 => name_of_post_param=value_of_post_param, so if you were to pass 'txt1=txt2' to the send call, server-side you would be able to do $_POST['txt1'] === 'txt2', and it'd evaluate to true — Elias Van Ootegem
– Elias Van Ootegem, Commented Aug 5, 2013 at 9:01

Elias Van Ootegem · Accepted Answer · 2013-08-05 08:22:55Z

1

The problem is this line:

ajax.send(null);

If you were to send a GET request, then you pass nothing (or null) to the send call, but you're POST-ing data, so you'll have to pass the data through there.
A basic way to do that, would be this:

var frm = document.getElementById('dateform'),
data = [];//empty array
for (var i=0;i<frm.elements.length;i++)
{
    data.push(frm.elements[i].name + '=' + frm.elements[i].value);
}
ajax.send(data.join('&'));

answered Aug 5, 2013 at 8:22

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ignas Over a year ago

And how do I do that ? what names do I use ?

Elias Van Ootegem Over a year ago

@user2630991: Added basic example, you can use (part of) google's serialize function if your form is more complex, and requires you to do so

Ignas Over a year ago

And if I were to use GET method what would change ?

Elias Van Ootegem Over a year ago

Using Get, you'd have to change ajax.open("POST", "sorting.php", true); ajax.send('your=data&goes=here'); to ajax.open("GET", "sorting.php?your=data&goes=here", true); ajax.send(null);

Ignas Over a year ago

It works now I changed it to GET method and generated url(sorting.php?your=data&goes=here) with serialize function. Thanks a lot!

|

Yura Sokolov · Accepted Answer · 2013-08-05 08:21:13Z

1

You can use jQuery for that.

$.ajax({
type: "post", //methos
url: "yourpage.php", //where to post
data: { //parameters
    n_metai: $('select[name="n_metai"] option:selected').val(), 
    skaitliukas: $('#skaitliukas').val()
    //etc...
}
}).done(function(msg) {
    alert( "Done: " + msg ); //display message box with replay
});

answered Aug 5, 2013 at 8:21

Yura Sokolov

2074 silver badges13 bronze badges

5 Comments

Elias Van Ootegem Over a year ago

IF there's no jQuery tag, then don't assume jQuery... the tag-wiki's are quite clear on that

Ignas Over a year ago

But that would reload the page after submiting the form ?

Elias Van Ootegem Over a year ago

@user2630991: It wouldn't, $.ajax is just jQ for xhr.send(). classically, you'd implement this call in an event handler, that fires on the submit event of the form, and then return false;, which is the same as calling e.preventDefault and e.stopPropagation in jQuery, in vanillaJS, returning false doesn't stop the event from propagating/bubbling

Yura Sokolov Over a year ago

Elias Van Ootegem, and what about the situation when the one who asked a question not knowing about such a library?

Elias Van Ootegem Over a year ago

@YuraSokolov: Then you can suggest a lib in a comment or answer, but that answer must conform to the tag description of JavaScript: "Unless a tag for a framework/library is also included, a pure JavaScript answer is expected". If you had more rep, I'd probably down-vote this answer, but since you're not a long-standing member, I thought I'd simply point out what you ought to keep in mind...

Collectives™ on Stack Overflow

how to send form values to php using AJAX without reloading page?

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related