logo Send us mail:
WhatsApp or call:
+234 (0)808 881 1560
Back to JavaScript Programming
Form Submission without Reloading the Form Page
Ishola Ayinla    Dec 25, 2016 at 03:08 AM    1    2420
Please how can I submit a form data to another page to be assessed with a server-side scripting language without reloading the page as it is in the case of normal form submission? I have tried series of ways to achieve this but I couldn't.
Back to JavaScript Programming

1 Answer
Ishola Wasiu says...
Dec 27, 2016 at 08:35 AM

Submitting forms asynchronously (i.e. without refreshing the web page) with JQuery involves the following:

First, create a file and name it "submit_form.htm" and put this in it's head section:

<script type="text/javascript"
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/
<script type="text/javascript">
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
label.error { width: 250px; display: inline; color: red;}

and this in it's body section:

<form name="myform" id="myform" action="" method="POST">
<!-- The Name form field -->
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<!-- The Email form field -->
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<!-- The Submit button -->
<input type="submit" name="submit" value="Submit">
<!-- We will output the results from process.php here -->
<div id="results"><div>

and create another empty file called "process.php" in the same directory and type the following in it:

Here's where you want PHP to process the form data and do something with it, for example inserting the data into a database or sending the information to an email address and so on
print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";

Full Details