Get input value inside input

Question

I have this form with the following parameters:

<select name="choices" id="options" onchange="showText()"> <option value="">Select amount</option> <option value="1">100PHP</option> <option value="2"> 500PHP</option> <option value="3"> 1000PHP</option> <option value="4"> 2000PHP</option> <option value="5"> 3000PHP</option> <option value="6"> 4000PHP</option> <option value="7"> 5000PHP</option> <option value="8"> 10,000PHP</option> <option value="others"> others..</option> </select> <div class="control-group" id="show" style="display:none;"> 

When the user selects option 1-8, he displays the amount. I have successfully done this through this javascript:

  function showText(){ var value = document.getElementById('options').value; if(value == '1'){ var amount = document.getElementById("amount"); amount.value = "100"; document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount&nbsp;&nbsp;&nbsp;P 100 </b></font>" document.getElementById('show').style.display = "block"; } else if(value == '2'){ var amount = document.getElementById("amount"); amount.value = "500"; document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount&nbsp;&nbsp;&nbsp;P 500 </b></font>" document.getElementById('show').style.display = "block"; } //up to option 8 

Now, when the user selects "others", he displays a different input field. The value that the user will enter will be the value of the "others" parameter:

  else if (value == 'others'){ document.getElementById('show').innerHTML = "<br><div class='control-group'><label class='control-label'>Enter Amount</label><div class='controls'><input type='text' id='other_amount' name='other_amount'> "; var amount = document.getElementById("other_amount").value; document.getElementById('show').style.display = "block"; } 

Unfortunately, I was not able to get the value of the second input as the value of the first input. Hope you could help! Thanks!

Answer 1

First of all, you can significantly improve your code:

 function showText(){ var value = document.getElementById('options').value; if(value == '-1'){ //Other document.getElementById('hidden').style.display = 'block'; } else { document.getElementById('hidden').style.display = 'none'; var amount = document.getElementById("amount"); amount.value = value; document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount&nbsp;&nbsp;&nbsp;P " + value + "</b></font>" document.getElementById('show').style.display = "block"; } } 

If you changed your html to:

 <select name="choices" id="options" onchange="showText()"> <option value="">Select amount</option> <option value="100">100PHP</option> <option value="500">500PHP</option> <option value="1000">1000PHP</option> <!-- (...) --> <option value="-1"> others..</option> </select> 

I also suggest adding “hidden” input when they select others already in your html, but set it invisible:

 <div id="hidden" style="display:none;"class='control-group'> <label class='control-label'>Enter Amount</label><div class='controls'> <input type='text' id='other_amount' name='other_amount' onChange='otherText()'/> </div> </div> 

Now that they select others.. with a value of -1 , you want to show an input where they can choose their own value:

 if (value == -1) { document.getElementById('hidden').style.display = 'block'; } 

Now we only need the otherText() function, which should not be a problem:

 function otherText() { document.getElementById('amount').value = document.getElementById("other_amount").value; } 

JsFiddle work