CODEWITHSUNDEEP
javascriptjqueryhtml
MariaL
MariaL

Reputation: 1242

hide div after form has been submitted

I'm trying to hide a div if a span element contains a specific word. The issue I'm having is that the span only appears after a form has been submitted. I've tried to run my hide function on click of the submit button but this doesn't work as the span is only shown after the button has been clicked and the form submitted. I've also tried running it on submit() of the form but no luck either (posted the code that I've tried below).

HTML

    <div class=“deliveryUpsellText”>
    <p>blabla</p>
    </div>


    <ul>
      <li class=“error-msg”>
       <ul>
        <li>
         <span> Coupon Code “blabla” is not valid
         </span>
        </li>
       </ul>
      </li>
    </ul>


<form id="discount-coupon-form" action="http://dev.blabla.co.uk/cart/couponPost/" method="post">
.....

<button type="button" id="cartCoupon" title="Apply Coupon" class="button applycouponhide" onclick="discountForm.submit(false) ; " value="Apply Coupon"><span style="background:none;"><span style="background:none;">Apply</span></span></button>

</form>

jQuery

 $j('#cartCoupon').click(function(){

        if ($j(".error-msg span:contains('blabla')").length) {
            $j('.deliveryUpsellText').css({
                "display":"none"
            });
          }
        });

I've also tried 

$j('#discount-coupon-form').submit(function(){
if ($j(".error-msg span:contains('blabla')").length) {
    $j('.deliveryUpsellText').css({
        "display":"none"
    });
  }
});

Any ideas how I could do this?

Upvotes: 1

Views: 706

Answers (1)

Mojtaba
Mojtaba

Reputation: 5002

You are using this character as quotation: ”

You should use one of these: ' or "

Also, you have this:

onclick="discountForm.submit(false) ; "

which if the object discountForm is not defined, you get error before parsing the javascript part.

$(document).ready(function(){
$('#cartCoupon').on('click',function(){
if($('.error-msg').find("span:contains('blabla')").length > 0) {
    $('.deliveryUpsellText').hide();
  }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='deliveryUpsellText'>
    <p>blabla</p>
    </div>


    <ul>
      <li class="error-msg">
       <ul>
        <li>
         <span> Coupon Code “blabla” is not valid
         </span>
        </li>
       </ul>
      </li>
    </ul>


<form id="discount-coupon-form" action="http://dev.blabla.co.uk/cart/couponPost/" method="post">
.....

<button type="button" id='cartCoupon' title="Apply Coupon" class="button applycouponhide" value="Apply Coupon"><span style="background:none;"><span style="background:none;">Apply</span></span></button>

</form>

Upvotes: 2

Related Questions