PHP Mailer
Next Post
The submit() method is an inbuilt method in jQuery which is used to submit a form when a submit event occurs. The special benefit of submitting form using jquery is that, method submits your form entirely without a page refresh.
The form submits all the fields to a php script without page refresh, using native jQuery functions
<form method="post" action="post.php" id="f1"> <div class="container" style="margin-right: 150px"> <table class="table table-bordered-dark " > <tbody> <tr> <td style="color:white;background-color:grey">Name </td> <td colspan="4"> <input type="text" class="form-control" name="name" placeholder="Enter Name" > </td> </tr> <tr> <td style="color:white;background-color:grey">Contact </td> <td colspan="4"> <input type="number_format" class="form-control" name="contact" placeholder="Enter Contact" > </td> </tr> <tr> <td style="color:white;background-color:grey">Email Id </td> <td colspan="4"> <input type="email" class="form-control" name="email" placeholder="Enter Email"> </td> </tr> <tr> <td colspan="5"> <button id="submit" class="btn btn-secondary" style="margin-left: 450px"> Register </button> </td> </tr> </tbody> </table> </div> </form>
Don’t forget to add .js file in script tag,you can add it in head or before the end of the body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
Don’t forget to add .js file in script tag,u can add it in head or before the end of the body body tag.
$("#f1").submit(function(e){ e.preventDefault(); //avoid default events var form = $(this); var form_url = form.attr("action"); //fetch action of the form var form_method = form.attr("method"); //fetch method of the form var form_data = form.serialize(); //Name of input fields are required otherwise this will not start $.ajax({ type:form_method , url : form_url , data : form_data , success : function(sd){ console.log("Submited data and returned "); console.log(sd); }, error : function(err){ console.log("not Submited data and returned "); console.log(err); } }); });
We can trigger the event manually when another element is clicked:
$( "#other" ).click(function() { $( "#target" ).submit(); });
As the .submit() method is just a shorthand for .on( "submit", handler ), detaching is possible using .off( "submit" ).
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.
A file input cannot be uploaded using AJAX because you cannot access the contents of a file stored on the client computer and send it in the request using javascript if the browser you are using does not support the HTML5 File API.
You can check it if your brower supports html5 api on : https://html5test.com/ .
If it is showing like this then bingo!!!!!!Your browser does not support HTML5…
Don't worry, I have a simple solution :
Just use ‘.val()’
$(".current_form_id").submit(function(e){ console.log("form submited"); e.preventDefault(); var image = $('image_input_id').val(); //this will fetch the file name var form = $(this); var form_url = form.attr("action");; var form_method = form.attr("method"); var form_data = form.serialize()+'&image='+ image; console.log( form_data); $.ajax({ type:form_method , url : form_url , data : form_data , success : function(sd){ console.log("Submited data and returned "); console.log(sd); }, error : function(err){ console.log("not Submited data and returned "); console.log(err); } });
Here is your content of the callout box lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.