Jquery change enter key press to tab key -
i made page data entry. page has several input boxes. presently, when user press return key after entering data in input box, form gets submitted. want enable form submission on pressing return key if focus on submit button. other wise should move next input. tried several method, nothing worked. please suggest way
<?php session_start(); require_once('connections/hari.php'); $dateindian = date('d-m-y'); $dateus = date('y-m-d'); if (isset($_session['empno'])) { $ecno = $_session['empno']; mysql_select_db($database_hari, $hari); $auth_sql2 = "select pdw users emp_no='$ecno'"; $result2 = mysql_query($auth_sql2)or die(mysql_error()); $row2 = mysql_fetch_array($result2); $count = mysql_num_rows($result2); $_session['pdw_priv'] = $row2['pdw']; mysql_free_result($result2); if ($count == 0 or $_session['pdw_priv'] == 'n') { header('location:unauthorised.php'); exit(); } } else { header('location:esl_login.php'); exit(); } ?> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- dw6 --> <head> <!-- copyright 2005 macromedia, inc. rights reserved. --> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>system efficiency alpha/beta counters : : esl, kaiga</title> <link rel="stylesheet" href="css/home_style_login.css" type="text/css" /> <link rel="stylesheet" href="css/water_quality.css" type="text/css" /> <link href="/datepicker.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="js/jquery-ui-1.10.4.custom/css/smoothness/jquery-ui-1.10.4.custom.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script> <script src="../dist/jquery.validate.js"></script> <script type="text/javascript"> jquery.noconflict(); jquery.validator.setdefaults({ submithandler: function () { var usin = jquery('#usin').val(); var user = jquery('#user').val(); var ph = jquery('#ph').val(); var conductivity = jquery('#conductivity').val(); var hardness = jquery('#hardness').val(); var tds = jquery('#tds').val(); var turbidity = jquery('#turbidity').val(); var alkalinity = jquery('#alkalinity').val(); var chloride = jquery('#chloride').val(); jquery.post("scripts/water_qual_add.php", { "usin": usin, "user": user, "ph": ph, "conductivity": conductivity, "hardness": hardness, "tds": tds, "turbidity": turbidity, "alkalinity": alkalinity, "chloride": chloride }, function (data) { jquery('#dialog-message').html(data); jquery('#dialog-message').dialog('open'); return false; //jquery('#usin').focus(); }); } }); jquery(document).ready(function () { jquery('.wql').keydown(function (e) { if (e.which === 13) { var index = jquery('.wql').index(this) + 1; jquery('.wql').eq(index).focus(); } }); jquery("#dialog-message").dialog({ autoopen: false, modal: true, buttons: { ok: function () { jquery(this).dialog("close"); jquery('#eff_entry').each(function () { this.reset(); }); jquery('#usin').focus(); } } }); jquery("#datepicker").datepicker({ changemonth: true, changeyear: true, dateformat: "dd-mm-yy", altformat: "yy-mm-dd", altfield: "#stddate" }); jquery('#usin').focus(); jquery("#eff_entry").validate(); jquery("#usin").change(function () { var usin = jquery('[name="usin"]').val(); jquery.post("get_sample_details.php", { "usin": usin }, function (data) { if (data.msg) { // message_box.show_message(data.msg,'please enter valid no.'); alert(data.msg); jquery('#usin').focus(); } else { jquery('#submit_btn').show(); jquery('#comment').hide(); jquery('#doc').val(data.date); jquery('#desc').val(data.description); jquery('#loc').val(data.location); } }); }); }); function roundit(value) { return(math.round(value * 100)) / 100; } </script> <style type="text/css"> .usin{ background-color:#ffff99; color:#ff0000;} #rawdate{position:absolute; float:left; width:500px; } #calculated{ float:right; width:300px; } #eff_entry label.error, #eff_entry input.submit { margin-left: 110px; font-size:10px; color:#ff0000; } #comment{display:none;} .no-close .ui-dialog-titlebar-close { display: none;} div.ui-dialog{ font-size:12px; } </style> <body onkeydown="if (event.keycode == 13) { event.keycode = 9; return event.keycode; }"> <!-- not move! following allwebmenus linking code section must placed right after body tag--> <!-- ******** begin allwebmenus code enviro_menu ******** --> <script type="text/javascript"> var menulinkedby = "allwebmenus [4]", awmmenuname = "enviro_menu", awmbn = "766"; awmalturl = ""; </script> <script charset="utf-8" src="enviro_menu.js" type="text/javascript"></script> <script type="text/javascript">awmbuildmenu();</script> <!-- ******** end allwebmenus code enviro_menu ******** --> <div id="main"> <div id="masthead"> </div> <div id="dummy"></div> <!-- end masthead --> <div id="content"> <div id="welcome">welcome <?php echo $_session['empname']; ?></div> <hr class="noscreen" /> <form id="eff_entry" name="eff_entry" action="" > <fieldset> <div id="rawdata"> <legend>water quality parameters</legend> <label for="usin">usin</label> <input name="usin" id="usin" type="text" class="usin" onblur="this.value = this.value.touppercase()" required/> <br /> <br/> <label for="ph">ph</label> <input class= "wql" name="ph" id="ph" value='0.0' required /> <label for="conductivity">conductivity</label> <input name="conductivity" id="conductivity" value='0.0' required /> <br /> <label for="tds">tds</label> <input class= "wql" name="tds" id="tds" value='0.0' required/> <br/> <label for="turbidity">turbidity</label> <input class= "wql" name="turbidity" id="turbidity" value='0.0' required /> <br/> <label for="chloride">chloride</label> <input class= "wql" name="chloride" id="chloride" value='0.0' required /> <br/> <label for="alkalinity">alkalinity</label> <input class= "wql" name="alkalinity" id="alkalinity" value='0.0' required /> <br /> <label for="hardness">hardness</label> <input class= "wql" name="hardness" id="hardness" value='0.0' required/> <label for="user"> data entered by</label> <input id="user" name="user" style="color:#ff0000; background-color:#ffff33; font-weight:bold" onfocus="this.blur();" onselectstart="event.returnvalue=false;" value= "<?php echo $_session['empno']; ?>" /> <br/> <br/> <div align="center"> <input id="submit_btn" type="submit" name="submit" value="submit" /> </div> </div> <div id="calculated"> <label for="loc">location</label> <input readonly="readonly" name="loc" id="loc" /><br/> <label for="desc">type</label><br/> <input readonly="readonly" name="desc" id="desc" /><br/> <label for="doc"> date of collection</label><br/> <input readonly="readonly" name="doc" id="doc" /><br/> </div> </fieldset> </form> <div id="type2"></div> </div> </div> <!--end content --> <!--end navbar --> <div id="siteinfo"><?php include('footer.php'); ?> </div> <br /> </div> <div id="dialog-message" class="dialog" title="water quality data entry"></div> </body> </html> after searching similar question in stackoverflow, found doing half of work.
jquery('.wql').keypress(function(e){ if ( e.which == 13 ) e.preventdefault(); }); but prevent form submitting, not move focus next input. there method?
you need this, rework of jquery focus on next element class
please note not input had class allow tabbing on enter, including submit
$(function () { var $fields = $('.wql'); $fields.on("keypress",function (e) { console.log(e.which,$(this).next('.wql').attr("id")); if (e.which === 13 && this.id ="submit_btn") { e.preventdefault(); var idx = $fields.index(this); $fields.eq(idx+1).focus(); } }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="content"> <div id="welcome">welcome <?php echo $_session[ 'empname']; ?> </div> <hr class="noscreen" /> <form id="eff_entry" name="eff_entry" action=""> <fieldset> <div id="rawdata"> <legend>water quality parameters</legend> <label for="usin">usin</label> <input name="usin" id="usin" type="text" class="usin wql" onblur="this.value = this.value.touppercase()" required/> <br /> <br/> <label for="ph">ph</label> <input class="wql" name="ph" id="ph" value='0.0' required /> <label for="conductivity">conductivity</label> <input class="wql" name="conductivity" id="conductivity" value='0.0' required /> <br /> <label for="tds">tds</label> <input class="wql" name="tds" id="tds" value='0.0' required/> <br/> <label for="turbidity">turbidity</label> <input class="wql" name="turbidity" id="turbidity" value='0.0' required /> <br/> <label for="chloride">chloride</label> <input class="wql" name="chloride" id="chloride" value='0.0' required /> <br/> <label for="alkalinity">alkalinity</label> <input class="wql" name="alkalinity" id="alkalinity" value='0.0' required /> <br /> <label for="hardness">hardness</label> <input class="wql" name="hardness" id="hardness" value='0.0' required/> <label for="user">data entered by</label> <input class="wql" id="user" name="user" style="color:#ff0000; background-color:#ffff33; font-weight:bold" onfocus="this.blur();" onselectstart="event.returnvalue=false;" value="<?php echo $_session['empno']; ?>" /> <br/> <br/> <div align="center"> <input id="submit_btn" type="submit" value="submit" /> </div> </div> <div id="calculated"> <label for="loc">location</label> <input readonly="readonly" name="loc" id="loc" /> <br/> <label for="desc">type</label> <br/> <input readonly="readonly" name="desc" id="desc" /> <br/> <label for="doc">date of collection</label> <br/> <input readonly="readonly" name="doc" id="doc" /> <br/> </div> </fieldset> </form> <div id="type2"></div> </div> </div>
Comments
Post a Comment