Submit HTML form without redirecting/refreshing page

MagicMarker · 20-09-2015 4:02pm #1

So I have a html page with a form that posts info to a table in a mysql db. And on the same page I have a html table displaying the info from the mysql table.

What I would like is for the html table to update when a user presses submit, I don't want the whole page to refresh and I don't want to be taken to another page, which is what happens right now.

I'm not sure where to start tbh.

Greyian · 20-09-2015 4:17pm

You can do this using AJAX.

If you design a page that processes the form, you can then use Ajax to pass the details from the page that has the form to the page that does the processing, and then pass the relevant data back to the page that the user views.

So basically, if you had a form that asked for a person's name, you would pass the name (using Ajax) to the page that does the processing, and then the page that does the processing would pass the relevant data back (e.g. age, address etc).

Buford T Justice · 21-09-2015 10:46am

^^^
What he said, ajax will take care of this for you.

MagicMarker · 21-09-2015 10:52am

Greyian wrote: »

You can do this using AJAX.

If you design a page that processes the form, you can then use Ajax to pass the details from the page that has the form to the page that does the processing, and then pass the relevant data back to the page that the user views.

So basically, if you had a form that asked for a person's name, you would pass the name (using Ajax) to the page that does the processing, and then the page that does the processing would pass the relevant data back (e.g. age, address etc).

Nice one, thanks for the link. Seems simple enough, we'll see if that turns out to be the case when I try it when I get home!

MagicMarker · 21-09-2015 8:08pm

How do I pass the values of the form fields to the processing page in xmlhttp.send()? Using the names of the form fields doesn't work.

This is the processing page...

[PHP]//Connecting to sql db.
$connect = @mysqli_connect('host',"user","password","db");

//error handling
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
//you need to exit the script, if there is an error
exit();
}

$company = $_REQUEST;
$reason = $_REQUEST;
$accref = $_REQUEST;
$amount = number_format(round($_REQUEST, 2), 2, '.', '');
$vat = $_REQUEST;
$date = date('Y-m-d H:i:s');

//Sending form data to sql db.
mysqli_query($connect,"INSERT INTO adjustments (reason_id, account_no, amount, vat_exempt, created_at, company_id)
VALUES ('$reason', '$accref', '$amount', '$vat', '$date', '$company')")[/PHP]

And this was my last attempt at using the ajax solution. I think I'm way off.

[PHP]
function loadXMLDoc()
{
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","send_post.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("company="+getElementsByName("company").value
+"reason="+getElementsByName("reason").value
+"accref="+getElementsByName("accref").value
+"amount="+getElementsByName("amount").value
+"vat="+getElementsByName("amount").value);[/PHP]

Also, would onclick="loadXMLDoc()" work if used on a 'submit' input type?

Thanks!

bpmurray · 30-09-2015 1:21pm

You need to format the string correctly:

xmlhttp.send("company="+getElementsByName("company").value 
            +"&reason="+getElementsByName("reason").value 
            +"&accref="+getElementsByName("accref").value 
            +"&amount="+getElementsByName("amount").value 
            +"&vat="+getElementsByName("amount").value);

Submit HTML form without redirecting/refreshing page

Comments