prevent form submit from redirecting/refreshing using javascript

Question

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 texboxes, and it would perform the same action as clicking the SaveData button (onclick="onSave();"). I can acheive this by doing the following:

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

but when I press enter, the page is redirected to the page, without the php post (ex.:www.mypage.com/index.php, instead of www.mypage.com/index.php?edit_data=true)

How do I achieve what I want?

ULysses · Accepted Answer · 2010-07-09 15:18:19Z

7

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

answered Jul 9, 2010 at 15:18

ULysses

9784 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Menard Over a year ago

thanks, this was part of the solution, second part was to replace to action attribute by the onsubmit attr.

David Menard · Accepted Answer · 2010-07-09 15:25:19Z

3

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!

answered Jul 9, 2010 at 15:25

David Menard

2,3213 gold badges44 silver badges68 bronze badges

Comments

Oded · Accepted Answer · 2010-07-09 15:28:23Z

2

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

edited Jul 9, 2010 at 15:28

answered Jul 9, 2010 at 15:17

Oded

501k102 gold badges900 silver badges1k bronze badges

Comments

Salil · Accepted Answer · 2010-07-09 15:19:49Z

0

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"

answered Jul 9, 2010 at 15:19

Salil

47.7k22 gold badges127 silver badges161 bronze badges

1 Comment

David Menard Over a year ago

I simply put button1 outside of the form

Bryce · Accepted Answer · 2015-06-24 17:58:54Z

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>

Collectives™ on Stack Overflow

prevent form submit from redirecting/refreshing using javascript

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related