Désactiver le bouton HTML

Question

J'ai un formulaire de soumission pour une URL et je veux qu'elle ait un comportement spécifique que je ne suis pas en mesure d'atteindre jusqu'à présent. Au départ, je veux que le bouton soit activé. Après que quelqu'un entre une URL et frappe le bouton "soumettre", je veux appeler ma fonction checkURL(). Si la fonction renvoie true, je veux désactiver le bouton et ouvrir le fichier remote_file.php. Si elle renvoie false, je veux que le bouton soit activé et les fasse essayer une autre URL.

<form name=URLSubmitForm 
    action="remote_file.php" 
    method="post"> 

    <input type="hidden" name="MAX_FILE_SIZE" value="524288000"> 
    <input type="text" name="name" size="50"> 
    <input type="submit" 
     onchange="this.disabled=false" 
     onclick="this.disabled=true; checkURL();" 
     value="submit"> 
</form> 

Modifier: Il semble que je ne faisais que mettre l'onchange au mauvais endroit. J'ai fini par le faire pour corriger le bouton réactivation

<input type="text" onchange="submit.disabled=false" name="name" size="50">

Merci!

Answer 1

Je vous propose de joindre le code de gestion d'événement à l'événement onsubmit du formulaire, et non au (x) événement (s) de bouton. Ce que vous essayez de contrôler, c'est si le formulaire est posté. Le bouton est désactivé pendant que votre logique de validation s'exécute est un objectif secondaire.

Essayez ceci:

<script type="text/javascript"> 
function checkURL(){ 
    var submitButton = document.getElementById('submitButton'); 
    submitButton.disabled=true; 

    /* implement your validation logic here 
    if(url is invalid){ 
     submitButton.disabled=false; 
     return false; 
    } 
    */ 

    // everything is valid, allow form to submit 
    return true; 
} 
</script> 

<form name="URLSubmitForm" action="remote_file.php" onsubmit="return checkURL();" method="post"> 
     <input type="hidden" name="MAX_FILE_SIZE" value="524288000"> 
     <input type="text" name="name" size="50"> 
     <input type="submit" name="submitButton" id="submitButton" value="submit"> 
</form> 

Answer 2

<input type="submit" 
    onclick="if (checkURL()) { this.disabled='disabled'; return true; } else { return false; }" 
    value="submit"> 

Answer 3

Que diriez-vous à l'événement onsubmit la forme:

<form onsubmit="(function(){ 
    if(checkURL()){ 
     this.elements['submit'].disabled = 'disabled'; 
    } 
    else{ 
     return false; 
    } 
})()"> 

Puisque vous n'avez pas donné un code ajax, le formulaire sera toujours soumis normalement et quand la page est rechargée, le bouton sera à nouveau activé.

Answer 4

onclick = "checkURL (this);"

function checkURL(arg){ 
    this.disabled=true; 
    if(<something>) this.disabled=false; 
}