show / hide submit button

HOWTO?

show submit button onl开发者_如何学Cy if one or two needed inputs are filled with a value but if you remove on of the needed values, the submit has to disappear.

should be done with keyup i think. any idea?

The function below should help you out:

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

By the way, you'll need to use CSS (display:none) to hide your submit button initially.

I propose to use one event handler at the form itself and to check all required fields. To keep it a little bit more abstractive, it would be nice if you can tag your inputs with some attribute. The example solution follows:

    $('#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>

As you can see, every time you want to check node, you just should mark it with attribute isReq and the script will do its work for you.

Without reference in basic 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>

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

for multiple:

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

});

Why not have a look at the onblur.

onblur Event

The onblur event occurs when an object loses focus.