Nettoyer un champ de formulaire si refus confirmation

Bonjour à toutes et tous

Je me heurte à un petit problème donc je viens demander votre aide.
J'ai un formulaire dans lequel je renseigne mon champ. Le but de se formulaire est d'effacer le champ rentrée dans ma BDD.

Code:

---

1 2 3 4

<form method="POST" action="/initest/suppressionurl/suppressionurl" onSubmit="return confirmation();"> <label for="URLASupprimer">URL à Supprimer:</label><input type="text" class="URLASupprimer" name="URLASupprimer" style="width:250px"/> <input type="submit" id="ValiderSuppr" value="Valider"> </form>

---

J'ai donc installé une "confirmation" en javascript pour demander à l'utilisateur s'il est sûr de vouloir effacer la donnée

Code:

---

1 2 3 4 5 6 7 8 9 10

function confirmation() { if (window.confirm('Attention, vous êtes sur le point de supprimer l\'URL sélectionnée, voulez-vous continuer ?')) { } else { return false; } }

---

Cela marche bien, mais je voudrais que lorsque je refuse de confirmer, je nettoie le champ de mon formulaire. Et la je coince. Donc pouvez-vous m'aider svp ???

PS: la solution proposée peut être soit en javascript natif soit avec jQuery (vu que je l'utilise)

Salut,

En ajoutant un attribut id au champ concerné

Code:

---

<input type="text" class="URLASupprimer" name="URLASupprimer" id="URLASupprimer" style="width:250px" />

---

On peut y accéder simplement pour y modifier ses propriétés

Code:

---

1 2	document.getElementById('URLASupprimer').value=''; return false;

---

Bonjour et merci pour la réponse,

Sans avoir a ajouter un id est-ce que cela peut fonctionner:

Code:

---

1 2	jQuery(".URLASupprmier").value("");

---

???

N'utilisant pas la bibliothèque jQuery, je ne peux te répondre :?

Bonjour,

Citation:

---

Sans avoir a ajouter un id est-ce que cela peut fonctionner:

---

un minimum de recherche ne te tente pas

• http://api.jquery.com/category/selectors/

Mon petit doigt me dit que tu vas sans doute un peu galérer si tu veux garder ta syntaxe et utiliser jquery. Il faudra transmettre l'objet (ici le formulaire) depuis le "onsubmit" pour le manipuler avec jquery. Cela pourrait donner :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<form method="post" action="/initest/suppressionurl/suppressionurl" onsubmit="return validerSuppr(this);"> <label>URL à Supprimer:<input type="text" name="URLASupprimer" style="width:250px"/></label> <input type="submit" value="Valider"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> function validerSuppr(objet) { if (!window.confirm('Attention, vous êtes sur le point de supprimer l\'URL sélectionnée, voulez-vous continuer ?')) { $(objet).find('input[name=URLASupprimer]').val('').focus(); return false; } } </script>

---

Plus classiquement et pour éviter d'ajouter des comportements javascript à l'intérieur du html, on externalise le onsubmit que l'on défini alors en ciblant l'objet (ici le formulaire).

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<form class="validerSuppr" method="post" action="/initest/suppressionurl/suppressionurl"> <label>URL à Supprimer:<input type="text" name="URLASupprimer" style="width:250px"/></label> <input type="submit" value="Valider"> </form> <script> $(".validerSuppr").on('submit',function() { if (!window.confirm('Attention, vous êtes sur le point de supprimer l\'URL sélectionnée, voulez-vous continuer ?')) { $(this).find('input[name=URLASupprimer]').val('').focus(); return false; } }) </script>

---

J'ai choisi dans ce deuxième exemple une classe pour cibler le formulaire ce qui permettrait de mettre l'ensemble dans une boucle.

Ton réflexe était bon de vouloir éviter d'ajouter un identifiant. En effet, sauf cas particuliers, inutile d'alourdir le code quand on peut cibler les éléments facilement par rapport à leur contexte. Aussi j'ai épuré au maximum dans mes exemples.

Les explications du code peuvent se trouver dans le lien qu'à donné NoSmoking

Bonjour, En Jquery cela donnerait $("input[value='leNomInput']").val("") pour vider l'input dont le nom est leNomInput,
si tu veux vider pusieurs input qui aurait la même classe alors tu pourrais utiliser $('.maClasse'), avec un id ça donnerait $("#monId"), etc...

N'oubliez pas que l'on peut ajouter un input type="reset" ou utiliser la méthode reset en JS.

Exemple, si le formulaire a un ID "myform" : document.getElementById("myform").reset();.

C'est vrai que j'ai tendance à oublier cette méthode car elle ne permet pas de cibler certains champs mais dans ce cas ça serait suffisant :)