Question

我试图从两个表单字段获取值，然后获取他们的产品并将其传递给另一个表单字段。我从数据库中获取数据然后传递它下拉列表。但我遇到了麻烦。您如何使用JavaScript从下拉列表中获取所选值？然后将它传递给其他领域和一些操作？我尝试了以下但是它不起作用。我的工作是在下面。任何人可以指导我吗？

<form class="form-horizontal" role="form" method="post">

  <div class="form-group">

      Months to rent 
     <div class="count-input space-bottom">
        <a class="incr-btn" data-action="decrease" href="#">+</a>
        <input onchange="calculate()" id="month" class="quantity " 
         type="text" name="quantity" value="1"/>
        <a class="incr-btn" data-action="increase" href="#"><i class="far 
         fa-plus-square"></i></i></a>
    </div>
  </div>
  <div class="form-group">
    <label for="s2id_autogen1" class="col-sm-2 control-label">
    Select Room                        </label>
    <div class="col-sm-6">
        <select name="room_id" id="fee" class="form-control select2 select2- 
         offscreen" ">
            <?php
                include("connection.php");
                $id = $_GET['id'];
                $sql = "SELECT * FROM room  ";
                $result = $conn->query($sql);
                if ($result->num_rows > 0) 
                {
                 while($row = $result->fetch_assoc())
                  {
             ?>
              <!--   Fee is an int value and description is room name -->

        <option id="fee" onchange="calculate()" value="<?php echo 
         $row['Fee']; ?>"><?php echo $row['Description']; ?></option>

             <?php  
                 } 
                }
              ?>

        </select >
     </div>
    <span class="col-sm-4 control-label"> </span>
 </div>
 <div class="form-group">
   Balance                
    <div class="col-sm-6">
        <input type="text" id="result" class="form-control" 
           name="checkin_date" >
    </div>
    <span class="col-sm-4 control-label">
    </span>
  </div>
    <div class="col-sm-offset-2 col-sm-8">
    <input type="submit" class="btn btn-info" value="Add member">
    </div>
  </div>

Javascript：

 <script>


    function calculate() {
        var myvar1 = document.getElementById('month').value; 
        var myvar2 = document.getElementById('fee').value;
        var result = document.getElementById('result'); 
        var myResult = myvar1 * myvar2;
       document.getElementByid('result').value = myResult;

    }
 </script>

Answer 1

你的Javascript变量都错了......

您将myvar设置两次，然后将其设置为myBox1 * myBox2，这些设置从未设置过。

我认为您正在寻找的是：

<script>
  function calculate() {
    var month_input = document.getElementById('month').value; 
    var fee_input = document.getElementById('fee').value;
    var result = month_input * fee_input;
    document.getElementById('result').value = myResult;
  }
</script>

您还需要删除id =＆＃34;费用＆＃34;来自你的所有＆lt;选项＆gt;标签。默认情况下，select的值是其选中的选项的值。

Answer 2

尝试获取所选选项的值，如下所示。运行代码段以查看结果。

＆＃13;

function calculate() {
  var month_input = document.getElementById('month').value;
  var select_fee = document.getElementById('fee');
  var fee_input = select_fee.options[select_fee.selectedIndex].value
  var result = month_input * fee_input;
  document.getElementById('result').value = result;
}

＆＃13;

label {
  display: inline-block;
  width: 70px;
}

input {
  padding: 6px 14px;
}

.form-group {
  padding: 8px;
}

＆＃13;

<div class="form-group">
  <label>Month:</label>
  <input onchange="calculate()" id="month" class="quantity " type="text" name="quantity" value="1" />
</div>
<div class="form-group">
  <label>Fees:</label>
  <select name="room_id" onchange="calculate()" id="fee" class="form-control select2 select2-offscreen">
    <option value="0"></option>
    <option value="100">Option 1</option>
    <option value="200">Option 2</option>
    <option value="300">Option 3</option>
  </select>
</div>

<div class="form-group">
  <label>Result:</label>
  <input type="text" id="result" />
</div>

＆＃13;

从下拉菜单中获取价值并返回表单字段

2 个答案: