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!

You should read up about string concatenation in JavaScript. There's really no need for so many if/else statements. With string concatenation you can replace all those if/else statements will just one or two of them. — James Donnelly
– James Donnelly, Commented May 20, 2015 at 9:25
Wouldn't it be easier to have both situation on the page already, but hidden, and show the input elements you need when they are needed, instead of changing the DOM for each situation? — Jordumus
– Jordumus, Commented May 20, 2015 at 9:26

Jordumus · Accepted Answer · 2015-05-20 10:11:07Z

3

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

edited May 20, 2015 at 10:11

answered May 20, 2015 at 9:38

Jordumus

2,7832 gold badges25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Maria Algelika Santos Over a year ago

Hi Guys! Thank you for your feedback. I appreciate it. Jordumus, I tried your suggestion but seems like its not working. jsfiddle.net/oskqk0k4

Jordumus Over a year ago

@MariaAlgelikaSantos did you try the fiddle at the end of my answer? Here it is again: fiddle

Maria Algelika Santos Over a year ago

Oh Sorry, I didn't see the fiddle :) I wanted the second input to appear only when the option 'others' is selected. Also, whatever amount they input on the second input field will be the value of the option 'other' when I click submit. Sorry again, I am not a pro on this. Thank you.

Collectives™ on Stack Overflow

Get value of input inside an input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related