jQuery désactiver / activer le bouton d'envoi

J'ai ce 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, la soumission doit être désactivée (désactivé = "désactivé").
• Quand 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 doit être à nouveau 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?

Le problème est que l'événement change ne se déclenche que lorsque le focus est éloigné de l'entrée (par exemple, quelqu'un clique sur l'entrée ou en tabule). Essayez plutôt d'utiliser les touches:

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

$(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");
  }
}

Cette question a 2 ans mais c'est toujours une bonne question et c'était le premier résultat de Google ... mais toutes les réponses existantes recommandent de définir et de 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>le balisage est appelé attribut booléen par le W3C .

HTML contre 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

En relation:

Néanmoins, le concept le plus important à retenir à propos de 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 d'attribut vérifiée ne change pas avec l'état de la case à cocher, contrairement à la propriété vérifiée. Par conséquent, la façon compatible avec tous les navigateurs de 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é au lieu de la méthode .attr ().

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

Sommaire

Pour [...] modifier les propriétés 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 lors du changement de la question: il existe un événement appelé "entrée", mais la prise en charge du navigateur est limitée et ce n'est pas un événement jQuery, donc jQuery ne le fera pas fonctionner. L'événement change fonctionne de manière fiable, mais est déclenché lorsque l'élément perd le focus. Donc, on pourrait combiner les deux (certaines personnes écoutent également la saisie et le collage).

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);
    });
});

Pour supprimer l'utilisation d'un attribut désactivé,

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

et pour ajouter l'utilisation des attributs désactivés,

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

Prendre plaisir :)

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

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

eric, votre code ne semble pas fonctionner pour moi lorsque l'utilisateur entre du texte puis supprime tout le texte. j'ai créé une autre version si quelqu'un a rencontré le même problème. voilà les gens:

$('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');
    }
})

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 existe un attribut «désactivé» dans votre code HTML

Voici la solution pour le champ de saisie de fichier .

Pour désactiver un bouton de soumission pour le champ de fichier lorsqu'un fichier n'est pas choisi, puis activez-le 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 %>

vous pouvez également 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 l' exemple Live

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);
        }
    });
});

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 correctes soient ajoutées / supprimées une fois que vous avez supprimé / ajouté l'attribut désactivé.

$( ".selector" ).button( "refresh" );

Les réponses ci-dessus ne concernent pas également la vérification des événements de copier / coller basés sur le menu. Voici le code que j'utilise pour faire les deux. Notez que l'action se produit en fait avec un délai d'attente car les événements de coupure et passés se déclenchent avant le changement, le délai d'attente donne 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);
});

Vanilla JS Solution. Cela fonctionne pour un formulaire entier non seulement pour une entrée.

En question, balise JavaScript sélectionnée.

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 le formulaire html et à chaque pression sur une touche, vérifiez tous les champs de saisie. Si au moins un champ de saisie que nous avons est vide ou ne contient que des caractères d'espace, nous attribuons la vraie valeur à la variable désactivée et désactivons le bouton de soumission.

Si vous devez désactiver le bouton Soumettre jusqu'à ce que tous les champs de saisie requis soient remplis - 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 requis.

Nous pouvons simplement avoir if & else. Si votre entrée est vide, nous pouvons avoir

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

sinon nous pouvons changer le faux en vrai

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.

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 de soumettre.

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.

Veuillez consulter 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>

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

il suffit donc de désactiver le bouton après l'exécution de votre opération

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

Tous les types de solutions sont fournis. Je veux donc essayer une autre solution. Simplement, ce sera plus facile si vous ajoutez un idattribut 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)
});

J'espère que le code ci-dessous aidera quelqu'un .. !!! :)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/