web-dev-qa-db-fra.com

jQuery désactiver / activer le bouton d'envoi

J'ai ce code HTML:

<input type="text" name="textField" />
<input type="submit" value="send" />

Comment puis-je faire quelque chose comme ça:

  • Lorsque le champ de texte est vide, l'envoi doit être désactivé (disabled = "disabled").
  • Lorsque quelque chose est tapé dans le champ de texte pour supprimer l'attribut désactivé.
  • Si le champ de texte redevient vide (le texte est supprimé), le bouton d'envoi devrait de nouveau être désactivé.

J'ai essayé quelque chose comme ça:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

… Mais ça ne marche pas. Des idées?

javascriptjqueryhtmlforms
762
kmunky

Le problème est que l'événement de modification ne se déclenche que lorsque le focus est éloigné de l'entrée (par exemple, quelqu'un clique sur l'entrée ou la désélectionne). Essayez plutôt d’utiliser keyup:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });
1123
Eric Palakovich Carr
$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}
124
cletus

Cette question a 2 ans, mais reste une bonne question et il s’agissait du premier résultat de Google ... mais toutes les réponses existantes recommandent de définir et supprimer l'attribut HTML (removeAttr ("disabled")) "disabled", ce qui n'est pas la bonne approche. Il y a beaucoup de confusion entre attribut et propriété.

HTML

Le "désactivé" dans <input type="button" disabled> dans le balisage est appelé un attribut booléen par le W3C .

HTML vs DOM

Citation:

Une propriété est dans le DOM; un attribut est dans le HTML qui est analysé dans le DOM.

https://stackoverflow.com/a/7572855/664132

JQuery

Apparenté, relié, connexe:

Néanmoins, le concept le plus important à retenir concernant l'attribut vérifié est qu'il ne correspond pas à la propriété vérifiée. L'attribut correspond en fait à la propriété defaultChecked et ne doit être utilisé que pour définir la valeur initiale de la case à cocher. La valeur de l'attribut coché ne change pas avec l'état de la case à cocher, contrairement à la propriété cochée. Par conséquent, la méthode compatible avec plusieurs navigateurs pour déterminer si une case à cocher est cochée consiste à utiliser la propriété ...

Pertinent:

Les propriétés affectent généralement l'état dynamique d'un élément DOM sans modifier l'attribut HTML sérialisé. Les exemples incluent la propriété value des éléments d'entrée, la propriété désactivée des entrées et des boutons ou la propriété cochée d'une case à cocher. La méthode .prop () doit être utilisée pour définir désactivé et vérifié à la place de la méthode .attr (). 

$( "input" ).prop( "disabled", false );

Sommaire

Pour modifier les [...] propriétés du DOM, telles que l'état [...] désactivé des éléments de formulaire, utilisez la méthode . Prop () .

( http://api.jquery.com/attr/ )

En ce qui concerne la partie désactivation de la question de la modification: il existe un événement appelé "entrée", mais la prise en charge du navigateur est limitée et il ne s'agit pas d'un événement jQuery. Par conséquent, jQuery ne le fera pas fonctionner. L'événement de modification fonctionne de manière fiable, mais est déclenché lorsque l'élément perd le focus. Donc, on peut combiner les deux (certaines personnes écoutent aussi keyup et paste).

Voici un morceau de code non testé pour montrer ce que je veux dire:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});
76
basic6

Pour supprimer l'attribut désactivé, utilisez:

 $("#elementID").removeAttr('disabled');

et d'ajouter l'utilisation d'attribut désactivé,

$("#elementID").prop("disabled", true);

Prendre plaisir :)

37
Umesh Patil

ou pour nous qui n'aiment pas utiliser jQ pour chaque petite chose:

document.getElementById("submitButtonId").disabled = true;
36
Paul

eric, votre code ne semblait pas fonctionner pour moi lorsque l'utilisateur saisit du texte, puis le supprime. J'ai créé une autre version si quelqu'un rencontrait le même problème. vous allez les gars:

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})
25
Archie1986

Voici la solution pour champ de saisie.

Pour désactiver un bouton d'envoi pour le champ de fichier lorsqu'un fichier n'est pas sélectionné, activez cette option après que l'utilisateur a choisi un fichier à télécharger:

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

Html:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>
12
cider

Cela fonctionnera comme ceci:

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

Assurez-vous qu'il y a un attribut 'disabled' dans votre code HTML

12
H. Yang

vous pouvez aussi utiliser quelque chose comme ceci:

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

voici Exemple en direct

11
Sonu Sindhu

Pour la connexion au formulaire:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

Javascript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});
9
alditis

Si le bouton est lui-même un bouton de style jQuery (avec .button ()), vous devrez actualiser l'état du bouton afin que les classes appropriées soient ajoutées/supprimées une fois que vous avez supprimé/ajouté l'attribut désactivé.

$( ".selector" ).button( "refresh" );
8
Tom Chamberlain

Les réponses ci-dessus ne traitent pas également de la vérification des événements de couper/coller basés sur les menus. Ci-dessous, le code que j'utilise pour faire les deux. Notez que l'action se produit réellement avec un délai d'expiration, car les événements coupés et passés se déclenchent réellement avant le changement. Le délai d'expiration laisse donc un peu de temps pour que cela se produise.

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});
7
zippy

Nous pouvons simplement avoir si & else .si nous supposons que votre entrée est vide nous pouvons avoir

  if($(#name).val() != '') {
                $('input[type="submit"]').attr('disabled' , false);
            }

sinon nous pouvons changer faux en vrai

6
Ajai

Vanilla JS Solution. Cela fonctionne pour tout un formulaire et pas seulement une entrée.

En question sélectionné balise JavaScript.

Formulaire HTML:

var form = document.querySelector('form')
    var inputs = form.querySelectorAll('input')
    var required_inputs = form.querySelectorAll('input[required]')
    var register = document.querySelector('input[type="submit"]')
    form.addEventListener('keyup', function(e) {
        var disabled = false
        inputs.forEach(function(input, index) {
            if (input.value === '' || !input.value.replace(/\s/g, '').length) {
                disabled = true
            }
        })
        if (disabled) {
            register.setAttribute('disabled', 'disabled')
        } else {
            register.removeAttribute('disabled')
        }
    })
<form action="/signup">
        <div>
            <label for="username">User Name</label>
            <input type="text" name="username" required/>
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div>
            <label for="r_password">Retype Password</label>
            <input type="password" name="r_password" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" name="email" />
        </div>
        <input type="submit" value="Signup" disabled="disabled" />
    </form>

Quelques explications:

Dans ce code, nous ajoutons un événement keyup sur un formulaire HTML et, à chaque pression sur une touche, vérifie tous les champs de saisie. Si au moins un des champs que nous avons est vide ou ne contient que des espaces, nous affectons la vraie valeur à la variable désactivée et désactivons le bouton d'envoi.

Si vous devez désactiver le bouton d'envoi jusqu'à ce que tous les champs de saisie obligatoires soient renseignés - remplacez:

inputs.forEach(function(input, index) {

avec:

required_inputs.forEach(function(input, index) {

où required_inputs est déjà un tableau déclaré contenant uniquement les champs d'entrée obligatoires.

4
Alouani Younes

S'il vous plaît voir le code ci-dessous pour activer ou désactiver le bouton Soumettre

Si les champs Nom et Ville ont une valeur, seul le bouton Soumettre sera activé.

<script>
  $(document).ready(function() {
    $(':input[type="submit"]').prop('disabled', true);

    $('#Name').keyup(function() {
      ToggleButton();
    });
    $('#City').keyup(function() {
      ToggleButton();
    });

  });

function ToggleButton() {
  if (($('#Name').val() != '') && ($('#City').val() != '')) {
    $(':input[type="submit"]').prop('disabled', false);
    return true;
  } else {
    $(':input[type="submit"]').prop('disabled', true);
    return false;
  }
} </script>
<form method="post">

  <div class="row">
    <div class="col-md-4">
      <h2>Getting started</h2>
      <fieldset>
        <label class="control-label text-danger">Name</label>
        <input type="text" id="Name" name="Name" class="form-control" />
        <label class="control-label">Address</label>
        <input type="text" id="Address" name="Address" class="form-control" />
        <label class="control-label text-danger">City</label>
        <input type="text" id="City" name="City" class="form-control" />
        <label class="control-label">Pin</label>
        <input type="text" id="Pin" name="Pin" class="form-control" />
        <input type="submit" value="send" class="btn btn-success" />
      </fieldset>
    </div>
  </div>
</form>
2
Nitin Khachane

J'ai dû travailler un peu pour l'adapter à mon cas d'utilisation.

J'ai un formulaire où tous les champs doivent avoir une valeur avant d'être soumis.

Voici ce que j'ai fait:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

Merci à tous pour leurs réponses ici.

2
ringe

Désactiver: $('input[type="submit"]').prop('disabled', true);

Activer: $('input[type="submit"]').removeAttr('disabled');

Le code d'activation ci-dessus est plus précis que:

$('input[type="submit"]').removeAttr('disabled');

Vous pouvez utiliser les deux méthodes.

2
Dharmendra Patel

Tous les types de solutions sont fournis. Je veux donc essayer une solution différente. Simplement, cela sera plus facile si vous ajoutez un attribut id dans vos champs de saisie.

<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>

Maintenant, voici votre jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});
1
gdmanandamohon

regardez cet extrait de mon projet

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

donc juste désactivé le bouton après votre opération exécutée

$(this).attr('disabled', 'disabled');

1
Basheer AL-MOMANI