CODEWITHSUNDEEP
javascripthtmljquerycss
mike joe
mike joe

Reputation: 29

Submit form without reload

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>

Upvotes: 1

Views: 941

Answers (1)

Floyd Lawton
Floyd Lawton

Reputation: 43

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>

Upvotes: 2

Related Questions