formulaire sans action et où entrer ne recharge pas la page

Je recherche la meilleure façon de créer un formulaire HTML qui n'a pas de bouton d'envoi. Cela en soi est assez simple, mais je dois également empêcher le formulaire de se recharger lorsque des tâches de type soumission sont effectuées (par exemple, frapper Enterdans un champ de texte).

Ajoutez un gestionnaire onsubmit au formulaire (soit via plain js ou jquery $ (). Submit (fn)), et renvoyez false sauf si vos conditions spécifiques sont remplies.

À moins que vous ne souhaitiez que le formulaire soit soumis, jamais - auquel cas, pourquoi ne pas simplement omettre l'attribut «action» sur l'élément de formulaire?

Vous voudrez l'inclure action="javascript:void(0);"dans votre formulaire pour empêcher les recharges de page et maintenir la norme HTML.

Ajoutez simplement cet événement à votre champ de texte. Cela empêchera une soumission en appuyant sur Entrée, et vous êtes libre d'ajouter un bouton d'envoi ou un formulaire d'appel.submit () si nécessaire:

onKeyPress="if (event.which == 13) return false;"

Par exemple:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

Lorsque vous appuyez sur Entrée dans un formulaire, le comportement naturel du formulaire est d'être soumis, pour arrêter ce comportement qui n'est pas naturel, vous devez l'empêcher de soumettre (comportement par défaut), avec jquery:

$("#yourFormId").on("submit",function(event){event.preventDefault()})

une idée:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

et

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>

Deux façons de résoudre:

1. la valeur d'action du formulaire est "javascript: void (0);".
2. ajoutez un écouteur d'événement de pression de touche pour le formulaire pour empêcher la soumission.

La première réponse est la meilleure solution:

Ajoutez un gestionnaire onsubmit au formulaire (soit via plain js ou jquery $ (). Submit (fn)), et renvoyez false sauf si vos conditions spécifiques sont remplies.

Plus spécifique avec jquery:

$('#your-form-id').submit(function(){return false;});

À moins que vous ne souhaitiez que le formulaire soit soumis, jamais - auquel cas, pourquoi ne pas simplement omettre l'attribut «action» sur l'élément de formulaire?

L'écriture d'extensions Chrome est un exemple où vous pouvez avoir un formulaire de saisie utilisateur, mais vous ne souhaitez pas qu'il soit envoyé. Si vous utilisez action = "javascript: void (0);", le code fonctionnera probablement mais vous vous retrouverez avec ce problème où vous obtenez une erreur concernant l'exécution de Javascript en ligne.

Si vous omettez complètement l'action, le formulaire se rechargera, ce qui est également indésirable dans certains cas lors de l'écriture d'une extension Chrome. Ou si vous aviez une page Web avec une sorte de calculatrice intégrée, où l'utilisateur fournirait une entrée et cliquez sur "Calculer" ou quelque chose comme ça.