javascript - JQuery - 调用preventDefault()后提交表单

Question

我有一个如下所示的表格，

<form id="compose" method="post" name="new_message">
<div id="new_message">
    <div>
        <label class="required" for="new_message_subject">Subject</label>
        <input type="text" class="form-control" required="required" name="new_message[subject]" id="new_message_subject">
    </div>
    <div>
        <label class="required" for="new_message_receiver">To</label>
        <select class="form-control" name="new_message[receiver]" id="new_message_receiver">
            <option value="2">fnamexxxxx lname</option>
            <option value="5">tester testerlast</option>
            <option value="7">bummer bumlast</option>
        </select>
    </div>
    <div>
        <label class="required" for="new_message_content">Content</label>
        <textarea class="form-control" required="required" name="new_message[content]" id="new_message_content"></textarea>
    </div>
    <div>
        <button class="btn btn-primary" name="new_message[Compose]" id="new_message_Compose" type="submit">Compose</button>
    </div>
        <input type="hidden" name="new_message[_token]" id="new_message__token">
</div>

并使用 preventDefault() 我已停止表单提交，然后使用引导模式来获取确认消息，您可以在下面看到我的 Jquery 函数和引导模式。

<script>
    document.getElementById("compose").addEventListener("submit", function(event){
        event.preventDefault();

        var title   = $("#new_message_subject").val();
        var to      = $("#new_message_receiver :selected").text();
        var message = $("#new_message_content").val();

        $('#title').text(title);
        $('#to').text(to);
        $('#message').text(message);

        $('#myModal').modal('show');

        $('#send').click(function(){
            // avoid preventDefault() and submit form code here
        });
    });
</script>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Message send confirmation</h4>
            </div>
            <div class="modal-body">
                <h4 id="title"></h4>
                <p><b>To</b></p>
                <p id="to"></p>
                <p><b>Message</b></p>
                <p id="message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" id="send" class="btn btn-primary">Send</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

场景是当用户单击表单提交按钮时，会弹出引导模式并要求确认表单提交，如果用户单击发送按钮，id="send” 那么表单需要执行其操作/提交。

现在我想做的是，当用户单击模式中的发送按钮时，需要提交表单。我尝试了几种方法来做到这一点，但无法避免 preventDefault() 并提交表单。

Answer 1

您的脚本代码应如下所示。

<script>
    $("#compose").submit(function (objEvent) {
        objEvent.preventDefault();
        var title = $("#new_message_subject").val();
        var to = $("#new_message_receiver :selected").text();
        var message = $("#new_message_content").val();
        $('#title').text(title);
        $('#to').text(to);
        $('#message').text(message);
        $('#myModal').modal('show');
        $(this)[0].submit();
    })
</script>