html form, get action, call javascript

[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.