Jump to content

facing strange problem using javascript


funbinod
 Share

Recommended Posts

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 by funbinod
Link to comment
Share on other sites

one thing more -- <select> element contains php array value and is configured with jquery for autocomplete

I'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

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

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...