Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Copy selected value from list to hidden field

Status
Not open for further replies.
tspoll

tspoll

Programmer
Aug 12, 2009
8
GB
Hi

How would I copy the selected value from an html form select list element to a hidden field elsewhere in the form, please? Every time the selected list entry is changed I want to change the hidden field as well, but the list has a default entry which is empty (label but no value) and I therefore want the hidden field to also start empty.

Thanks in advance for any help.

Regards

Tim
 
Sort by date Sort by votes
And also.....how do I duplicate a multi-line text box into a hidden field as well so that the two contents always match?
 
Upvote 0 Downvote
Figured out the second of the two, still stuck on the first.....

<html>
<head>

<title>Untitled Document</title>
<script type="text/javascript">
function data_copy()
{
document.form1.El2.value=document.form1.El1.value;
}

</script>

</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>El1</p>
<p>
<textarea name="El1" id="El1" onKeyUp="data_copy();"></textarea>
</p>
<p>El2</p>
<p>
<input name="El2" type="text" id="El2" />
</p>
</form>
</body>
</html>
 
Upvote 0 Downvote
And now figured the other one - exactly the same but handler is onChange
 
Upvote 0 Downvote
Problem!

The method above works fine when you want to update the content of just one field. Problem is, I need to take the content of one field and insert it into a variable number of identically named fields. This is because my page is a looping ASP update which loops through a recordset and inserts as many records in a table as there are results in my repeat region. Therefore all the form fields in the repeat region have the same name. This method doesn't work for that, it seems.

The code below doesn't work. delete one of the two identical target boxes and it does. Can anyone help, please?

<html>
<head>

<title>Untitled Document</title>
<script type="text/javascript">
function data_copy()
{
document.form1.El2.value=document.form1.El1.value;
}

</script>

</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>El1</p>
<p>
<select name="El1" id="El1" onChange="data_copy();">
<option>- Select option -</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
</p>
<p>El2</p>
<p>
<input name="El2" type="text" id="El2" />
<input name="El2" type="text" id="El2" />
</p>
</form>
</body>
</html>
 
Upvote 0 Downvote
<input name="El2" type="text" id="El2" />
<input name="El2" type="text" id="El2" />
Click to expand...

Giving two input boxes the same id is invalid,each one has to have a unique id - and should have a unique name as well.

Would this solve your problem?

Code: 
<html>
<head>

<title>Untitled Document</title>
<script type="text/javascript">
function data_copy(selBox)
{
	var tbxToPopulate = "tbx_" + selBox.name;
	document.getElementById(tbxToPopulate).value = selBox.value;
}
</script>

</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>El1</p>
  <p>
    <select name="El1" id="El1" onChange="data_copy(this);">
      <option>- Select option -</option>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
  </p>
  <p>El2</p>
  <p>
    <input name="tbx_El1" type="text" id="tbx_El1" />
    <input name="tbx_El2" type="text" id="tbx_El2" />
  </p>
</form>
</body>
</html>

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
 
Upvote 0 Downvote
Hi viccirc

You're quite right, I do need uniquely named items!

I think the best way forward is to rethink the strategy. I can add an extra step to the process to put the fields I was trying to copy into a session variable and from their into my loop and this means I don't need the javascript. Should have thought of that in the first place really.....

Thanks for putting me straight!

Regards

Tim
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
326
lexer
lexer
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
393
Kennelbloke
Kennelbloke
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
277
198709km
198709km
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
367
xwb
xwb
TheLazyPig
  • Locked
  • Question
Copy details of searched reference to table using Angular JS
Replies
0
Views
81
TheLazyPig
TheLazyPig

Part and Inventory Search

Sponsor

Back
Top