0
votes

Le bouton Soumettre ne publie pas lorsque ses attributs ont été modifiés

J'utilise un formulaire et un bouton d'envoi pour appeler une demande de publication au serveur en html

Dans le bouton d'envoi, j'utilise l'événement onclick pour modifier quelque chose dans l'interface utilisateur avant de poster la demande. Tout va bien quand je ne change rien au bouton de soumission, il publie la demande avec succès. Mais si je change quelque chose dans le bouton d'envoi tel que valeur, désactiver l'attribut, ... alors il ne publie pas de demande

Voici mon code

function onClick(e) {
    alert("Clicked")
    return true
}

code js qui ne publie pas de demande

function onClick(e) {
    const submit = e.target  // or = this
    submit.value = "Clicked"
    submit.disabled = true
    return true
}

code js dont la demande a été publiée avec succès

<form action="url"method="post">
    <input type="submit" onclick="return onClick(event)">
</form>

Quelqu'un pourrait-il me dire pourquoi il n'est pas publié avec succès et comment publier avec le changement d'interface utilisateur comme ci-dessus?

javascript onclick form-submit

0 commentaires

3 Réponses :

1
votes

Le fait qu'un formulaire envoie une requête POST ou GET est basé sur son attribut method . Essayez de remplacer votre formulaire par

<form action="url" method="post">
    <input type="submit" onclick="return onClick(event)">
</form>

1 commentaires

désolé, ma confusion. Mais même si je l'ai changé en méthode, il ne peut toujours pas publier de demande

1
votes

Vous devez utiliser la méthode submit pour obtenir le résultat.

-> Assignez id au bouton et à l'élément de formulaire, puis obtenez l'élément comme, p >

<form id="form" action="url" method="post">
    <input type="submit" id="btn">
</form>

Il est toujours recommandé d'utiliser addEventListener () en javascript au lieu de la créer dans un modèle HTML.

const btn = document.getElementById('btn');
const form = document.getElementById('form');

function onSubmit(){
    btn.value = "Clicked";
    btn.disabled = true;
    return true
}

form.addEventListener('submit', onSubmit)

-> Vous pouvez maintenant modifier la valeur d'un attribut dans la méthode d'envoi comme,

function onSubmit(){
    btn.value = "Clicked";
    btn.disabled = true;
    return true
}

Travail extrait comme suit,

form.addEventListener('submit', onSubmit)

const btn = document.getElementById('btn');
const form = document.getElementById('form');

0 commentaires

0
votes

une autre solution de ma part, je l'ai trouvée moi-même et merci beaucoup à @Maniraj Murugan pour votre aide ci-dessus: utilisez plutôt input type = "button", et dans l'événement onclick, utilisez form.submit () pour soumettre manuellement

function onSubmit(e){
    const btn = e.target
    btn.value = "Clicked"
    btn.disabled = true
    const form = document.getElementById('form')
    form.submit()
}

et dans l'événement onClick

<form action="url"method="post">
    <input type="button" onclick="return onClick(event)">
</form>

0 commentaires