How to change the value of a <INPUT TYPE="TEXT"> when <SELECT><OPTION> changes?

R

RavinDJ

Supreme [H]ardness
Joined
Apr 9, 2002
Messages
4,448
How do I change the value of a <INPUT TYPE="TEXT"> when <SELECT><OPTION> changes?

For example... I have:

<SELECT NAME="id">
<option>01
<option>02
<option>03
<option>04
<option>05
</SELECT>

<INPUT TYPE="TEXT" NAME="name" SIZE="25">

I would like the text in the INPUT TEXT field to change as the user selects different OPTION from the SELECT drop-down.

Can this be done in PHP, since that's what I'm doing everything else in.

Thanks! :d
 
RavinDJ said:
How do I change the value of a <INPUT TYPE="TEXT"> when <SELECT><OPTION> changes?

For example... I have:

<SELECT NAME="id">
<option>01
<option>02
<option>03
<option>04
<option>05
</SELECT>

<INPUT TYPE="TEXT" NAME="name" SIZE="25">

I would like the text in the INPUT TEXT field to change as the user selects different OPTION from the SELECT drop-down.

Can this be done in PHP, since that's what I'm doing everything else in.

Thanks! :d
Click to expand...

Not sure how, as I am quite rusty, but I think you're going to need javascript in order to accomplish that.
 
Yes, to make things happen on a user's pages, Javascript is what you need.
Code: 
<script type='text/javascript'>
function foo(sel){
  document.getElementById('txt1').value=sel.value;
  document.getElementById('txt2').value=sel.options[sel.selectedIndex].text;
  }
</script>
<SELECT NAME="id" onchange='foo(this)'>
<option value='a'>01</option>
<option value='b'>02</option>
<option value='c'>03</option>
<option value='d'>04</option>
<option value='e'>05</option>
</SELECT><br>
<INPUT TYPE="TEXT" id='txt1' NAME="name" SIZE="25"><br>
<INPUT TYPE="TEXT" id='txt2' NAME="name" SIZE="25">
 
javascript is what you need for that

assuming you want the text field to display the value of the selected dropdown, you would do something like this
Code: 
<head>
.
.

<script language="javascript" type="text/javascript">
function changeTxt(opt)
{
 document.name.value = opt.value;
}
</script>
.
.
</head>

and then you call it like this
Code: 
<body>
.
.

<select name="id" onchange="changeTxt(this);">
<option value="1">1</option>
<option value="2">2</option>
</select>

<input type="text" name="name" value="" />
.
.
</body>
 
Thought I would mention WHY you have to use Javascript. :)

PHP is a server side script. The page gets rendered to html by PHP, then transmitted to the client. From that point on you are out of the PHP scope. The client should have the ability to perform simple tasks via the standard Javascript. I know it's really hard to do, but I actually look in M$ documentation (msdn.microsoft.com) to find all of the available attributes to a javascript object.

Input tag attributes : input
Select Events:select

I hope these references help.
-Steve
 
also keep in mind that more and more users are starting to disable javascript, so this won't work for those users. In other words, don't rely solely on Javascript.
if it's for enhancing the user experience, that's fine, but if it's for submitting required data, then you need to have some server-side validation in place as well.
 
Do you need to anything on the page itself? Or do you just want the selected value to be passed to a php script?

Not sure if this is good programming practice or not, but I'm not using any javascript to pass the values. My form uses a "get" method, with another php page "action" and then that php script picks up the value with the $_GET["variable"]. The downside is that you do need another page to run a script. (maybe you can do it on the same page? I dunno, I'm a php noob, but this is just what I did on my assignment)

If you want something dynamic or need to do error checking on the page, then use javascript. If you just need to pass the value into a database or another page, it's possible to just use php.
 
You must log in or register to reply here.
Back
Top