Adding class if div is empty

JavaScript
1

im developing php form for email with ajax so that page doesnt have to refersh.

<form class="get-form" method="post" action="get-quote.php">
    <div class="text-center form-fill">
       <h4 class="output_message" id="message"></h4>
    </div>
   //form-field
</form>

After form have been successfully submitted message will be displayed in “H4.output_message”. with following ajax code.

$(document).ready(function() {
    $('.get-form').on('submit',function(){
         
        // Add text 'loading...' right after clicking on the submit button. 
        $('.output_message').text('Loading...'); 
         
        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: form.attr('method'),
            data: form.serialize(),
            success: function(result){
                $("form")[0].reset();
                if (result == 'success'){
                    $('.output_message').text('Message Sent!');  
                } else {
                    $('.output_message').text('Error Sending email!');
                }
            }
        });
          return false;   
    });
});

Everything works fine but i want hide “div.form-fill” when h4.out_message is empty as i have done some css styling. i want to display “div.form-fill” only when h4.out_message have some text.
Works fine with JavaScript but couldn’t figure out with ajax

2

In which case h4.out_message will be empty? Does that mean that the success callback of ajax has not been called?

3

whole mail function and ajax callback in called in action=“get-quote.php”.

h4.out_message will be empty when page loads… ajax will generate some text on form submit

so i want div.form-fill to hidden (display:none) when empty when ajax update innerHTML after submission of form i want to remove display none so that div.form-fill is visible with css style

4

Could you use the CSS :empty pseudo-class?

2 Likes
5

Yes I was thinking the same thing combined with the :has selector.

.form-fill {
  border: 1px solid red;
}
h4 {
  background: cyan;
}
.form-fill:has(.output_message:empty) {
  display: none;
}

e.g.

Modern browsers only and the h4 must be empty of whitespace.

1 Like
6

thank you for your time but this doesnt work with ajax, tried on browser: chorme, firefox, edge( browser upto date)

7

only :empty pseudo class without whitespace works like charm, thankyou…

8

Ajax will make no difference to css. :slight_smile:

:has isn’t supported in Firefox yet though unfortunately but should be added soon. :frowning:

The code works fine in Chrome as shown above but the h4 must contain no white space as mentioned already.

The :empty selector has better support but can only target the actual element and not the parent.

1 Like
9

Why is it necessary to put the <h4> output message element inside a <div> element? Is it because the <div> has other content in real life?

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.