Tutorial :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?


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

hmm... did you intentionally forgot the tag method="POST" ? :)


Solution:5

  1. button1 as Submit button

  2. 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:6

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>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »