How to add input value using jQuery

Question

So I have a form that submits device,color and the problem(with the device) and it displays the correct price underneath nicely using jQuery but I can't figure out how to insert the jQuery result into the hidden input value so that it also sends the price to next page(checkout page) Thanks :)

<form method="POST" action="../action.php">
 <select class="custom-select mr-sm-2" name="device" id="inlineFormCustomSelect">
    <option value="Motorola Edge">Moto Edge</option>
    <option value="Motorola Edge Plus">Moto Edge Plus</option>
  </select>

  <select class="custom-select mr-sm-2" name="color" id="inlineFormCustomSelect">
    <option selected>Select Color..</option>
    <option value="Solar Black">Solar Black</option>
    <option value="Midnight Magneta">Midnight Magneta</option>
  </select>

  <select class="custom-select mr-sm-2" name="issue" id="inlineFormCustomSelect3">
    <option data-price="£0.00" data-total="" selected>Select Problem..</option>
    <option data-price="£40.00" data-total="£42.00" value="Screen Repair">Damaged Screen</option>
    <option data-price="£15.00" data-total="£15.75" value="Battery Replacement">Battery Replacement</option>
    <option data-price="£35.00" data-total="£36.75" value="Audio Repair">Faulty Audio</option>
    <option data-price="£35.00" data-total="£36.75" value="Mic Repair">Faulty Microphone</option>
    <option data-price="£35.00" data-total="£36.75" value="Cam Repair">Faulty Camera</option>
  </select>

 <p><i id="price"></i>+Additional Fees</p>
  <p>Total:<span id="total"></span></p>


  <script type="text/javascript" language="javascript">
    $(function(){
      $('select').change(function(){
          var selected = $(this).find('option:selected');
        $('#price').html(selected.data('price'));
        $('#total').html(selected.data('total'));
      }).change();
    });


    *//This is some code I tried below//*

    $(document).ready(function(){
    $('input[id="price"];').val(price);
  });
  </script>

  <input type="hidden" id="price" name="price" value=''>

  <button type="submit" name="submit">

Are you transitioning to an entire other page, or changing the content inside the div? — Aspect, Jun 01 '21 at 21:58
For one, `price` isn't defined in your jQuery. Also, you are trying to assign the value when the page loads and not on some event — devlin carnate, Jun 01 '21 at 22:03
Also, you have multiple elements with `id='price'` That's not valid HTML. Ids must be unique — devlin carnate, Jun 01 '21 at 22:08
And, just an FYI, that [hidden form field can be modified by the user](https://stackoverflow.com/questions/39684552/can-hidden-fields-be-edited-by-the-user) so don't rely on it if you want to ensure that the user didn't give themselves a discount. — devlin carnate, Jun 01 '21 at 22:12
Hi, yes so its suppost to input the jquery total price into the hidden input value field — Bboi1999, Jun 01 '21 at 22:14
thankyou I have all prices saved and I remember most of them Ill know if someone tries to change it ;) — Bboi1999, Jun 01 '21 at 22:15
and the reason it has id=price is because its taking the price from "data-price" but it just uses "price" rather than data-price — Bboi1999, Jun 01 '21 at 22:16

score 1 · Answer 1 · answered Jun 01 '21 at 22:05

1

In the case that you are trying to use the same values in an entirely different page. You should know that JS variables do not automatically save, you will lose them after refreshing the page or loading another page.

In order to save variables in the browser, you can use localStorage or localSession. In this particular case, I suggest localSession. localSession will delete the data when the browser is close or the cache is cleared.

Also, you could remove the semicolon ';' from $('input[id="price"];').val(price)

I do not suggest using localStorage or localSession for important forms, this requires back-end. You could use PHP, Node, Django, or any back-end for managing forms. But what you tried was ultimatly right, it's just that there was no variable set to retrive the data from. Hence, why the input could be left empty.

answered Jun 01 '21 at 22:05

Aspect

150
11

From my understanding of the question, the OP wants to save the value of price in a hidden field so that value posts with the form and can then be used on another page. You can see from the code segment that "price" exists in the HTML , but in a way that will not submit with the form. – devlin carnate Jun 01 '21 at 22:10
Yes that is correct, I already have user sessions/accounts working in the background infact youhave to login to actually access checkout page – Bboi1999 Jun 01 '21 at 22:13
Thankyou for the quick replies, so if its "ultimately right" how would I go about setting the variable to retrieve from? thanks – Bboi1999 Jun 01 '21 at 22:18

devlin carnate · Answer 2 · 2021-06-01T22:21:23.993

1

One way you can do this is to update the hidden field when you update the text field.

$(function(){
  $('select').change(function(){
      var selected = $(this).find('option:selected');
    $('#price').html(selected.data('price'));
    $('#total').html(selected.data('total'));
    $('#hiddenPrice').val(selected.data('price'));
  }).change();
});

HTML:

<input type="hidden" id="hiddenPrice" name="hiddenPrice" value="">

Notes: In your question, the hidden input has the same Id as the text field. That's not valid HTML. So give your hidden input a different Id (such as id='hiddenPrice'). Also, be aware that hidden fields can still be modified by a user. You should validate the posted price in your server side code to verify it is the correct price.

edited Jun 01 '21 at 22:21

answered Jun 01 '21 at 22:17

devlin carnate

8,309
7
48
82

Thankyou,I will try this out, also yes its all good as I remember most of the prices and also I have an admin page that receives all orders so I can check them over :) – Bboi1999 Jun 01 '21 at 22:21
1

Ah thankyou so much for your help it worked perfectly! much appreciated :) – Bboi1999 Jun 01 '21 at 22:28

Brylle · Answer 3 · 2021-06-02T01:13:08.640

0

Try these

$('select[name="issue"]').on('change', function() {
  var issue = parseFloat($(this).children("option:selected").data('price'));

  $('input[name="price"]').val(issue);
  // or this one below
  $('input[name="price"]').val(issue).trigger('change');
});

Also, try changing the id of your hidden input field and remove or extract this '£' from the data-price.

edited Jun 02 '21 at 01:13

answered Jun 02 '21 at 01:02

Brylle

46
6

How to add input value using jQuery

3 Answers3