Select field which depends on input text field

This site is best viewed in a modern browser with JavaScript enabled.

Select field which depends on input text field

akmonata

Hello,
I was trying to put a simple html code with javascript but i can't find the solution. Following is my basic html code:

<label>1. Enter Student Roll Number</label>
<input type="text" name="rollno" id="rollno" />

<label>2. Choose Subject</label>
<select name="mysubject" id="mysubject">
<option value="1">English</option>
<option value="2">Math</option>
<option value="3">Science</option>
....
</select>

I am trying this:
1. When visitor enter his roll number in field 1, suppose he enter 1
2. Then subject field automatically changes to English subject for roll no.1 and similarly if visitor enter roll no.2 then subject auto changes to Math. and so on.

In this way i want visitor a simple way to deal with this form by avoiding selection of subject from dropdown manually. I know this can be possible with javascript, so i need help here.

zoran404

So you want a user to enter a number instead of choosing from a list? Or did I understanded you wrong?
What part of it are you having problems doing?
And are you using php?

akmonata

Yes, user just need to enter his roll number in the text box and by some javascript subject automatically selected according to the roll number entered. Basically i want to make a relationship between text box and select box using some javascript.

And yes i am using php for form submission. Please help me how to do that?

Padonak

one way binding

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rolls</title>
<style type="text/css">
body{color:#000;background-color:#fff;font-family:Georgia,Verdana;font-size:14px;text-align:center;padding-top:100px;}
input{text-align:center;}
</style>
<script type="text/javascript">
function bindElems(){
var rn=document.getElementById('rollno'),ms=document.getElementById('mysubject'),opts=ms.options;
rn.onkeyup=function(){for(var i in opts){if(this.value===opts[i].value){ms.selectedIndex=i;this.blur();break;}else{continue;}}}
rn.focus();
}
window.onload=bindElems;
</script>
</head>
<body>
<form name="student" id="student" action="submit.php" method="post" >
<label>1. Enter Student Roll Number</label>
<input type="text" name="rollno" id="rollno" />
<label>2. Choose Subject</label>
<select name="mysubject" id="mysubject">
<option value="1">English</option>
<option value="2">Math</option>
<option value="3">Science</option>
</select>
<br /><br />
<input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" />
</form>
</body>
</html>

akmonata

Yes! It worked perfectly. Thanks padonak for quick solution. But now there is a problem.

Suppose if there are 50 roll number and subjects are 3. Then select box will look lengthy if i do this:
<label>2. Choose Subject</label>
<select name="mysubject" id="mysubject">
<option value="1">English</option>
<option value="2">Math</option>
<option value="3">Science</option>
<option value="4">Maths</option>
<option value="5">English</option>
..so..on..
</select>

There will be duplications of same option field. So wondering how this can be possible to bind multiple roll number to same subject.

Padonak

you asked a question and got the answer. no one here knows your goals better that you yourself. do you really need this <select> element? it is not clear what are you trying to get as the result. there may be another way to achieve this, if you describe your goal in details

akmonata

The above html code was an test data to get some idea. Below is my html code with javascript in file .js as included in head:
<!DOCTYPE html>
<html>
<head>
<script src="http://sms24x7india.com/mobiledata.js" type="text/javascript"></script>
</head>
<body>

<form>
<label>Enter Mobile No.:</label><br />
<input type="text" name="txtPhnNumber" id="txtPhnNumber" maxlength="10" >
<br />

</form>

</body>
</html>

Live action:
http://sms24x7india.com/test.html

My Goal:
When user enter a 10 digit number in the text field say 9999999999 then a select box will auto-select a service provider according to text field data entered. Similarly another select box below it auto-select the state based on data entered in text field.

Currently, i can show all the data outside the select box when user enter a 10 digit number in text field and click on button.
This is the exact live example a website using that i want am trying to do:
https://www.paytm.com/
(In this site when you enter 9999999999 in the text field then mobile operator select box auto-select to "Vodafone")

Any idea, how to do that please?

Padonak

as far as i can suppose, this is not the only text field and select element question. looking into the page source you can see <script src="/js/jquery-1.5.2.min.js"></script> and that makes me think that the answer may be found somewhere in <script src="/js/min/daa327a34ce614eafa7328d45de111c7.js" defer="defer"></script> linked script which full address is _https://www.paytm.com/js/min/daa327a34ce614eafa7328d45de111c7.js

akmonata

I tried to find exactly how it is working but no success. I know there is function called in input onchange function "populateoperator" but in .js file, there is no such function. I had also copied the source code here:
http://sms24x7india.com/paytm.html
(But its not working)