Submit form without reload

Question

i have problem, i want to click button and submit form and button change from OPEN to CLOSE. and it works but the main problem when the page reload the open value changes to close after click and return back to open value so i wanted to make my page not to reload so when i click button open and goes to close without turning back to open. its like i want to prevent page reload after form submit, main issue prevent page reload after submit so that button remain on close value after click

<!DOCTYPE html>
<html lang="en">
<head>
<title>asdsadsad</title>

</head>
<form id="form" action="test.html" method="post">
<input onclick="ClickMethod()" type="button" value="Open" id="myButton1">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function ClickMethod() {

  document.getElementById("myButton1").value="Close";
  document.getElementById("form").submit();
}
var frm = $('#form');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });

        ev.preventDefault();
    });
</script>
</body>
</html>

you need to use `return false` instead of `ev.preventDefault()` explanation: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — kubido, Jun 04 '20 at 16:19
Does this answer your question? [Submit form without page reloading](https://stackoverflow.com/questions/2866063/submit-form-without-page-reloading) — M0nst3R, Jun 04 '20 at 16:20

Floyd Lawton · Answer 1 · 2020-06-04T18:40:43.557

Try this

<!DOCTYPE html>
<html lang="en">
<head>
<title>Your Title</title>
</head>
<form id="form" method="post" action="test.html">
<input onclick="ClickMethod()" type="button" value="Open" id="myButton1">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function ClickMethod() {
  document.getElementById("myButton1").value="Close";
  var frm = $('#form');
  $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });
}
</script>
</body>
</html>

yes bro thats wat i need, but its not submitting only changing button name, i even added method="post" but not submitting — mike joe, Jun 04 '20 at 18:19

Submit form without reload

1 Answers1