Get wartość wejścia wewnątrz wejście

Question

mam ten formularz z następujących opcji:

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

Gdy użytkownik wybierze opcję 1-8, wyświetli ilość. I już udało się zrobić, że dzięki tej 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 

Teraz, kiedy „Inne” użytkownik wybierze wyświetli kolejne pole wprowadzania. Wartością, że użytkownik będzie wejście będzie opcja wartości „Inne”:

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

Pech chciał, że nie udało się coraz wartość drugiego wejścia być wartość pierwszego wejścia. Mam nadzieję, że możesz pomóc! Dziękuję Ci!

Answer 1

Przede wszystkim, można poprawić swój kod sporo:

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

Jeżeli zmienisz html:

<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> 

Chciałbym również zasugerować dodanie „ukryty” wejście kiedy wybierają others już w html, ale ustawić go niewidzialnym:

<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> 

teraz, kiedy oni wybrać others.. o wartości -1 chcesz pokazać wejście, gdzie mogą wybrać swoją własną wartość:

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

Teraz musimy tylko funkcję otherText(), które nie powinno być problemu:

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

Working jsFiddle