[SOLVED] Sending multiple varialbes in a form via AJAX

theflea912 · July 26, 2009

Very simple question actually. I am just starting using AJAX so I am not quite sure how to do this.

I have 5 text fields inside a form. I need to pass those to a script via AJAX. I have been trying to use onsubmit, but it doesn't actually do it; it instead reloads the page with the variables set in the url. Here is the code for the script itself and the form code.

<script type="text/javascript">
var xmlhttp;

function pace(hour,min,sec,msec){
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="calc_split.php";
url=url+"?hour="+hour;
url=url+"&min="+min;
url=url+"&sec="+sec;
url=url+"?msec="+msec;

url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged(){
if (xmlhttp.readyState==4){
document.getElementById("split").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject(){
if (window.XMLHttpRequest){
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject){
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
</script>

HTML Code:

<form id="240" onsubmit="pace(this.id)">
<table width="100%">
  <tr>
    <td class="tablecells" align="right"><strong>Time</strong> <input name="hour" type="text" size="2" maxlength="2" /><strong>:</strong><input name="minute" type="text" size="2" maxlength="2" /><strong>:</strong><input name="sec" type="text" size="2" maxlength="2" /><strong>.</strong><input name="msc" type="text" size="1" maxlength="1" /></td>
<td class="tablecells"> / <strong>Distance</strong><input type="text" name="distance" size="6" maxlength="6"/></td>

<td class="tablecells" align="center"><input type="submit" value="Calculate" /></td>
  </tr>
</table>
</form>

When I click Calculate, it just reloads the page, not actually doing the AJAXy goodness. What is wrong?

DaiLaughing · July 27, 2009

AJAX is something I have hardly played with as well but as no one else has replied...

Have you tried an alert() with url in it to see what that contains? Just in case.

Does your target PHP page appear (it shouldn't)?

RichardRotterdam · July 27, 2009

The logic behind it is that you dont wan't to submit the values. You might think to yourself "Huh say what I want to submit the values darnit?" But yes the form shouldn't be submitted. Submitting the form will result in sending the values to the same page and making the page reload or go to a different page depending if the action has a different page name set.

What you need to do is fetch the values and send it using ajax (or the xmlhttp object to be more precise).

First change your form tag like so

<form id="240" onsubmit="return false;">

this will prevent your form to submit since we dont want a reload.

now add an id to your submit button

<input type="submit" value="Calculate"  id="submit" />

now let's add some unobtrusive javascript.

place the following javascript in your <head> section

<script type="text/javascript">
window.onload = function(){
// fetch the submit button element by id
submitButton = document.getElementById('submit');
// add an event to the submit button
submitButton.onclick = function(){
	// add your pace function call here
}
}
</script>

just change the code where it says add your pace function call here and there you have it.

hope it helps

theflea912 · July 27, 2009

Thanks for your help. Like I said before, I am very limited in my javascript knowledge. But wouldn't this code just send the submit button? Or does it also send all the fields in the form, because it is not working.

noorahmad · July 28, 2009

could please past your other code or to change the button type to

<input type="button" value="Calculate" />

RichardRotterdam · July 28, 2009

Thanks for your help. Like I said before, I am very limited in my javascript knowledge. But wouldn't this code just send the submit button? Or does it also send all the fields in the form, because it is not working.

You need to fetch the values with javascript. There is plenty of tutorials how to do that online.

http://www.google.com/search?hl=en&rlz=1G1GGLQ_ENNL282&q=javascript+form+values&aq=f&oq=&aqi=g8

theflea912 · July 28, 2009

could please past your other code or to change the button type to
<input type="button" value="Calculate" />

Here is the code now:

<script type="text/javascript">

window.onload = function(){
   // fetch the submit button element by id
   submitButton = document.getElementById('submit');
   // add an event to the submit button
   submitButton.onclick = function(){
var xmlhttp;

function pace(hour,min,sec,msec,distance){
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="calc_split.php";
url=url+"?hour="+hour;
url=url+"&min="+min;
url=url+"&sec="+sec;
url=url+"?msec="+msec;
url=url+"?distance="+distance;

url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged(){
if (xmlhttp.readyState==4){
document.getElementById("split").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject(){
if (window.XMLHttpRequest){
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject){
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
   }
}

</script>
<form onsubmit="return false;">
<table width="100%">
  <tr>
    <td class="tablecells" align="right"><strong>Time</strong> <input name="hour" type="text" size="2" maxlength="2" /><strong>:</strong><input name="minute" type="text" size="2" maxlength="2" /><strong>:</strong><input name="sec" type="text" size="2" maxlength="2" /><strong>.</strong><input name="msc" type="text" size="1" maxlength="1" /></td>
<td class="tablecells"> / <strong>Distance</strong><input type="text" name="distance" size="6" maxlength="6"/></td>

<td class="tablecells" align="center"><input type="submit" value="Calculate" id="submit"/></td>
  </tr>
</table>
</form>

Again thanks for your help. I have already tried googling it; I do not like bothering people with simple questions like these. However, none of them tell me what to do in my situation, especially, since you had me put the function, inside of the function.

RichardRotterdam · July 28, 2009

Hehe That's not what I meant with "add an event to the submit button"

Let me try to explain again

<script type="text/javascript">
window.onload = function(){
  // fetch the submit button element by id
  submitButton = document.getElementById('submit');

  // add an event to the submit button
  submitButton.onclick = function(){

    var hour = GET THE VALUE OF THE HOUR HERE
    var min = GET THE VALUE OF SEC HERE
    var msec = GET THE VALUE OF MSEC HERE
    var distance = GET THE VALUE OH DISTANCE HERE
    
    // call your pace function
    pace(hour,min,sec,msec,distance);
  }
}
</script>

Just get values where the letters are in caps

theflea912 · July 29, 2009

:shrug:

haha it is now working. Like I said, Javascript is not my thing. Thanks man.

I don't know how to "solve" this thread, so maybe a mod or admin can do that...?

Sign In

[SOLVED] Sending multiple varialbes in a form via AJAX

Recommended Posts

theflea912

Link to comment

Share on other sites

DaiLaughing

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

theflea912

Link to comment

Share on other sites

noorahmad

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

theflea912

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

theflea912

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information