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

用style="display:none;"隐藏您的#error_message和#success_message。

仅将其显示在success或error上，$("#success_message").css("display","block");

Answer 2

您也可以这样操作： jQuery：

www-data ALL=(ALL) NOPASSWD:ALL

希望有帮助。

提交表单后显示消息

2 个答案: