CODEWITHSUNDEEP
jquerybuttonsubmit
Henry
Henry

Reputation: 43

show / hide submit button

HOWTO?

show submit button only 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?

Upvotes: 4

Views: 27966

Answers (5)

BenTheDesigner
BenTheDesigner

Reputation: 1984

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.

Upvotes: 4

nemisj
nemisj

Reputation: 11980

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.

Upvotes: 2

Adriaan Stander
Adriaan Stander

Reputation: 166396

Why not have a look at the onblur.

onblur Event

The onblur event occurs when an object loses focus.

Upvotes: 0

Per H
Per H

Reputation: 1542

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

});

Upvotes: 0

Thizzer
Thizzer

Reputation: 16663

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>

Upvotes: 0

Related Questions