web-dev-qa-db-fra.com

Comment puis-je effacer la valeur du champ de texte précédent après la soumission du formulaire sans rafraîchir la page

Je fais une application Web en utilisant javascript et html qui a un formulaire contenant un champ de texte, bouton. Lorsque je saisis un nombre dans ce champ de texte et le soumets en cliquant sur ce bouton, les zones de texte sont générées dynamiquement. Une fois que mon formulaire est envoyé, certaines zones de texte sont créées, mais si je ne suis pas satisfait des zones de texte existantes, saisissez à nouveau une valeur sans actualiser la page. Mais la valeur de champ de texte entrée précédemment prévaut en affichant les nouvelles zones de texte sous les zones de texte existantes de la page. 

Alors, comment puis-je effacer la valeur sans actualiser la page.

<div>
    <html>
     <input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
     <input type="button" value="submit" onclick="getFields();">
</div>
    </html>

    <javascript>
      var num_q=document.getElementById('numquest').value;
     //code for dynamic creation
    </javascript>
javascripthtmlforms
13
Krish

Vous pouvez définir la valeur de l'élément à vide

document.getElementById('elementId').value='';
20
Sam

essaye ça:

si vous utilisez jquery: 

you can reset your form with - $("#myform")[0].reset();

ou 

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

en javascript 

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

function submitForm() {
   // Get the first form with the name
   // Hopefully there is only one, but there are more, select the correct index
   var frm = document.getElementsByName('contact-form')[0];
   frm.submit(); // Submit
   frm.reset();  // Reset
   return false; // Prevent page refresh
}
19
Mr.G

Attribuer une valeur vide: 

document.getElementById('numquest').value=null;

ou, si vous voulez effacer tous les champs du formulaire. Appelez simplement la méthode de réinitialisation du formulaire en tant que: 

document.forms['form_name'].reset()
3
Vin.AI
<form>
<input type="text" placeholder="user-name" /><br>
<input type=submit value="submit" id="submit" /> <br>
</form>

<script>
$(window).load(function() {
$('form').children('input:not(#submit)').val('')
}

</script>

Vous pouvez utiliser ce script là où vous le souhaitez. 

2
loyola

vous pouvez simplement faire comme vous obtenez cette valeur d'éléments

document.getElementById('numquest').value='';
2
Satish Sharma

Je crois qu'il vaut mieux utiliser 

$('#form-id').find('input').val('');

au lieu de

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

si vous avez des cases à cocher dans votre formulaire, utilisez ceci pour le laisser reposer:

$('#form-id').find('input:checkbox').removeAttr('checked');
0
tdh3abood

.val() ou .value est à mon humble avis la meilleure solution car elle est utile avec Ajax. Et .reset() ne fonctionne qu'après le rechargement de pages et que les API utilisant Ajax n'actualisent jamais les pages sauf si elles sont déclenchées par un script différent.

0
Thielicious

HTML

<form id="some_form">
<!-- some form elements -->
</form>

et jquery

$("#some_form").reset();
0
Bilal

J'ai eu ce problème et j'ai résolu en faisant ceci:

.done(function() {
                    $(this).find("input").val("");
                    $("#feedback").trigger("reset");
                });

J'ai ajouté ce code après mon script car j'ai utilisé jQuery. Essayez le même)

<script type="text/JavaScript">

        $(document).ready(function() {
            $("#feedback").submit(function(event) {
                event.preventDefault();
                $.ajax({
                    url: "feedback_lib.php",
                    type: "post",
                    data: $("#feedback").serialize()
                }).done(function() {
                    $(this).find("input").val("");
                    $("#feedback").trigger("reset");
                });
            });
        });
    </script>
    <form id="feedback" action="" name="feedback" method="post">
        <input id="name" name="name" placeholder="name" />
        <br />
        <input id="surname" name="surname" placeholder="surname" />
        <br />
        <input id="enquiry" name="enquiry" placeholder="enquiry" />
        <br />
        <input id="organisation" name="organisation" placeholder="organisation" />
        <br />
        <input id="email" name="email" placeholder="email" />
        <br />
        <textarea id="message" name="message" rows="7" cols="40" placeholder="сообщение"></textarea>
        <br />
        <button id="send" name="send">send</button>
    </form>
0
Antonio112009