在输入框中获取输入的值

Question

在输入框中获取输入的值

6

我有一个表单，其中包含以下选项:

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

当用户选择1-8选项时，它将显示金额。我已经通过以下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

当用户选择“其他”时，它将显示另一个输入字段。用户输入的值将是选项“其他”的值：

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

不幸的是，我没有成功地使第二个输入框的值成为第一个输入框的值。希望您能帮忙！谢谢！

- Maria Algelika Santos

你能提供一个 Fiddle 吗？ - John Smith

1

你应该了解一下JavaScript中的字符串拼接。真的没有必要使用那么多的if/else语句。通过字符串拼接，你可以用只有一个或两个if/else语句来替代所有这些语句。 - James Donnelly

把两种情况都放在页面上，但隐藏起来，在需要的时候显示所需的输入元素，这样做难道不更容易吗？而不是为每种情况改变 DOM。 - Jordumus

2

您在输入 other_amount 值之前已经读取了它的值。 - Nina Scholz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jordumus · Accepted Answer

首先，您可以大大改进您的代码：

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

当你需要更改你的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>

我建议在你的HTML中添加“隐藏”输入框，以便当他们选择“其他”时使用，但将其设置为不可见。

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

现在，当他们选择值为-1的others..时，您希望显示一个输入框，让他们选择自己的值。

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

现在我们只需要函数otherText()，这应该不是问题：

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

可以工作的 jsFiddle