web-dev-qa-db-fra.com

Effacement de mes entrées de formulaire après soumission

Je l'ai essayé de différentes manières en fonction des recherches que j'ai effectuées sur le sujet et pour une raison quelconque, je ne parviens pas à le faire fonctionner. Je veux juste que mes entrées de texte et textarea soient effacés après avoir cliqué sur le bouton d'envoi.

Voici le code.

<div id="sidebar-info">
    <form name="contact-form" action="formprocess.php" method="post" target="ninja-frame">
        <h1>By Phone</h1>
        <p id="by-phone">XXX-XXX-XXXX</p>
        <h1>By Email</h1>
        <p id="form-row">Name</p>
        <input name="name" id="name" type="text" class="user-input" value="">
        <p id="form-row">Email</p>
        <input name="email" id="email" type="text" class="user-input" value="">
        <p id="form-row">Message</p>
        <textarea name="message" id="message" class="user-input" rows="10" maxlength="1500"></textarea>
        <p>*Please fill out every field</p>
        <input type="submit" value="Submit" id="submit" onclick="submitForm()">

        <script>
            function submitForm() {
            document.contact-form.submit();
            document.contact-form.reset();
            }
        </script>
    </form>
</div>
javascriptjqueryhtml5
9
Szuturon

Votre formulaire est déjà soumis car votre bouton est de type submit. Ce qui, dans la plupart des navigateurs, entraînerait la soumission d'un formulaire et le chargement de la réponse du serveur plutôt que l'exécution de javascript sur la page.

Changez le type du bouton d'envoi en button. De plus, étant donné que l'identifiant submit est attribué à ce bouton, il provoquera un conflit avec la fonction d'envoi de Javascript. Changer l'id de ce bouton. Essayez quelque chose comme

<input type="button" value="Submit" id="btnsubmit" onclick="submitForm()">

Un autre problème dans cette instance est que le nom du formulaire contient un tiret -. Cependant, Javascript traduit - en tant que moins.

Vous devrez soit utiliser la notation basée sur les tableaux, soit utiliser document.getElementById()/document.getElementsByName(). La fonction getElementById() renvoie directement l'instance de l'élément car l'identifiant est unique (mais il faut définir un identifiant). La getElementsByName() renvoie un tableau de valeurs portant le même nom. Dans ce cas, comme nous n'avons pas défini d'identifiant, nous pouvons utiliser la variable getElementsByName avec l'index 0.

Essayez ce qui suit

function submitForm() {
   // Get the first form with the name
   // Usually the form name is not repeated
   // but duplicate names are possible in HTML
   // Therefore to work around the issue, enforce the correct index
   var frm = document.getElementsByName('contact-form')[0];
   frm.submit(); // Submit the form
   frm.reset();  // Reset all form data
   return false; // Prevent page refresh
}
22
Kami

Vous pouvez essayer ceci:

function submitForm() {
  $('form[name="contact-form"]').submit();
  $('input[type="text"], textarea').val('');
}

Ce script nécessite l’ajout de jQuery sur la page.

4
Jai

Le moyen le plus simple serait de définir la valeur de l'élément de formulaire. Si vous utilisez jQuery (ce que je recommande vivement), vous pouvez le faire facilement avec 

$('#element-id').val('')

Cela peut fonctionner pour tous les éléments d'entrée du formulaire (je ne l'ai jamais essayé)

$('#form-id').children('input').val('')

Notez que .children ne trouvera les éléments d’entrée qu’un niveau plus bas. Si vous avez besoin de trouver des petits-enfants ou un tel .find () devrait fonctionner.

Il peut y avoir un meilleur moyen mais cela devrait fonctionner pour vous.

3
Nick Mitchinson

puisque vous utilisez la bibliothèque jquery, je vous conseillerais d’utiliser la méthode reset(). 

Tout d'abord, ajoutez un attribut id à la balise de formulaire

<form id='myForm'>

Ensuite, effacez vos champs de saisie comme suit:

$('#myForm')[0].reset();
2
Akintunde-Rotimi

Essaye ça:

$('#contact-form input[type="text"]').val('');
$('#contact-form textarea').val('');
2
Duarte Madueño

J'ai utilisé ce qui suit avec jQuery $("#submitForm").val("");

où submitForm est l'id de l'élément d'entrée dans le code HTML. Je l'ai exécuté APRÈS ma fonction pour extraire la valeur du champ de saisie. Cette fonction extractValue ci-dessous:

function extractValue() { var value = $("#submitForm").val().trim(); console.log(value); };

N'oubliez pas non plus d'inclure la méthode preventDefault(); pour empêcher le formulaire de type d'envoi d'actualiser votre page!

0
Ado Moshe