Jquery Validation for HTML form -
i want validate text area , select box in html form before submitting html form jquery can me (form summiting without refresh). facing problem make script submit html form without refresh dont know how integrate validation want : 1. validate form 2. if validation true submit html without refresh jquery
jquery :
$(document).ready(function() { $("form#form").submit(function() { var bno = $("#bno").val(); var date = $("#date").val(); var hour = $("#hour").val(); var minute = $("#minute").val(); var datastring = 'bno=' + bno + '&date=' + date + '&hour=' + hour + '&minute=' + minute; $.ajax({ type: "post", url: "editb.php", data: datastring, success: function(){ $('.mform').hide(); $('.success').show(); } }); return false; }); }); html form:
<form method="post" name="form" id="form"> <fieldset id="opt"> <legend>change journy date</legend> <label for="choice">journy date : </label> <input type="text" id="date" name="date" value=""> <br /> </fieldset> <fieldset id="personal"> <legend>change journy time</legend> <label for="lastname">journy time : </label> <select id="hour" name="hour"> <option value="">hh</option> <option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option> </select><select id="minute" name="minute"> <option value="">mm</option> <option value="00">00</option> <option value="05">05</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> </select> <input type="hidden" name="bno" id="bno" value="<?=$bookingno?>" /> </fieldset> <div align="center"> <input id="button2" type="submit" value="update" /> <input id="button2" type="reset" /> </div> </form> <div class="success" style="display: none;"><div id="box"><p><strong><center>form submitted successfully</center></strong></p></div></div>
jquery has lot of plugins ajax submit , validation. rather writing own logic, can consider using them. recommend
jquery form plugin - submits form through ajax. remove submit, make button on click submits form through ajax.
jquery validation plugin - validates based on class. can write own logic using .addvalidator method.
both of these plugin works each , other..
i think give idea
<script> $(document).ready(function(){ $("#form").validate(); if($("#form").valid()) { $('#form').submit(function() { // inside event callbacks 'this' dom element first // wrap in jquery object , invoke ajaxsubmit $(this).ajaxsubmit(); // !!! important !!! // return false prevent standard browser submit , page navigation return false; } }); </script> <script type="text/javascript" src="/css/js/jquery.validate.js"></script> <script type="text/javascript" src="/css/js/jquery.form.js"></script> <form method="post" name="form" id="form"> <fieldset id="opt"> <legend>change journy date</legend> <label for="choice">journy date : </label> <input type="text" id="date" name="date" value=""> <br /> </fieldset> <fieldset id="personal"> <legend>change journy time</legend> <label for="lastname">journy time : </label> <select id="hour" name="hour"> <option value="">hh</option> <option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option> </select><select id="minute" name="minute"> <option value="">mm</option> <option value="00">00</option> <option value="05">05</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> </select> <input type="hidden" name="bno" id="bno" value="<?=$bookingno?>" /> </fieldset> <div align="center"> <input id="button2" type="submit" value="update" /> <input id="button2" type="reset" /> </div> </form> <div class="success" style="display: none;"><div id="box"><p><strong><center>form submitted successfully</center></strong></p></div></div> working example here
Comments
Post a Comment