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

Question

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;


    }
}

You are not using the return value of checkEmpty(). Either return it on the onclick or implement it in the copy function instead. — Lain
– Lain, Commented Apr 25, 2018 at 8:04

CertainPerformance · Accepted Answer · 2018-04-25 08:04:45Z

1

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

answered Apr 25, 2018 at 8:04

CertainPerformance

374k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related