Search code examples
phpjqueryshopping-cart

jquery remove hidden form value after form submit

I have a small form and I need jquery to clear the hidden form value after the form has been submitted.

Here is a snippet from my form

<select id='size'>
    <option value='4.99'>S</option>
    <option value='5.99'>M</option>
    <option value='6.99'>L</option>
    <option value='7.99'>XL</option>
</select>

<input type="hidden" id="my-item-price" name="my-item-price" value="" />

and the jquery which changes the hidden field value

$(document).ready(function(){

    $('#size').change(function() {

        var x= $(this).val();
        $('#my-item-price').val(x);
    });
}

the problem is once I have submitted the form, I want the value to be erased from the hidden input. I expect that i have to set the value to "" but how do I do it?

EDIT -:

Here is a link to a testing part of my site

What I want to do is once the button is clicked, it resets the hidden form value to nothing so when i make a new selection, it changes the value again

Here is the code for the jquery. 

    function clearoption() {
            alert('it should work');
            $('#my-item-price').attr('value','');
        }

        $('#size').change(function() {

            var x= $(this).val();
            $('#my-item-price').val(x);
        }); 

      // Add an item to the cart
      $('.jcart').submit(function(e) {
         add($(this));
         clearoption();
         e.preventDefault();
      });

It's calling the function to clear the #my-item-price but for some reason it's not doing it. If i make a different size selection it still adds the original price

Solution

  • If you are using Ajax to submit the form then in the success part, you can use following code

     $(' #myform input:hidden').attr('value','');

    or

    $('#my-item-price').attr('value','');

    else if u r not using ajax for submitting form then clearing hidden fields wont make sense.

    also, it would be a lot easier if u can post link to your page!

    EDIT: To trigger/update the change to the

    tag where the price is displayed, you need to do following:

    $(' #myform input:hidden').attr('value','').trigger('change');

    I think this should work