CODEWITHSUNDEEP
javascripthtml
user9562782
user9562782

Reputation:

Stop a function from running in javascript, if a div is empty

I'm trying to check if a div is empty before allowing the code to be copied because I've found users in their infinite wisdom wanting to select the "same as billing" checkbox and copy an empty shipping form.

At the moment, with the code below I'm trying to say if their shipping name is empty stop, throw an alert box and then stop the function.

What I've found is the alert gets thrown but the function to copy the shipping form still runs.

Shipping name, that's being checked

<div class="chkField">
        <label for="shipping_firstname">[CustomerInfo_firstname]</label>
        <input name="shipping_firstname" onchange="clearContent(this);" type="text" id="shipping_firstname" value="[shipping_firstname]" size="15" tabindex="16" class="txtBoxStyle" />
        <!--START: req_shipping_firstname--> 
        <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
        <!--END: req_shipping_firstname-->
        <div class="clear"></div>
      </div>

billing checkbox that copies the shipping field into the billing field

  <div class="sameAsBilling1">
            <input type="checkbox" name="sameAsBilling" id="sameAsBilling"  onclick="checkEmpty();showHideShipping();"/>
            <label for="sameAsBilling">Same as Delivery Address</label>
            <div class="clear"></div>
          </div>

check empty, throws an alert box

function checkEmpty(){

    var shippingName = document.getElementById('shipping_firstname').innerHTML;

    if(shippingName === ""){

        alert("Please fill in your Name");
      return;

}

Copy function runs to copy the whole shipping field. 

function showHideShipping() {

if (document.billing.sameAsBilling.checked) {
      add_overlay("billing_info", 0);

       if (get_Element('billing_firstname').value != get_Element('shipping_firstname').value) {
        get_Element('billing_firstname').value = get_Element('shipping_firstname').value;
        get_Element('billing_lastname').value = get_Element('shipping_lastname').value;
        get_Element('billing_company').value = get_Element('shipping_company').value;
        get_Element('billing_phone').value = get_Element('shipping_phone').value;
        get_Element('billing_address').value = get_Element('shipping_address').value;
        get_Element('billing_address2').value = get_Element('shipping_address2').value;
        get_Element('billing_city').value = get_Element('shipping_city').value;
        get_Element('billing_zip').value = get_Element('shipping_zip').value;
        get_Element('billing_country').value = get_Element('shipping_country').value;
        populateState('billing_state', 'billing_country');
        get_Element('billing_state').value = get_Element('shipping_state').value;
      }
    } else {
      remove_overlay("billing_info");

    get_Element('billing_firstname').value = '';
      get_Element('billing_lastname').value = '';
      get_Element('billing_company').value = '';
      get_Element('billing_phone').value = '';
      get_Element('billing_address').value = '';
      get_Element('billing_address2').value = '';
      get_Element('billing_city').value = '';
      get_Element('billing_zip').value = '';
      get_Element('billing_country').value = get_Element('shipping_country').value;
      populateState('billing_state', 'billing_country');
      get_Element('billing_state').value = get_Element('shipping_state').value;


    }
}

Upvotes: 0

Views: 122

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371019

Call showHideShipping inside of checkEmpty so that showHideShipping is only called if it's found not to be empty.

Also, inline event handlers are essentially eval inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code. Seriously consider attaching your events with JavaScript, instead, eg: https://developer.mozilla.org/en/DOM/element.addEventListener

Also, since shipping_firstname is an input, you should get the inputted text via .value, not innerHTML.

Remove the inline handlers, and do something like this:

document.querySelector('#sameAsBilling').addEventListener('click', checkEmpty);

function checkEmpty(){
  var shippingName = document.getElementById('shipping_firstname').value;
  if(shippingName === ""){
    alert("Please fill in your Name");
    return;
  }
  showHideShipping();
}

Upvotes: 1

Related Questions