Get value of input inside an input

Question

I have this form with the following options:

    <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, it will display the amount. I've successfully done that 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' it will display another input field. The value that the user will input will be the value option 'others':

    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";
   }

Unluckily, I was not successful in getting the value of the second input to be the value of the first input. I hope you could help! Thank you!

Answer 1

First of all, you can improve your code quite a lot:

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";
    }
}

Where you change 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'd also suggest adding the "hidden" input for when they choose 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, when they select others.. with value -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 just need the function otherText() which shouldn't be a problem:

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

Working jsFiddle