11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Bouton Reset

Bonjour

J'ai un formulaire avec une id "register_form"

J'ai plusieurs champs input 



<input class="col-sm-5 " type="text" name="pseudo" id="pseudo" value="<?php if (isset($_POST['pseudo'])) echo stripslashes(htmlentities(trim($_POST['pseudo']))); ?>" >


En cas d'erreur je reviens sur le formulaire et garde ce qui était rempli

J'ai deux boutons, un pour Valider (avec id="envoyer") et un autre pour effacer les champs input (id="effacer")

Quand je déclanche le bouton effacer cela efface mais ensuite récupère la valeur

Comment je peux faire ?

Merci de votre aide car débutant en js



<script type="text/javascript">


    var form_register = querySelector("#register_form");
            
    var items = form_register.getElementsByTagName("input");

    var btnEffacer = form_register.querySelector("#effacer");
     
    btnEffacer.addEventListener("click", function() {
        

    for (var i = 0; i < items.length; i++) 
        {

    items(i).value='';
        }
    });

Modifié par dudu22 (12 Apr 2020 - 12:22)
Bonjour dudu22,
Pas très clair, ton problème est que quand tu cliques sur btnEffacer que le code items(i).value=''; est exécuté, la valeur des items (input) n'est pas vide mais reprend la valeur saisie en erreur.

Si btnEffacer est une balise <button> vérifie que l'attribut soit égal à : type="button"

Il est possible d'avoir le code HTML ?
Merci beaucoup pour ta réponse.

Voici le code



if ($errors)
                { 
?>
                <div class="alert alert-danger uk-text-center">
                    <p><strong>Vous n'avez pas rempli le formulaire correctement</strong></p>
                    <ul>
                        <?php foreach($errors as $error): ?>
                            <li><?= $error; ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
<?php                    
                }
            else
                {
?>
                <div class="alert alert-success uk-text-center">                
                    <p>Formulaire complété<br/>
                     Vous allez recevoir un mail pour confirmer votre compte   
                    </p>
                </div>
<?php                
                }

?>

                <h3 class="text-center">Merci de vous enregistrer</h3>
                <!--<div class="card-body ">-->
                <form method="post" id="register_form">
                    <div class="form-group">
                        <label for="pseudo" class="champ col-sm-4 control-label text-left">Pseudo (entre 6 et 10 caractères)</label>
                        <input class="col-sm-5 " type="text" name="pseudo" id="pseudo" value="<?php if (isset($_POST['pseudo'])) echo stripslashes(htmlentities(trim($_POST['pseudo']))); ?>" >
                        </div>
                    <div class="form-group">
                        <label for="mail" class="champ col-sm-4 control-label text-left">Mail</label>
                        <input class="col-sm-7 " type="text" name="mail" id="mail" oncopy="return false" onpaste="return false" oncut="return false" value="<?php if (isset($_POST['mail'])) echo stripslashes(htmlentities(trim($_POST['mail']))); ?>">
                    </div>
                    <div class="form-group">
                        <label for="mail_confirm" class="champ col-sm-4 control-label text-left">Confirmez votre email</label>
                        <input class="col-sm-7 " type="text" name="mail_confirm" id="mail_confirm" oncopy="return false" onpaste="return false" oncut="return false" value="<?php if (isset($_POST['mail_confirm'])) echo stripslashes(htmlentities(trim($_POST['mail_confirm']))); ?>">
                    </div>
                    <div class="form-group">
                        <label for="password" class="champ col-sm-4 control-label text-left">Votre mot de passe</label>
                        <input class="col-sm-7 " type="password" name="password" id="password" value="<?php if (isset($_POST['password'])) echo stripslashes(htmlentities(trim($_POST['password']))); ?>">
                    </div>
                    <div class="form-group">
                        <label for="password_confirm" class="champ col-sm-4 control-label text-left">Confirmez votre mot de passe</label>
                        <input class="col-sm-7 " type="password" name="password_confirm" id="password_confirm" value="<?php if (isset($_POST['password_confirm'])) echo stripslashes(htmlentities(trim($_POST['password_confirm']))); ?>">
                    </div>        
            
                    <button class="btn btn-primary" id="envoyer" name="envoyer">Envoyer</button>
                    <button class="btn btn-primary" id="effacer" name="effacer" class="effacer" >Effacer</button>
                </form>
<?php                
               //}
?>            
            </div> 
        </div>

<script type="text/javascript">

    //var form_register = document.getElementById("register_form");

    var form_register = querySelector("#register_form");
            
    var items = form_register.getElementsByTagName("input");
    
    var btnEffacer = form_register.querySelector("#effacer");
     
    btnEffacer.addEventListener("click", function() {
   
    for (var i = 0; i < items.length; i++) 
        {

    items(i).value ='Test';
        }
    });


</script>
aliasdmc a écrit :

Si btnEffacer est une balise &lt;button&gt; vérifie que l'attribut soit égal à : type="button"

T'as essayé ?
Modérateur
Bonjour,
pourquoi n'utilises tu pas directement un type="reset" ? 
<button type="reset"  class="btn btn-primary effacer" id="effacer" name="effacer"  >effacer</button>
ou simplement 
<input  class="btn btn-primary effacer"  id="effacer" name="effacer"   type="reset" value="Effacer">
?

Pas besoin de script pour vider tes champs : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/reset
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/reset a écrit :
Les éléments <input> de type "reset" sont affichés sous la forme de boutons permettant de réinitialiser l'ensemble des champs du formulaire avec leurs valeurs initiales.


Par défaut, un button est de type submit et vas donc soumettre ton formulaire ...
Modifié par gcyrillus (12 Apr 2020 - 16:29)
Merci gcyrillus.

Mais le problème est que je remets les valeurs quant il y a des erreurs pour éviter de tout re saisir.

Merci aliasdmc

Je pense qu'il faut faire deux cas :

1 er cas en arrivant sur le formulaire au tout début donc sans avoir posté (sans isset post) et mettre au départ les valeurs à blanc

2 ème cas en postant, mettre les valeurs remplies quant il y a des erreurs
J'ai donc fait deux cas et donc je peux faire un bouton type reset simplement

Merci à tous les deux
Bonjour dudu22,
Pour info si je ne me trompe pas :
Le <button type=reset> remet la valeur initiale de value dans le champ
si ton champ au chargement de la page à une valeur de "toto" , le reset remettra "toto"

Pour moi tu as juste à mettre un type=button sur le "effacer"
car par défaut il est de type submit. Donc actuellement le formulaire est renvoyé
Sujet clos
Aller à