submit the form using ajax

Question

I'm developing an application (a kind of social network for my university). I need to add a comment (insert a row in a specific database). To do this, I have a HTML form in my html page with various fields. At time of submit I don't use the action of form but i use a custom javascript function to elaborate some data before submitting form.

function sendMyComment() {      var oForm = document.forms['addComment'];     var input_video_id = document.createElement("input");     var input_video_time = document.createElement("input");      input_video_id.setAttribute("type", "hidden");     input_video_id.setAttribute("name", "video_id");     input_video_id.setAttribute("id", "video_id");     input_video_id.setAttribute("value", document.getElementById('video_id').innerHTML);      input_video_time.setAttribute("type", "hidden");     input_video_time.setAttribute("name", "video_time");     input_video_time.setAttribute("id", "video_time");     input_video_time.setAttribute("value", document.getElementById('time').innerHTML);      oForm.appendChild(input_video_id);     oForm.appendChild(input_video_time);      document.forms['addComment'].submit(); } 

The last line submits the form to the correct page. It works fine. But I'd like to use ajax for submitting the form and I have no idea how to do this because I have no idea how to catch the form input values. anyone can help me?

Answer 1

Nobody has actually given a pure javascript answer (as requested by OP), so here it is:

function postAsync(url2get, sendstr)    {     var req;     if (window.XMLHttpRequest) {         req = new XMLHttpRequest();         } else if (window.ActiveXObject) {         req = new ActiveXObject("Microsoft.XMLHTTP");         }     if (req != undefined) {         // req.overrideMimeType("application/json"); // if request result is JSON         try {             req.open("POST", url2get, false); // 3rd param is whether "async"             }         catch(err) {             alert("couldnt complete request. Is JS enabled for that domain?\\n\\n" + err.message);             return false;             }         req.send(sendstr); // param string only used for POST          if (req.readyState == 4) { // only if req is "loaded"             if (req.status == 200)  // only if "OK"                 { return req.responseText ; }             else    { return "XHR error: " + req.status +" "+req.statusText; }             }         }     alert("req for getAsync is undefined"); }  var var_str = "var1=" + var1  + "&var2=" + var2; var ret = postAsync(url, var_str) ;     // hint: encodeURIComponent()  if (ret.match(/^XHR error/)) {     console.log(ret);     return;     } 

In your case:

var var_str = "video_time=" + document.getElementById('video_time').value       + "&video_id=" + document.getElementById('video_id').value; 

Answer 2

What about

$.ajax({   type: 'POST',   url: $("form").attr("action"),   data: $("form").serialize(),    //or your custom data either as object {foo: "bar", ...} or foo=bar&...   success: function(response) { ... }, });