How to prevent form from instantly clearing Value='' attribute

Question

I have a basic script which sets the value of a html input field after a form has been submitted

<button id='submitbutton' name="Submit" class="btn btn-primary" onclick="Refresh()">Submit</button>
<script>
 function Refresh() {

     document.getElementById("mrent").value = "20";

}

</script>

and I have a basic error animation which makes the invalid fields I have go red

If the user inputs a correct input the box will not go red signifying it has passed the error check, however every time I submit a form and a value inputted is incorrect every value is reset. My original function tries to set the previous values back to their old state with the stored variables they were given, however every time I click my submit button and submit my form the red circle around the input box does not come up meaning the value is correct and has been passed in but the value disappears.

I can see the set value come in for a split second before it is cleared, however when I manually set the html input boxes value the value stays but when I use a function and a button it instantly clears. How do I make it so the value stays and does not automatically clear? and is there another way I can keep the previous values of my form after I have submitted my form when some values in my form are wrong?

Answer 1

Every time you click the button the form is submitted and inputs value are reset. If you want to prevent form submit, inside your form tag you can add onsubmit="return false". You now can check the input value and if they are correct you can submit the form with javascript.