CODEWITHSUNDEEP
javascriptjqueryinput
Bboi1999
Bboi1999

Reputation: 21

How to add input value using jQuery

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">

Upvotes: 0

Views: 1514

Answers (3)

Brylle
Brylle

Reputation: 46

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.

Upvotes: 0

devlin carnate
devlin carnate

Reputation: 8592

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.

Upvotes: 1

w3cy5e5
w3cy5e5

Reputation: 150

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.

Upvotes: 1

Related Questions