Кнопка отключена, если оба поля ввода не имеют значения - PullRequest
Новая
       25

Кнопка отключена, если оба поля ввода не имеют значения

3 голосов
/ 09 марта 2011

У меня есть форма с двумя полями ввода и кнопкой отправки на моей странице. Мне бы хотелось, чтобы кнопка 'submit' была отключена отключена до тех пор, пока не будут значения в обоих полях ввода.Эта кнопка будет активна, если и только если в оба поля введены значения.

как реализовать это с помощью js и jQuery?

Вот моя страница: 

<html>
<body>
    <form method=post>
        <input type=text id='first_name'>
        <input type=text id='second_name'>
        <input type=submit value=Submit>
    </form>
</body>
</html>

Я бы хотел иметь решение js и jQuery

Ответы [ 4 ]

6 голосов
/ 09 марта 2011

Вот решение с использованием jQuery:

HTML (обратите внимание, что я добавил идентификатор для кнопки отправки): 

<form method=post>
    <input type="text" id="first_name">
    <input type="text" id="second_name">
    <input type="submit" value="Submit" id="submit" disabled>
</form>

JavaScript / JQuery: 

$(':text').keyup(function() {
    if($('#first_name').val() != "" && $('#second_name').val() != "") {
       $('#submit').removeAttr('disabled');
    } else {
       $('#submit').attr('disabled', true);   
    }
});

Рабочий пример: http://jsfiddle.net/nc6NW/1/

3 голосов
/ 09 марта 2011

JQuery: jQuery отключить / включить кнопку отправки

Чистый JS: 

<html>
<body>
    <form method="POST" 
     onsubmit="return this.first_name.value!='' && this.second_name.value!=''">
        <input type="text" id="first_name" name="first_name"
        onkeyup="this.form.subbut.disabled = this.value=='' || this.form.second_name.value==''">
        <input type="text" id="second_name" name"second_name"
        onkeyup="this.form.subbut.disabled = this.value=='' || this.form.first_name.value==''">

        <input type="submit" value="Submit" disabled="disabled">
    </form>
</body>
</html>
1 голос
/ 09 марта 2011 
$(function(){
  $("#first_name, #second_name").bind("change keyup",
  function(){
     if($("#first_name").val() != "" && $("#second_name").val() != "")
        $(this).closest("form").find(":submit").removeAttr("disabled");
     else
        $(this).closest("form").find(":submit").attr("disabled","disabled"); 
  });
});
1 голос
/ 09 марта 2011

Не забудьте свойство name для полей формы! 

<html>
<head>
<script type="text/javascript" src="path.to/jquery.js" />
<script type="text/javascript">
$(function() { // on document load

   var fn = function() {
      var disable = true;
      $('#myForm input[type:text]').each(function() { // try to find a non-empty control
          if ($(this).val() != '') {
             disable = false;
          }
      });

      $('#myForm input[type:submit]').attr('disabled', disable);
   }

   $('#myForm input[type:text]').change(fn); // when an input is typed in
   fn(); // set initial state
});
</script>
<body>
    <form id="myForm" method="POST">
        <input type="text" id="first_name">
        <input type="text" id="second_name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>
...