.submit jquery 语句后输入字段为空

Question

我正在尝试使用 ('#form').submit 调用中的 ajax 调用发送数据，但是当我不希望它们成为空时，表单的所有输入都是空的。我认为这可能与 $(document).ready 语句位于不正确的位置以使事情正常工作有关，但我无法让它工作。

<script>
(function($){   
    $(document).ready( function() {
        $("#success").hide();
        $("#inval_email").hide();
        $("#text_selection").on("change", function() {
            var id = $("#text_selection option:selected").attr("value");
            $("#inv_text").html($("#"+id).html());
        });
        $("#invitation_form").submit(function(e){
            var email = $('#email').val();
            var first_name = $('#first_name').val();
            var last_name = $('#last_name').val();
            var message_title = $('#message_title').val();
            var article_title = $('#article_title').val();
            var reference_location = $('#reference').val();
            var inv_text = $('#inv_text').html();
            var request;
            alert(first_name);
            e.preventDefault();
            request = $.ajax({
                type: 'POST',
                url: BASE_URL+"wp-content/themes/Flatter/ajax/send_invite.php",
                dataType: "text",
                data: { first_name: first_name, last_name: last_name, email: email, message_title: message_title, article_title: article_title, reference_location: reference_location, inv_text: inv_text },
                success: function(data){
                    console.log(data)
                    if(data=="true"){
                        $("#invitation").hide();
                        $("#success").show();
                    }
                    if(data=="false"){
                        $("#inval_email").show();
                    }
                }
            });
        });
    });
})(jQuery);
</script>

<div class="col-md-4">
<div id="success" hidden><br><br>Invitation sent successfully!</div>

<div id="invitation">
<br><br><br></br><h1>Invitation Form</h1>
<form id = "invitation_form">
First Name:<input id="first_name" type="text" name="first_name" required>
Last Name:<input id="last_name" type="text" name="last_name" required>
Email Address:<input id="email" type="text" name="email" required>
Message Title:<input id="message_title" type="text" name="message_title" required>
Article Title:<input id="article_title" type="text" name="article_title" required>
Reference Location:<input id="reference" type="text" name="reference" required>
Message:<textarea id="inv_text" style="resize: none" rows="10" placeholder="Select invitation type..." readonly required></textarea>
Invitation Type:
    <select id="text_selection">
        <option value="empty_field"></option>
        <option value="community_inv_text">Community Invitation</option>
        <option value="content_submission_inv" >Content Submission Invitation</option>
        <option value="individual_inv">Individual Invitation</option>
        <option value="content_submission_and_individual_inv">Content Submission and Individual Invitation</option>
        <option value="contributor_content_submission_inv">Contributor Content Submission Invitation</option>
    </select>
    <input id="submit_inv" type="submit" value="Invite">
</form>

我将非常感谢您在这件事上的一些帮助。这段代码的重点是从用户那里收集信息并将数据发送到另一个文件以便对其进行处理。感谢您提前提供任何帮助。

Answer 1

我想通了。有一个 CSS 文件正在修改与我在文件中使用的名称相同的元素（即 first_name、last_name、email 等）。