показать / скрыть кнопку отправки

Question

МЕТОДИЧЕСКИЕ

показывать кнопку отправки, только если один или два необходимых ввода заполнены значением но если вы удалите одно из необходимых значений, отправка должна исчезнуть.

должно быть сделано с keyup, я думаю. есть идеи?

Answer 1

Функция, приведенная ниже, должна вам помочь:

$(function(){
    // Hide submit button if either field is empty
    $('form input').keyup(function(){
        if($('#input1').val() == "" || $('input2').val() == ""){
            $('#submit').hide();
        }
        else {
            $('#submit').show();
        }
    });
    // Don't submit form if either field is empty
    $('form').submit(function(){
    if($('#1').val() == "" || $('#2').val() == ""){
        return false;
    }
    });
});

Кстати, вам нужно будет использовать CSS (display:none), чтобы изначально скрыть кнопку отправки.

Answer 2

Я предлагаю использовать один обработчик событий в самой форме и проверить все необходимые поля. Чтобы сделать его немного более абстрактным, было бы неплохо, если бы вы могли пометить свои входные данные каким-либо атрибутом. Пример решения следующий:

    $('#formNode').keyup(function(e){
            var invalid = false;
            $(this).children().each(function(i,child){  
                if(($(child).attr("isReq") == "true") 
                    && child.value.length == 0
                ){
                    invalid = true;
                }   
            });
            $("#submitButton")[invalid ? "hide" : "show"]();
});   




    <form id="formNode">
            <input type="text" isReq="true"/>
        <input type="text" isReq="true"/>
        <input type="text" isReq="true"/>
        <input type="submit" value="Submit" style="display:none" id="submitButton"/>
    </form>

Как видите, каждый раз, когда вы хотите проверить узел, вы просто должны пометить его атрибутом isReq, и скрипт выполнит вашу работу за вас.

Answer 3

$('#inputid').keyup(function() {
    if ($(this).val().length > 0) {
       $('#submitbutton').show();
    } else {
       $('#submitbutton').hide();
    }
});

для нескольких:

$('#inputid1,#inputid2, etc...').keyup(function() {
   var hidden = false;
   $('#inputid1,#inputid2, etc...').each(function() {
      if ($(this).val().length == 0) {
          hidden = true;
      }
   })
   if (hidden) {
      $('#submitbutton').hide();
   } else {
      $('#submitbutton').show();
   }

});

Answer 4

Почему бы не взглянуть на onblur.

onblur Event

Событие onblur наступает, когда объект теряет фокус.

Answer 5

Без ссылки на базовый JavaScript:

<input type="text" id="input-1" onkeyup="submitChange();" />

<input type="text" id="input-2" onkeyup="submitChange();" />

<input type="submit" id="submit" style="display: none;" />

<script type="text/javascript">

inputOne = document.getElementById("input-1"); 
inputTwo = document.getElementById("input-2"); 
inputSubmit = document.getElementById("submit"); 

function submitChange()
{
     if(inputOne.value == "" || inputTwo.value == "")
     {
          inputSubmit.style.display = "none";
     }
     else
     {
          inputSubmit.style.display = "block";
     }
}

</script>