Nhận giá trị của đầu vào bên trong một đầu vào

Question

Tôi có mẫu đơn này với các tùy chọn sau:

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

Khi người sử dụng chọn tùy chọn 1-8, nó sẽ hiển thị số tiền. Tôi đã thực hiện thành công điều đó thông qua javascript này:

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 

Bây giờ, khi người dùng chọn 'người khác', nó sẽ hiển thị một trường nhập khác. Giá trị mà người dùng sẽ đầu vào sẽ là lựa chọn giá trị 'người khác':

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

Thật không may, tôi đã không thành công trong việc có được giá trị của đầu vào thứ hai là giá trị của đầu vào đầu tiên. Tôi hy vọng bạn có thể giúp! Cảm ơn bạn!

Answer 1

Trước hết, bạn có thể cải thiện mã của bạn khá nhiều:

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

Trong trường hợp bạn thay đổi html của bạn để:

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

Tôi cũng muốn đề nghị thêm "ẩn" đầu vào cho khi họ chọn others đã có trong html của bạn, nhưng đặt nó là ẩn:

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

Bây giờ, khi họ chọn others.. với giá trị -1 bạn muốn hiển thị một đầu vào nơi mà họ có thể chọn giá trị riêng của họ:

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

Bây giờ chúng ta chỉ cần chức năng otherText() mà không phải là một vấn đề:

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

Working jsFiddle