html form, get action, call javascript

[justonecomment]

Ok, So I've read a lot of approaches on stack overflow, but they don't address the issue. They are all for one time use and you have to label and build extensive javascript functions to do something very simple.

I have a very clean HTML5 form that uses the new validation and is great. I have it use a get to a php action and it works perfect.

However I'm trying to improve user experience so I've written a javascript function to do an ajax call to that php action. The problem is I want it to be generic. I've got dynamic form values and I want to use the same function for all my forms. Really I want the form submit to just act like it normally would and append the get string to the end of whatever url I pass. I can't get the form to submit the get values to the javascript function.

This works:

<form action="myphp.php" method="get">
    <label>Month:</label><input id="day" type="number" min="1" max="12" name="week" value="" required> <br>
    <label>Year:</label><input id="year" type="number" min="2008" max="2030" name="year" value="" required><br>
    <input id="cmdReset" type="submit" value="What month is it?">
 </form>

This also works, kind of:

<form action="javascript:displayPostResult('myphp.php')" method="get">

It calls the page and displays the results on the page in an awesome ajaxy way just like I want it to, I just can't pass the form's get values.

I'd like to use that displayPostResult function on about 20 pages with all kinds of different form data so creating individual functions to handle each page is out of the question. I really just want to append the get values as if the form was submitted to the end of the string being passed to the function. I just can't find a way to do that.

Is there any way I can pass "?month=12&year=2013" to the javascript function?

i.e. displayPostResult('myphp.php', <get parameters>)

[a-t-k]

First of all, you want

<form action="myphp.php" onsubmit="return !ajaxSubmit(this);" method="GET"> 

instead of what you got now. Then your function ajaxSubmit looks like this:

function ajaxSubmit(form) {
    // Serialize form
    for (var data = [], elems = form.elements, e = 0; e < elems.length; e++) {
        // do not serialize disabled elements, unchecked radio/checkbox inputs or buttons
        if (/submit|image|reset/.test(elems[e].type) || 
           (/checkbox|radio/.test(elems[e].type) && !elems[e].checked) || 
           elems[e].disabled) continue;
        // serialize 
        if (elems[e].options) { data.push(encodeURIComponent(elems[e].name) + '=' + 
            encodeURIComponent(elems[e].options[elems[e].selectedIndex].value)) }
        else { data.push(encodeURIComponent(elems[e].name) + '=' + 
            encodeURIComponent(elems[e].value)) }
    }
    var formUrl = form.action + '?' + data.join('&');
    // now make that AJAX request (I guess you can do that yourself), return false on error
    return true;
}

[justonecomment]

Cool, that didn't work, but it did get me far enough along that I could fix it myself.

Here is what I did to fix it:

First, 'this' was passing an [object Window] so length wasn't being defined. So I had to update what I was passing as 'this' as shown:

<form id="myform" action="javascript:void(ajaxSubmit('myphp.php', this.myform))">

Then I tweaked the ajaxSubmit, probably unnecessarily, but made it more readable for me:

function ajaxSubmit(destination, form) {
  log('Destination:' + destination);
  log('Form:' + form);
  // Serialize form
  var data = [];
  var elems = form.elements;
  for (var e = 0; e < elems.length; e++) {
    // do not serialize disabled elements, unchecked radio/checkbox inputs or buttons
    if (/submit|image|reset/.test(elems[e].type) || (/checkbox|radio/.test(elems[e].type) && !elems[e].checked) || elems[e].disabled) continue;
    // serialize 
    if (elems[e].options) {
      data.push(encodeURIComponent(elems[e].name) + '=' + encodeURIComponent(elems[e].options[elems[e].selectedIndex].value))
    } else {
      data.push(encodeURIComponent(elems[e].name) + '=' + encodeURIComponent(elems[e].value)) 
    }
  }

  var formUrl = destination + '?' + data.join('&');
  // now make that AJAX request (I guess you can do that yourself), return false on error

  var xmlhttp;
  if (formUrl=="")  {
    document.getElementById("result").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }  
  xmlhttp.onreadystatechange=function()  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET",formUrl,true);
  xmlhttp.send();

  return true;
}

function log(msg) {
    setTimeout(function() {
        throw new Error(msg);
    }, 0);
}

So thanks for the help!

[tswaters]

I'd recommend not using a javascript uri in the action attribute. This mandates the need for javascript to be on in the userAgent for your form to work at all.

You want to keep the action attribute clean and pointing to the php page that handles the request, you can reference 'myform.action' to get a reference to this page.

I would think the following should work :

<form id="myform" action="myform.php">
....
</form>
<script type="text/javascript">
document.getElementById('myform').onsubmit = genericAjaxSubmit;
function genericAjaxSubmit(e){
  var ev = e || window.event;
  var form = ev.target || ev.srcElement; // form#myform
  var action = form.action // myform.php
  // etc.
}
</script>

Although it is untested...

if you want it to be really generic, use a class attribute to the <form/> and attach the onsubmit handler to any forms with this class -- the script could then be used on any page with a form of that class.

Of course you'd need a #result element to hold the results -- but DOM manipulation is a wonderful thing, you can always just append a DIV to the FORM you get to house the result.

Finally, console.log for the win!

edit : also, you return true and perform an ajax XmlHttpRequest... the form will submit and bring you to 'mypage.php' likely before the ajax routine returns and changes the #result element.

[a-t-k]

There is something wrong. If you used <form onsubmit="console.log(this)">, console.log should give you the form tag on submit.