jquery button

by Ying Chor Ding

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="gift-card-content">
<div class="gift-card">Have a gift card?</div>
<div class="gift-card-info">
<form id="form1">
<input type="text" placeholder="code" />
<button type="button" id="button_id" class="click-apply" disabled="disabled">Apply</button>
</form>
</div>
</div>

<div id='frame'>
        <div class='search'><h1>jQuery Enable and Disable button</h1>
            <form method='post'>
                <input type='text' name='searchQuery' id='searchInput' />
                <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
            </form>
        </div>
    </div>

CSS

.gift-card-info {
  display: none;
}
.click-apply {
  background: #ddd;
}
.active {background: red;}

JavaScript

$(document).ready(function(){
	$('.gift-card').click(function(){
  	$('.gift-card-info').show();
    $('.gift-card').hide();
  });
  var $input = $('#form1 input:text'),
        $register = $('#button_id');
    
    $input.each(function () {
        if (!$(this).val()) {
            $register.attr('disabled', true);
            return false;
        }
    });
    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
                
            }
        });
    
        trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
    
    }); 
	
 $('#searchInput').keyup(function () {
                    if ($(this).val() == '') {
                        //Check to see if there is any text entered
                        // If there is no text within the input ten disable the button
                        $('.enableOnInput').prop('disabled', true).removeClass('active');
                        
                    } else {
                        //If there is text in the input, then enable the button
                        $('.enableOnInput').prop('disabled', false).addClass('active');
                    }
                });

});