Extract from JS to url

Question

But I would be interested in how I can send this result from the js as a 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>

When I select inputs 1 and 2 so that the result is in url order2.php?price=20

Jim Wright · Answer 1 · 2017-08-14T22:18:24.823

When a form submits, it will append all of it's inputs to the query string or post data (depending on the request type). A very simple way to add another field parameter called price with the sum is just to add a hidden input and update that dynamically with the sum.

Notice that I remove the name attribute from the checkboxes. I did this so that they wouldn't be send on the form submission.

I also replaced your forEach with a reduce() as it is more functional and you can chain it with the 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>

Ok, but now I can not see the price for the snooping – Pito Aug 14 '17 at 18:34 — Pito, Aug 14 '17 at 18:34

score 0 · Answer 2 · answered Aug 14 '17 at 17:46

$(":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>

Surely rebuilding the action is more effort than using the default action of form parameters with a GET request? — Jim Wright, Aug 14 '17 at 18:02

score 0 · Answer 3 · answered Aug 14 '17 at 17:52

0

From your description that when you select option 1 and 2, you have the sum of the options as the price. I'll break this down into steps:

You have to sum the selected options
Construct your query param
Use Ajax to make your get request

This guides through how to do Ajax tutorial for post and get. Hope this helps...

answered Aug 14 '17 at 17:52

ibonly

133
1
3
10

I don't think OP wants to send the request asynchronously. – Jim Wright Aug 14 '17 at 18:03

Extract from JS to url

3 Answers3