отображение сообщения после отправки формы

Question

У меня есть форма, когда форма успешно отправлена. Мне нужно отобразить изображение. Это приведенный ниже код формы.

<form id="" class="form-container" name="popout" onsubmit="return validateform()">
        <h1 class="sticky-form">Know about the admissions</h1>
        <button type="button" class="btn cancel" onclick="closeForm()">X</button>

        <input type="text" placeholder=" Name*" id="side_name" name="side_name" required><br />

        <input type="email" placeholder="Email*" id="side_email" name="side_email" required>

        <input type="tel" placeholder="Phone*" id="side_phone" name="side_phone"><br />

        <select class="branches" id="side_branches" name="side_branches">
            <option selected hidden value="">Select a branch</option>
            <option value="RCIS,Kalyan Nagar ICSE">RCIS,Kalyan Nagar ICSE</option>
            <option value="RCIS,Kalyan Nagar CBSE">RCIS,Kalyan Nagar CBSE</option>
            <option value="RCIS,Mysuru">RCIS,Mysuru</option>
            <option value="RCIS,Sarjapur">RCIS,Sarjapur</option>
            <option value="RCIS,Begur">RCIS,Begur</option>
            <option value="RCIS,MS Palya<">RCIS,MS Palya</option>
            <option value="RCIS,Chamrajpet">RCIS,Chamrajpet</option>
        </select><br />
        <select id="side_grade" class="branches" name="side_grade">
            <option selected hidden value="">* Select a Grade</option>
            <option value="Play school">Play school</option>
            <option value="Nursery">Nursery</option>
            <option value="Jr.KG">Jr.KG</option>
            <option value="Sr.KG">Sr.KG</option>
            <option value="1">&#8544;</option>
            <option value="2">&#8545;</option>
            <option value="3">&#8546;</option>
            <option value="4">&#8547;</option>
            <option value="5">&#8548;</option>
            <option value="6">&#8549;</option>
            <option value="7">&#8550;</option>
            <option value="8">&#8551;</option>
            <option value="9">&#8552;</option>
            <option value="10">&#8553;</option>
            <option value="11">&#8554;</option>
            <option value="12">&#8555;</option>
        </select>

        <input type="date" placeholder="Date of Birth*" id="side_dob" name="side_dob"><br />

        <input type="text" placeholder="Residing area*" id="side_address" name="side_address" required><br />

        <textarea class="text-input" type="text" id="side_message" name="side_message" placeholder="Enter Message*"
            rows="2" cols="20" required></textarea>

        <button type="submit" class="btn" name="side-enquiry" id="side-enquiry">Enquire Now</button>
        <span id="error_message" class="text-danger">All Fields are required</span>
        <span id="success_message" class="text-success">Successfully submitted</span>
    </form>

Выше приведен код формы, когда я загружаю страницу формы и сообщение по умолчанию. У меня есть jquery код, где форма отображает сообщение и вставляет значения в database

 $(document).ready(function() {
    $('#side-enquiry').click(function() {
        var side_name = $('#side_name').val();
        var side_email = $('#side_email').val();
        var side_phone = $('#side_phone').val();
        var side_branches = $('#side_branches').val();
        var side_grade = $('#side_grade').val();
        var side_dob = $('#side_dob').val();
        var side_address = $('#side_address').val();
        var side_message = $('#side_message').val();
        if (side_name == '' || side_email == '' || side_phone == '' || side_branches == '' || side_grade == '' || side_dob == '' || side_address == '' || side_message == '') {
            $('#error_message').html("All Fields are required");
        } else {
            $('#error_message').html('');
            $.ajax({
                url: "sideform.php",
                method: "POST",
                data: {
                    side_name: side_name,
                    side_email: side_email,
                    side_phone: side_phone,
                    side_branches: side_branches,
                    side_grade: side_grade,
                    side_dob: side_dob,
                    side_address: side_address,
                    side_message: side_message
                },
                success: function(data) {
                    $("form").trigger("reset");
                    $('#success_message').fadeIn().html(data);
                    setTimeout(function() {
                        $('#success_message').fadeOut("Slow");
                    }, 2000);
                }
            });
        }
    });
});

Это изображение, когда я загружаю сообщения отображаются по умолчанию

Я хочу отобразить только при нажатии кнопки отправки

Могу ли я узнать, где это неправильно

Answer 1

Вы тоже можете сделать это следующим образом: JQuery:

$('#side-enquiry').click(function() {
        //set to init
        $('#error_message').html('');
        $('#success_message').html('');
        var side_name = $('#side_name').val();
        var side_email = $('#side_email').val();
        var side_phone = $('#side_phone').val();
        var side_branches = $('#side_branches').val();
        var side_grade = $('#side_grade').val();
        var side_dob = $('#side_dob').val();
        var side_address = $('#side_address').val();
        var side_message = $('#side_message').val();
        if (side_name == '' || side_email == '' || side_phone == '' || side_branches == '' || side_grade == '' || side_dob == '' || side_address == '' || side_message == '') {
            $('#error_message').html("All Fields are required");
        } else {
            $.ajax({
                url: "sideform.php",
                method: "POST",
                data: {
                    side_name: side_name,
                    side_email: side_email,
                    side_phone: side_phone,
                    side_branches: side_branches,
                    side_grade: side_grade,
                    side_dob: side_dob,
                    side_address: side_address,
                    side_message: side_message
                },
                success: function(data) {
                    $("form").trigger("reset");
                    $('#success_message').fadeIn().html(data);
                    setTimeout(function() {
                        $('#success_message').fadeOut("Slow");
                    }, 2000);
                },
                error: function(xhr, status, error){
                    var errorMessage = xhr.status + ': ' + xhr.statusText
                    $('#error_message').html(errorMessage);
                }
            });
        }
        return false;
    });

Надеюсь, это поможет.

Answer 2

Скрыть ваши #error_message и #success_message с помощью style="display:none;".

Показывать их можно только на success или error с $("#success_message").css("display","block");