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? — w3cy5e5
– w3cy5e5, Commented Jun 1, 2021 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
– devlin carnate, Commented Jun 1, 2021 at 22:03
Also, you have multiple elements with id='price' That's not valid HTML. Ids must be unique — devlin carnate
– devlin carnate, Commented Jun 1, 2021 at 22:08
And, just an FYI, that hidden form field can be modified 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
– devlin carnate, Commented Jun 1, 2021 at 22:12
Hi, yes so its suppost to input the jquery total price into the hidden input value field — Bboi1999
– Bboi1999, Commented Jun 1, 2021 at 22:14

w3cy5e5 · Accepted Answer · 2021-06-01 22:05:13Z

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 1, 2021 at 22:05

w3cy5e5

15012 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

devlin carnate Over a year ago

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.

Bboi1999 Over a year ago

Yes that is correct, I already have user sessions/accounts working in the background infact youhave to login to actually access checkout page

Bboi1999 Over a year ago

Thankyou for the quick replies, so if its "ultimately right" how would I go about setting the variable to retrieve from? thanks

devlin carnate · Accepted Answer · 2021-06-01 22:21:23Z

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 1, 2021 at 22:21

answered Jun 1, 2021 at 22:17

devlin carnate

8,6617 gold badges55 silver badges106 bronze badges

2 Comments

Bboi1999 Over a year ago

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 Over a year ago

Ah thankyou so much for your help it worked perfectly! much appreciated :)

Brylle · Accepted Answer · 2021-06-02 01:13:08Z

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 2, 2021 at 1:13

answered Jun 2, 2021 at 1:02

Brylle

466 bronze badges

Collectives™ on Stack Overflow

How to add input value using jQuery

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related