Question

我有一个简单的a + b php计算器，但你从下拉列表中选择输入。

<?php 
            if (isset($_POST['submit']) and ! empty($_POST['submit'])) {
                if (isset($_POST['radio'])) {
                    $radio_input = $_POST['radio'];
                    $radio_input1 = $_POST['radio1'];
                    echo "$";
                    echo  $radio_input1 + $radio_input;
                }
            }?>
        <form action="asdindex.php" method="post">
        <ul>
            <li>
                <select name="radio">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </li>
            <li>
            <select name="radio1">
                    <option value="1.2">1.2</option>
                    <option value="3.1">3.1</option>
                    <option value="0.3">0.3</option>
                    <option value="1.2">1.2</option>
                </select>
            </li>
        </ul>
        <input type= "submit" name="submit"value="submit"/>
    </form>

问题是如何在不使用提交按钮/输入/的情况下打印结果。我知道你不能用PHP做到这一点。但不知道如何使用JQ或smt。其他

Answer 1

你可以使用jQuery，函数可以在第change个dropdown上执行，

无需按任何按钮即可计算总和。

＆＃13;

$(function(){
    
    $('.check2').change(function(){
      var data1= parseInt($('.check1').val());
      var data2= parseInt($('.check2').val());
      alert(data1 + data2);            
    });
    
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="check1">
<option value="1">1</option>
<option value="2">2</option>
</select>

<select class="check2">
<option value="3">3</option>
<option value="4">4</option>
</select>

＆＃13;

Answer 2

使用Ajax将选定的选项值发布到PHP并打印响应

Answer 3

请参阅此fiddle

您可以使用Javascript执行此操作。见下面的JS

function addValues() {
  var a = 0,
    b = 0;
  var e = document.getElementById("radio");
  a = e.options[e.selectedIndex].value;
  var e1 = document.getElementById("radio1");
  b = e1.options[e1.selectedIndex].value;
  alert(parseFloat(a) + parseFloat(b));
}

在关闭<script>之前，在<body>内添加上述JS。

单击按钮将调用该函数。按钮的HTML将如下

<button onclick="addValues()">Click to add</button>

<强>更新

请参阅fiddle

更新了HTML

<ul>
  <li>
    <select name="radio" id="radio">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </li>
  <li>
    <select name="radio1" id="radio1">
      <option value="1.2">1.2</option>
      <option value="3.1">3.1</option>
      <option value="0.3">0.3</option>
      <option value="1.2">1.2</option>
    </select>
  </li>
</ul>
<button onclick="addValues()">Click to add</button>
<br/> Result=
<span id="result"></span>

更新了JS

function addValues() {
  var a = 0,
    b = 0;
  var e = document.getElementById("radio");
  a = e.options[e.selectedIndex].value;
  var e1 = document.getElementById("radio1");
  b = e1.options[e1.selectedIndex].value;
  document.getElementById("result").innerHTML = (parseFloat(a) + parseFloat(b));
}

<强>更新

如果您不想要按钮，则只需听取change的{{1}}事件。

请参阅此fiddle

无需提交即可获得价值

3 个答案:

请参阅此fiddle