Question

但我会对如何将这个结果从js发送为get

感兴趣

<form method="GET" action="order2.php">
<input type="checkbox" name="obj" price="5" value="1" >5
<input type="checkbox" name="obj" price="15" value="2">15
<input type="checkbox" name="obj" price="20" value="3">20
<input type="submit" value="send">
<div id="test"></div>

<script type="text/javascript">
$(":input").change(function() {
var values = $('input:checked').map(function () {
return $(this).attr('price');;
}).get();
var total = 0;
$.each(values,function() {
total += parseFloat(this);
});
$("#test").text(total);
});
</script>
</form>

当我选择输入1和2时，结果是在url order2.php？price = 20

Answer 1

当表单提交时，它会将所有输入附加到查询字符串或发布数据（取决于请求类型）。使用sum添加另一个名为price的字段参数的一种非常简单的方法就是添加隐藏的输入并使用总和动态更新。

请注意，我从复选框中删除了name属性。我这样做是为了不在表格提交上发送。

我还将forEach替换为reduce()，因为它更实用，您可以使用map()

链接它

$("#myform input").change(function() {
    var total = $('input:checked').map(function () {
        return $(this).attr('price');
    }).get().reduce(function(sum, value) {
        return sum + parseFloat(value);
    }, 0);
    $(".price").val(total);
    $(".price").html(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="GET" action="order2.php">
    <input type="checkbox" price="5" value="1" >5
    <input type="checkbox" price="15" value="2">15
    <input type="checkbox" price="20" value="3">20
    <input type="hidden" name="price" class="price"/>
    <input type="submit" value="send">
</form>
<span class="price"></span>

Answer 2

$(":input").change(function() {
  var values = $('input:checked').map(function () {
    return $(this).attr('price');;
  }).get();
  
  var total = 0;
  $.each(values,function() {
    total += parseFloat(this);
  });
  
 
  $("#test").text(total);

  $('form').attr('action', 'order2.php?price=' + total);
  console.log ( $('form').attr('action') ) ;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
But I would be interested in how I can send this result from the js as a get
When I select inputs 1 and 2 so that the result is in url order2.php?price=20

<form method="GET" action="order2.php">
  <input type="checkbox" name="obj" price="5" value="1" >5
  <input type="checkbox" name="obj" price="15" value="2">15
  <input type="checkbox" name="obj" price="20" value="3">20
  <input type="submit" value="send">
  <div id="test"></div>
</form>

Answer 3

根据您的描述，当您选择选项1和2时，您将选项的总和作为价格。我会把它分解为几步：

您必须对所选选项进行求和
构建查询参数
使用Ajax发出获取请求

这指导了Ajax tutorial for post and get的操作方法。希望这会有所帮助...

从JS提取到url

3 个答案: