web-dev-qa-db-fra.com

formulaire sans action et où

Je cherche le moyen le plus simple de créer un formulaire HTML sans bouton d'envoi. C’est assez facile en soi, mais j’ai également besoin d’empêcher le formulaire de se recharger lui-même lorsque des tâches semblables à celles de la soumission sont effectuées (par exemple, frapper Enter dans un champ de texte).

javascripthtmlforms
79
Matt Roberts

Ajoutez un gestionnaire onsubmit au formulaire (via plain js ou jquery $ (). Submit (fn)) et renvoyez false à moins que vos conditions spécifiques ne soient remplies.

À moins que vous ne souhaitiez jamais que le formulaire soit envoyé - dans ce cas, pourquoi ne pas simplement laisser de côté l'attribut "action" de l'élément de formulaire?

38
K Prime

Vous voudrez inclure action="javascript:void(0);" dans votre formulaire pour empêcher les rechargements de page et maintenir le standard HTML.

161
Dutchie432

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 d'appeler form.submit () comme requis:

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

Par exemple:

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

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

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

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>
2
tom nobleman

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 frappe pour le formulaire afin d’empêcher la soumission.
0
bill

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

Ajoutez un gestionnaire onsubmit au formulaire (via plain js ou jquery $ (). Submit (fn)) et renvoyez false à moins que vos conditions spécifiques ne soient rencontré.

Plus spécifique avec jquery:

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

À moins que vous ne vouliez pas que le formulaire soit envoyé - dans quel cas, pourquoi ne pas simplement laisser de côté l'attribut 'action' sur l'élément de formulaire?

Écrire des extensions Chrome est un exemple d’emplacement où vous pourriez avoir un formulaire à saisir, mais que vous ne voulez 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 lors de l'exécution de Javascript en ligne.

Si vous omettez complètement l'action, le formulaire sera rechargé, 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, dans laquelle l'utilisateur fournirait une entrée et cliquerait sur «Calculer» ou quelque chose comme ça.

0
skelliam