Prevent Form Submit From Redirecting/refreshing Using Javascript

April 26, 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:

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

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

?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script>var publicIP = '<?php echo $_SERVER['REMOTE_ADDR']; ?>';</script>

<style>
form, [type="submit"] {
  max-width: 300px;
  margin: 0 auto;
}
form {
  border: 4px solid #757679;
  border-radius: 5px;
  box-shadow: 4px 4px 4px #A5A5A5;
}
[type="submit"] {
  border: none;
  height: 5em;
  width: 100%;
  font-size: 2em;
  color: #353638;
  background-color: #22D1F2;
  text-shadow: -1px -1px 1px #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>

<p class="hidden">Thank you for visiting. You will be redirected within 3 seconds.</p>

<form action="#" method="POST">
  <input type="text" name="publicIP">
  <button type="submit" name="submit" value="Submit">Submit</button>
</form>

<script>
document.querySelector('input[name=publicIP]').value = publicIP;
</script>

<script>
function redirect() {
  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>

Build Html5