So this has been driving me nuts, im looking for a solution that will fill a input field from what ever selection is made from a drop down.

My current working solution (that does not include a drop down) is as follows :

<form method="link" action="dualstream/index.html">
<input value = 'apolloz' name="stream1" placeholder="" required="required"    
autofocus="autofocus" />

<input type="submit" class="button" value="Click to watch the stream" />
</form>

So that auto fills the text field with "apolloz" then when you press submit it takes you to the relevant page which uses the word apolloz.

Im looking for a solution that you can select the streamer from a drop down list, select it and that option fills the text field, and you can then submit.

Im sure this is javascript based as i have seen similar things which use numerical values.

Sorry if this is a bit vague, but any and all help is much appreciated.

So this has been driving me nuts, im looking for a solution that will fill a input field from what ever selection is made from a drop down.

My current working solution (that does not include a drop down) is as follows :

<form method="link" action="dualstream/index.html">
<input value = 'apolloz' name="stream1" placeholder="" required="required"    
autofocus="autofocus" />

<input type="submit" class="button" value="Click to watch the stream" />
</form>

So that auto fills the text field with "apolloz" then when you press submit it takes you to the relevant page which uses the word apolloz.

Im looking for a solution that you can select the streamer from a drop down list, select it and that option fills the text field, and you can then submit.

Im sure this is javascript based as i have seen similar things which use numerical values.

Sorry if this is a bit vague, but any and all help is much appreciated.

• javascript
• jquery
• html

• 3 If the value is in the select anyway, why do you need to copy it to the stream1 field? Just put the select within the form and give it the name stream1. – Rory McCrossan Commented Nov 20, 2013 at 9:15

4 Answers 4

try this

<form method="link" action="dualstream/index.html">
<input value = 'apolloz' id="txt" name="stream1" placeholder="" required="required"    
autofocus="autofocus" />
<select id="mySelect" onchange="selectionchange();">
    <option value="abc" >abc</option>
    <option value="xyz" >xyz</option>
</select>
<input type="submit" class="button" value="Click to watch the stream" />
</form>

and add following javascript function

function selectionchange()
{
    var e = document.getElementById("mySelect");
    var str = e.options[e.selectedIndex].value;

    document.getElementById('txt').value = str;
}

This is simple, if you use jquery you can do this

$(function(){
    $("#your_select").change(function(){
        $("#your_input").val($('#your_select option:selected').val())
    });     
});

u can also do this using just javascript on the onchange function of your select u can call a function that will put the selected value in your input like

<select id="element1" onchange="pickvalue()"/>
<option>asad </option>
<option>asad2 </option>
</select>

and your pickvalue function can look something like this

function pickvalue()
{
document.getElementById('yourinputid').value = document.getElementById('element1').value
}

Suppose you have a selectbox #selectid then,

 $("#selectid").live("change", function() {  <br> 

 $("#stream1").val($(this).find("option:selected").attr("value"));  <br>

});