funbinod Posted May 27, 2014 Share Posted May 27, 2014 (edited) i was trying to replace enter key with the 'tab' function. but it returned strange error. it is working for all <input> elements but not working for <select> elements. along with this, CSS and <body onLoad ...... focus()> also are not recognizing it with its "id". but when i change <select> to <input>, everything work fine... one thing more -- <select> element contains php array value and is configured with jquery for autocomplete.... below is what i tried--- <script type="text/javascript"> function tabE(obj,e){ var e=(typeof event!='undefined')?window.event:e;// IE : Moz if(e.keyCode==13){ var ele = document.forms[0].elements; for(var i=0;i<ele.length;i++){ var q=(i==ele.length-1)?0:i+1;// if last element : if any other if(obj==ele[i]){ele[q].focus();break} } return false; } } </script> </head><body><input name='ref' type='text' id='ref' onkeypress='return tabE(this,event)' /><input name='date' type='text' id='date' onkeypress='return tabE(this,event)' value='".date('Y-m-d')."' style='text-align:right' /><select name='name' id='name' autofocus autocorrect='off' autocomplete='off' onkeypress='return tabE(this,event)'><option value='' selected='selected'></option><?php// ........................while ($row = mysqli_fetch_array($result)) { echo "<option>" . $row['name'] . "</option>"; }?></select> Edited May 27, 2014 by funbinod Link to comment Share on other sites More sharing options...
justsomeguy Posted May 27, 2014 Share Posted May 27, 2014 one thing more -- <select> element contains php array value and is configured with jquery for autocompleteI'm not sure specifically how you're doing that, but jQuery might remove the select element and replace it with another element that can receive input. Link to comment Share on other sites More sharing options...
funbinod Posted May 27, 2014 Author Share Posted May 27, 2014 thanks for the reply. but sorry! i couldn't understand what u replied Link to comment Share on other sites More sharing options...
justsomeguy Posted May 27, 2014 Share Posted May 27, 2014 You can't type into a select element. If jQuery is doing something where you can type to filter the list then it is removing the select element and replacing it with an element you can type in, like a text input element. Link to comment Share on other sites More sharing options...
funbinod Posted May 27, 2014 Author Share Posted May 27, 2014 uh huh! ok! i got it. but i dunno if it has done as what u explained or not coz i found this plugin on the web.. and i wonder if (or though) it has replaced <select> element with <input> why the "id" is not working (like for CSS & body onLoad)? and if i manually change <select> as <input> everything work fine - "enter as tab", CSS, <body onLoad) -- all work... here is the jquery i used for data sorting <script type="text/javascript" src="jquery-2.1.0.js"></script> <script src="jquery.js"></script> <script src="jquery-ui-autocomplete.js"></script> <script src="jquery.select-to-autocomplete.min.js"></script> <script type="text/javascript" charset="utf-8"> (function($){ $(function(){ $('select').selectToAutocomplete();// $('form').submit(function(){// alert( $(this).serialize() );// return false;// }); }); })(jQuery); </script> Link to comment Share on other sites More sharing options...
justsomeguy Posted May 27, 2014 Share Posted May 27, 2014 but i dunno if it has done as what u explained or not coz i found this plugin on the web..Well, I don't know either. I guess you could look at the documentation, look at the code for the plugin, or use your browser's developer tools to inspect that element and figure out exactly what it is on the page. Link to comment Share on other sites More sharing options...
funbinod Posted May 27, 2014 Author Share Posted May 27, 2014 ok! i'll try to find out that. but while i search for that, can we discuss on another question above. why the "enter" key not moving to <select> field from <input>? while it is moving from <input> to <input>. and using "tab" key moves everywhere... Link to comment Share on other sites More sharing options...
justsomeguy Posted May 28, 2014 Share Posted May 28, 2014 I don't know, I would start by inspecting the elements in the browser to see what they are. You could also send the document.forms[0].elements collection to your console so that you can go through it and see what elements are listed there. Link to comment Share on other sites More sharing options...
thescientist Posted May 28, 2014 Share Posted May 28, 2014 ok! i'll try to find out that. but while i search for that, can we discuss on another question above. why the "enter" key not moving to <select> field from <input>? while it is moving from <input> to <input>. and using "tab" key moves everywhere... sounds like something that might be more based on browser implementation. You can control the order of elements that tab will cycle through by adding tabindex to elements with number indicating it's order. http://www.w3schools.com/tags/att_global_tabindex.asp Link to comment Share on other sites More sharing options...
funbinod Posted May 29, 2014 Author Share Posted May 29, 2014 You can control the order of elements that tab will cycle through by adding tabindex to elements with number indicating it's order. http://www.w3schools.com/tags/att_global_tabindex.asp i even tried that but it didnt do what i(and u too) expected. dunno what is the problem. and i could not even understand what @justsomeguy is pointing me towards. sorry! but now i changed my autosuggest script like this and it worked... <?php$sql = mysqli_query($connect, "select * from stock order by item") or die(mysqli_error($connect));while ($row = mysqli_fetch_assoc($sql)) { $items[] = $row['item'];}$namesql1 = mysqli_query($connect, "select * from account order by name") or die(mysqli_error($connect));while ($namerow1 = mysqli_fetch_assoc($namesql1)) { $name[] = $namerow1['name'];}?><script type="text/javascript" src="jquery-2.1.0.js"></script><script src="jquery-ui-autocomplete.js"></script><script type="text/javascript">$(function() { var items = <?php echo json_encode($items); ?>; $("#item").autocomplete({ source: items }); var name = <?php echo json_encode($name); ?>; $("#name").autocomplete({ source: name });});</script></head><body onload="document.getElementById('name').focus()"><input name='name' id='name' onkeypress='return tabE(this,event)'><input name="item" id="item" onkeypress='return tabE(this,event)' /> thank u for ur company... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now