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
If you are using Ajax to submit the form then in the success part, you can use following code
or
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:
I think this should work