Jump to content

submit form using AJAX


c_pattle
 Share

Recommended Posts

I have a form on my website and when the user submits it I want all the server processing to be done using AJAX so the page doesn't refresh.  I was wondering what the best way to do this is because if your form has a submit button doesn't that automatically refresh the page?

 

Thanks for any help. 

Link to comment
Share on other sites

I was wondering what the best way to do this is because if your form has a submit button doesn't that automatically refresh the page?

 

Not quite sure what you're asking there, but you should always leave an alternative for users with JS disabled. On the form tag you can use the onsubmit attribute to call a function that will return true (and submit the form normally), or false (and the form won't be submitted):

 

<form (...) onsubmit="return submitUsingAjax();">

 

That way if the user doesn't have JS enabled, the form will submit like normal. If JS is enabled the submitUsingAjax() function will be called and the result determines whether or not the form should be submitted.

Link to comment
Share on other sites

You should really make the Javascript unobtrusive. i.e do not embed any scripts into your (X)HTML elements such as event handlers.

Simple example. Normally you would put your javascript in an external file, however for simplicity

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
window.onload = function() {
submitform();	
}
function submitform() {
if(!document.getElementById) return true;	
if(!document.getElementById("myform")) return true;
if(!document.getElementById("submitbutton")) return true;

var button = document.getElementById("submitbutton");
button.onclick = function() {
	var name = document.getElementById("name").value;
	if(name) {
		alert('Submitted form. Your name is '+name);
	} else {
		alert('Please enter your name');
	}
	return false;
}
}
</script>
</head>
<body>
<form id="myform" method="post" action="">
Name: <input type="text" name="name" id="name" size="20" maxlength="20" /> 
<input type="submit" name="submit" value="submit" id="submitbutton" />
</form>
</body>
</html>

 

If Javascript is disabled the form will still degrade gracefully. Yes the page will refresh but your server side code should handle this, validate the data and record it in the database.

Link to comment
Share on other sites

Thanks for your help.  Although it's important that the page doesn't refresh, otherwise I might as well not use JavaScript.  At the moment I have this but I don't think it's submitting the form as I'm not getting an alert box with the url.  Is there something I am doing wrong here?

 

<form action="<?php echo ( $_SERVER['PHP_SELF'] ); ?>" method="post" enctype="multipart/form-data" onsubmit="submitForm();">

 

function submitForm() {
	var url4 = "includes/inc_submit.php?website_name=" + $_POST['website_name'] + "&website_caption=" + $_POST['website_caption'] + "&website_email=" + $_POST['website_email'] + "&website_link=" + $_POST['website_link'];
	alert (url4);
	request4.open("GET", url4, true);
	request4.onreadystatechange = confirmSubmit;
	request4.send(null);
}

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.