preview form before submit is a common idea. idea of making such a plugin comes in my mind when i was working on a cake project and client ask me to do it.developer needs such a plugin most of the time and don’t like to write the same code in php js or jquery again and again.
So to overcome this problem i made this preview before submit jquery plugin , this plugin is not yet fully developed but before start i need some feedback from developer that what things they need and what thing i am missing.
well form submission is as all we know is same as in html whether you use php or any other language. In preview before submit we will use the concept
- post form using jquery.
- javascript validation on form submit.
- cancel submit form javascript.
- validate before submit javascript.
I made some customization in jquery confirm plugin . jconfirm is similar as confirm in javascript. it ask user before proceeding that whether they want to continue or not. I use the same concept and hook the onsubmit event with this preview form before submit plugin function.
Create preview form before submit
first of all we will create sample form in html, you can do it in php if you want to
copy the html form code below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form method="POST" id="myform" action="" onsubmit="return preview(this);"> <fieldset> <legend>Registeration</legend> <span> Username :</span> <input type="text" name="uname" id="u_name"> <span> Password :</span> <input type="password" name="uname" id="u_name"> <span> Email :</span> <input type="email" name="uname" id="u_name"> <span> Gender :</span> <input type="radio" name="gender" value="male"><label> Male</label> <input type="radio" name="gender" value="female"><label> Female </label> <span> Subscribe Us : </span> <input type="checkbox" name="subscribe" value="yes"> </fieldset> <input type="submit" value="submit"> </form> |
Now in first line of form i call the preview function on form onsubmit method. we do same for validate before submit javascript. Now every time you will try to submit the form the before submit the it will call the preview function and it will be submitted only if preview return true.
next thing i specify Label of corresponding element in span . the textbox in which you will place your username has label username just before text box and it is inside a span tag.
Now when you press submit then before submit, form will call preview function.
here is the code below of preview function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function preview(form){ /* Validation function here */ var dia_log; $( "span" ).each(function(i,val) { dia_log +=$(this).text() + $(this).next().val()+"<br/>"; }); dia_log =dia_log.replace('undefined', ''); $.confirm({ 'title' : 'Submit Confirmation', 'message' : dia_log, 'buttons' : { 'Yes' : { 'class' : 'blue', 'action': function(){ form.submit(); } }, 'No' : { 'class' : 'gray', 'action': function(){} } } }); return false; } |
now the function works like this
first of all it will validate that the all field is correct according to site i’m Not including validation code
then
it scan each span inside the form and the value of element next to it.
we will store all values and use these value in confirm dialogue.
now a popup will display Saying
“whether you want to submit the form or edit it” before submit form.
if click the submit then form will be submitted with jquery.
for detail check the .submit in jquery api.
in this way we can preview form before submit
Incoming search terms:
- preview form before submit
- ajax form submit preview
- preview form before submitting in jquery
- preview before submit the form
- preview a form before submit javascript
- php mail preview before send
- php jquery confirm yes no
- php jquery ajax form preview before submit
- php form preview before submit
- php form before submit
- php - jquery preview before submit
- jquery preview image in form
- wordpress submit preview
- preview form before submit javascript
- preview form before submit jquery
- validate preview form before send jquery
- use jquery to preview email before submission
- show the form preview php
- preview option before form submission php code
- preview form with jquery in php
- preview form values after form submit in jquery
- preview form before submitting
- preview form before submit php
