c_pattle Posted September 20, 2010 Share Posted September 20, 2010 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. Quote Link to comment Share on other sites More sharing options...
Adam Posted September 20, 2010 Share Posted September 20, 2010 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. Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted September 20, 2010 Share Posted September 20, 2010 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. Quote Link to comment Share on other sites More sharing options...
c_pattle Posted September 20, 2010 Author Share Posted September 20, 2010 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); } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.