prévenir soumettre le formulaire de redirection/rafraîchissement à l'aide de javascript

J'ai une page où vous pouvez entrer des données dans une série de texboxes (généré à partir de php), et de 2 boutons, GetData et SaveData. Je veux être en mesure d'appuyer sur entrée lors de la modification de la texboxes, et il serait d'effectuer la même action que de cliquer sur le SaveData bouton (onclick="onSave();"). Je peux réaliser cela en procédant comme suit:

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

mais quand j'appuie sur enter, la page est redirigé vers la page, sans le php post (ex.:www.mypage.com/index.php au lieu de www.mypage.com/index.php?edit_data=true)

Comment puis-je obtenir ce que je veux?

InformationsquelleAutor David Menard | 2010-07-09
  1. 5

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

    • merci, c'était une partie de la solution, la deuxième partie a pour objet de remplacer à l'action de l'attribut par le onsubmit attr.
    InformationsquelleAutor ULysses
  2. 2

    La réponse était (merci à Ulysse pour la partie fo la réponse):

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

    Mon onSave(); la fonction ne retourne false, mais depuis qu'il était en train de faire la redirection, j'ai dû mettre le return false après la onSave(); (expliquer pourquoi??)

    Merci!

    InformationsquelleAutor David Menard
  3. 2

    Assurez-vous que votre onSave(); retourne false, et de l'action de modification onsubmit="return onSave();".

    InformationsquelleAutor Oded
  4. 0

    hmm... avez-vous intentionnellement oublié la balise method="POST" ? 🙂

    InformationsquelleAutor Puaka
  5. 0

    1. button1 comme bouton Soumettre

    2. bouton2 comme type= "bouton" sur cliquant bouton2 appel de la fonction javascript qui créent lik à l'aide de la fenêtre.emplacement.href="www.mypage.com/index.php?edit_data=true"

    • J'ai simplement mis button1 à l'extérieur de la forme
    InformationsquelleAutor Salil
  6. 0

    Aucun de ces solutions proposées en ce qui a fonctionné pour moi, tout à l'aide d'un formulaire PHP.

    Essentiellement, ce que je voulais faire était d'avoir une forme simple qui cacher après il est soumis. J'ai utilisé jQuery pour écouter lorsque le clic est arrivé, mais il n'avait pas d'importance parce que la page actualisée. Ensuite, j'ai utilisé le JS pour empêcher le comportement par défaut pour la présentation (ex. e.preventDefault();). Ce que j'ai trouvé...

    J'ai fini le réglage de la forme de l'action de"#", de sorte qu'il serait de changer l'URL une fois que le formulaire a été soumis. Javascript lit l'URL pour le hachage et permet de masquer/afficher les éléments nécessaires, puis rediriger après quelques secondes, si elle est présente. Oui, la page s'actualise, mais je reçois le bon comportement à l'aide de JS avec la page rafraîchissante fonctionnalité.

    Voici mon 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>
    InformationsquelleAutor Bryce