Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
32
rated 0 times [  35] [ 3]  / answers: 1 / hits: 72942  / 11 Years ago, thu, september 19, 2013, 12:00:00

I can't seem to figure out how to use ajax to post. I made a silly form to try it out and even after having cut it all the way down to just two values, still can't get anything to work. My html is this:



<html>
<head>
<script type=text/javascript src=j.js></script>
<title>Test this<
<body>/title>
</head>
<form name=testForm onsubmit=postStuff() method=post>
First Name: <input type=text name=fname id=fname /><br />
Last Name: <input type=text name=lname id=lname /><br />
<input type=submit value=Submit Form />
</form>
<div id=status></div>
</body>
</html>


Then, my external javascript is just a single function so far:



function postStuff(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = processForm.php;
var fn = document.getElementById(fname).value;
var ln = document.getElementById(lname).value;
var vars = firstname=+fn+&lastname=+ln;
hr.open(POST, url, true);
hr.setRequestHeader(Content-type, application/x-www-form-urlencoded);
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById(status).innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById(status).innerHTML = processing...;
}


While my php just echoes the stuff back:



<?php
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
echo $firstname . - . $lastname .<br />;
?>


I can't find anything wrong in firebug or in chrome's toolsy thingies..
Can anybody who me what I'm doing wrong?


More From » php

 Answers
6

Make the:



<form name=testForm onsubmit=postStuff() method=post>
First Name: <input type=text name=fname id=fname /> <br />
Last Name: <input type=text name=lname id=lname /> <br />
<input type=submit value=Submit Form />
</form>


into a button tag:



<form name=testForm>
First Name: <input type=text name=fname id=fname /> <br />
Last Name: <input type=text name=lname id=lname /> <br />
<button type=button onclick=postStuff();>Submit Form!</button>
</form>


The page refreshes from the form submit as far as I can see. You don't need to use a form if you're using ajax.



Also read: Why is using onClick() in HTML a bad practice? since you're enclosing the post in a function anyway.



EDIT: I just noticed your title and head tags are broken in the source you've put up.


[#75580] Wednesday, September 18, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jadyngraysons

Total Points: 455
Total Questions: 109
Total Answers: 98

Location: Trinidad and Tobago
Member since Fri, May 8, 2020
4 Years ago
jadyngraysons questions
Thu, Apr 23, 20, 00:00, 4 Years ago
Sat, Jan 18, 20, 00:00, 4 Years ago
Tue, Dec 31, 19, 00:00, 4 Years ago
;