Javascript检查文本框是否已填充或复选框已选中并显示div

Question

I have a button like this:

input type="submit" name="continue" id="continue" value="CONTINUE" class="submitContact" />

Then for this button I am setting up a js that looks like this:

$('#continue').click(function() {
    $('#storePickUp').change(function() { //catch checkbox
        var $check = $(this),
        $div = $check.parent();
    if($check.prop('checked') || $('#shippingZipCode').val().length) 
    {
    $('.checkoutForm').fadeIn(1000);
    }
    else {
document.getElementById(shippingZipCode).style.backgroundColor = '#FFFEAD'; 
    }
  });

});

What I try to do is check whether a textbox .shippingZipCode is filled out or a checkbox is checked #storePickUp , and if affirmative I display a div that has class .checkoutForm .

However, I cannot get it to work. Does this js look ok?

Thanks!

Answer 1

Your click event is coming from a submit typed input. So first things first, you must return false to prevent it from posting and redirecting.

Secondly, your click event is only assigning a change event. The change event will issue its assigned callback when a change is made to the selected input, which may not be for some time, definitely shorted than the few milliseconds before the page posts.

You are going to want to check for your values, then decide which action to take, and then return false in order to stop the post from happening.

$('#continue').click(function() {
  var $check = $('#storePickUp');//use reference to check for value immediately
  var $div = $check.parent();
  if($check.prop('checked') || $('#shippingZipCode').val().length) 
  {
   $('.checkoutForm').fadeIn(1000);
  }
  else {
   document.getElementById('shippingZipCode').style.backgroundColor = '#FFFEAD'; 
  }
  return false;//prevent form from posting
});

Answer 2

No need for the change function for the checkbox. Just check its state.

$('#continue').click(function() {
    var $check = $('#storePickUp'),
    $div = $check.parent();

    if($check.prop('checked') || $('#shippingZipCode').val().length) {
        $('.checkoutForm').fadeIn(1000);
    } else {
        document.getElementById('shippingZipCode').style.backgroundColor = '#FFFEAD';
    }
});