Prevent Form Submit From Redirecting/refreshing Using Javascript

October 27, 2023 Post a Comment

I have a page where you can enter data within a series of texboxes (generated from php), and 2 buttons, GetData and SaveData. I want to be able to press enter when editing the texb

Solution 1:

try <form id="editForm" name="editForm" action="onSave();return false;">

Solution 2:

The answer was (thanks to Ulysses for part fo the answer):

<form id="editForm" name="editForm" onsubmit="onSave();return false;">

My onSave(); function did return false, but since it was doing the redirection, I had to put the return false after the onSave(); (explain why??)

Thanks!

Solution 3:

Make sure that your onSave(); returns false, and change action to onsubmit="return onSave();".

Solution 4:

button1 as Submit button
button2 as type='button' on cliking button2 call javascript function which create lik using window.location.href="www.mypage.com/index.php?edit_data=true"

Solution 5:

None of these proposed solutions worked for me while using a PHP form.

Essentially, what I wanted to do was have a simple form that will hide after it is submitted. I used jQuery to listen for when the click happened, but it didn't matter because the page refreshed. Then, I used JS to prevent the default behavior for the submission (ex. e.preventDefault();). What I came up with...

I ended up setting the form action to "#" so that it would change the URL after the form was submitted. Javascript reads the URL for the hash and will hide/show necessary elements then redirect after a few seconds if it is present. Yes, the page still refreshes, but I get the proper behavior by using JS with the page refreshing feature.

Here's my code:

<?phpinclude_once'db.php'; // includes login to DBif('POST' === $_SERVER['REQUEST_METHOD'] && isset($_POST['submit']))
{
  $ip = $_POST['publicIP'];

  $sql_query = "INSERT INTO tablename(PublicIP) VALUES('$ip')";
  mysql_query($sql_query);
}

?><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="robots"content="noindex, nofollow"><scriptsrc="//code.jquery.com/jquery-1.11.3.min.js"></script><script>var publicIP = '<?phpecho$_SERVER['REMOTE_ADDR']; ?>';</script><style>form, [type="submit"] {
  max-width: 300px;
  margin: 0 auto;
}
form {
  border: 4px solid #757679;
  border-radius: 5px;
  box-shadow: 4px4px4px#A5A5A5;
}
[type="submit"] {
  border: none;
  height: 5em;
  width: 100%;
  font-size: 2em;
  color: #353638;
  background-color: #22D1F2;
  text-shadow: -1px -1px1px#949494;
}
input[name="publicIP"] {
  display: none;
}
p { text-align: center; }

p, form {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s
  transition: all 2s;
}
.hidden { 
  display: none !important; 
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s
  transition: all 2s;
}
</style></head><body><pclass="hidden">Thank you for visiting. You will be redirected within 3 seconds.</p><formaction="#"method="POST"><inputtype="text"name="publicIP"><buttontype="submit"name="submit"value="Submit">Submit</button></form><script>document.querySelector('input[name=publicIP]').value = publicIP;
</script><script>functionredirect() {
  setTimeout(function() {
    window.location = "https://google.com";
  }, 3000);
}
if (window.top.location.href.indexOf('#') > 0) {
  $('form').addClass('hidden');
  $('p').removeClass('hidden');
  redirect();
}
</script></body></html>

Html5 Works