Learn

Submit Form using jQuery Ajax

submitting-a-form-without-reloading-the-page-using-jquery-and-ajax1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Submit Form using jQuery Ajax with Files

Today I am going to show how to submit a form with uploading the files using ajaxSubmit(). It’s a very simple script which can make your life easy. This script will submit every thing without refreshing the page.

As a PHP Programmer, I will show you the some PHP code but it’s up to you whatever language you are expert with, you can use that but the form, jQuery script will remain the same.

I am using Bootstrap to do the form it will reduce so much time as I dont need to write the classes etc and the most important by using HTML5 langauge it’s easy do the validation stuff.
create a new html page called form.html. In this page I will design the form as below.


<html>
<head>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”col-md-12″>
<!– This div will show when a user click on submit button. On page load this div should be invisible. –>
<div id=”message” style=”font-size:18px;”> Proccessing your data. Please wait… <img src=”http://www.ajaxload.info/images/exemples/25.gif” id=”loading-img” style=”display:none;” alt=”Please Wait”/> </div>
<div id=”output”>
<form action=”submit.php” method=”post” enctype=”multipart/form-data” id=”MyUploadForm”>
<label>name*</label>
<input type=”text” id=”name” name=”name” placeholder=”Full name” required onBlur=”addCandiName()”><br>
<label>contact number*</label>
<input type=”text” id=”contact_number” onkeypress=”return isNumber(event)” name=”contact_number” required placeholder=”Phone number”><br>
<label>resume*</label>
<input type=”file” id=”resume” name=”resume” placeholder=”Upload Your Resume” required style=”display:inline;”><br>
<input type=”submit” class=”submit” value=”apply”/>
</form>
</div>

<!– This div will show when a user click on submit button. On page load this div should be invisible. –>
<div id=”success_message” class=”text-left”>
<p>Thank You!</p>
</div>
</div>
</body>
</html>

After finishing our HTML page now, we will move to the jQuery script.

Next step is to copy the following code into bottom of your page after body And also one more thing to keep in mind this script needs to be the load when the document or page is ready.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js”></script>
<script src=”http://malsup.github.com/jquery.form.js”></script>
<script>
jQuery(document).ready(function() {
$(“#message”).hide();
$(“#success_message”).hide();

var options = {
target: ‘#output’, // target element(s) to be updated with server response
beforeSubmit: beforeSubmit, // pre-submit callback
success: afterSuccess, // post-submit callback
resetForm: true // reset the form after successful submit
};

$(‘#MyUploadForm’).submit(function() {
$(this).ajaxSubmit(options);
// always return false to prevent standard browser submit and page navigation
return false;
});
});

function afterSuccess(data)
{
$(“#output”).html(data);
// $(‘#submit-btn’).show(); //hide submit button
$(‘#loading-img’).fadeOut(100); //hide submit button
$(“#form_o”).fadeIn(300);
$(“#submit_message”).fadeIn(200);
$(“#message”).fadeOut(200);

}

function beforeSubmit(){
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{

var formData = new FormData($(“#MyUploadForm”)[0]); // Here we will get all the fields that we use in our form. So no need to get every thing separatly just we need to get our file feild name separatly.
var resume = $(“#resume”).val();
$(‘#submit-btn’).fadeOut(200); //hide submit button
$(‘#loading-img’).fadeIn(200); //hide submit button
$(‘#message’).fadeIn(200); //hide submit button
$(“#output”).html(“”); // This will clear the whole output div
}
else
{
//Output error to older browsers that do not support HTML5 File API
$(“#output”).html(“Please upgrade your browser, because your current browser lacks some new features we need!”);
return false;
}
}
</script>
That’s all with the HTML page. Now it’s up to you which language you want to use or how you can get the data. I am giving a simple PHP file for checking.
Create a PHP file and called it submit.php

<?php
if(isset($_POST) && isset($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’){
$name = $_POST[“name”];
$contact_number = $_POST[“contact_number”];
if(isset($_FILES[“resume”][“name”]) && $_FILES[“resume”][“name”]<>””){
$ipa=pathinfo($_FILES[“resume”][“name”]);
$imgName=$name.”.”.$ipa[“extension”];
move_uploaded_file($_FILES[“resume”][“tmp_name”],”test/”.$imgName);
$nImg1=$imgName;
}
$resume = $nImg1;

echo ‘Name: ‘.$name.'<br>Contact Number: ‘.$contact_number.'<br> Resume File Name: ‘.$resume;
}

?>

In that file simply get all the fields and file name and check weather it is working or not.

Enjoy this small piece of cake and if you have questions, comments, suggesstions. Feel free to write.

Cheers


  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Most Popular

To Top