I am in a mobile app and I use an input field in order user submit a number.
When I go back and return to the page that input field present the latest number input displayed at the input field.
Is there any way to clear the field every time the page load?
$('#shares').keyup(function(){
payment = 0;
calcTotal();
gtotal = ($('#shares').val() * 1) + payment;
gtotal = gtotal.toFixed(2);
$("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
});
You can clear the input field by using $('#shares').val('');
$(document).ready(function(){
$('#shares').val('');
});
Setting val('') will empty the input field. So you would use this:
Clear the input field when the page loads:
$(function(){
$('#shares').val('');
});
if you hit the "back" button it usually tends to stick, what you can do is when the form is submitted clear the element then before it goes to the next page but after doing with the element what you need to.
$('#shares').keyup(function(){
payment = 0;
calcTotal();
gtotal = ($('#shares').val() * 1) + payment;
gtotal = gtotal.toFixed(2);
$('#shares').val('');
$("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
});
While submitting form use reset method on form. The reset() method resets the values of all elements in a form.
$('#form-id')[0].reset();
OR
document.getElementById("form-id").reset();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
$("#submit-button").on("click", function(){_x000D_
//code here_x000D_
$('#form-id')[0].reset();_x000D_
});<html>_x000D_
<head>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<form id="form-id">_x000D_
First name:<br>_x000D_
<input type="text" name="firstname">_x000D_
<br>_x000D_
Last name:<br>_x000D_
<input type="text" name="lastname">_x000D_
<br><br>_x000D_
<input id="submit-button" type="submit" value="Submit">_x000D_
</form> _x000D_
</body>_x000D_
</html>Since you are using jQuery, how about using a trigger-reset:
$(document).ready(function(){
$('#shares').trigger(':reset');
});
To reset text, number, search, textarea inputs:
$('#shares').val('');
To reset select:
$('#select-box').prop('selectedIndex',0);
To reset radio input:
$('#radio-input').attr('checked',false);
To reset file input:
$("#file-input").val(null);
Source: Stackoverflow.com