javascript - 即使表单无效，也会加载Bootstrap modal吗？

我有一个这样的引导模式：

<a href="#summaryModal" onclick="return generate_summary()" data-toggle="modal" style="color:white"><button type="submit" id="summarize_btn" class="btn btn-success offset3">Summarize</a></button>

<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Summary</h3>
  </div>
  <div class="modal-body" id="modal-body">
    <textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"></textarea>
  </div>
  <div class="modal-footer">
    <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-success">Summarize Again</button>
  </div>
</div>

我的generate函数是这样的：

function generate_summary() {
    var summary_input=document.getElementById('summary_input').value;
    var email_notify=document.getElementById('email_notify').value;
    var num_sent=document.getElementById('num_sent').value;
    if(summary_input=='' || num_sent==''){
    alert('Input text or specify the number of sentences!');
    return false;
    }
    else {
      $.ajax({
                type: "GET",
                url: "/summary/",
                data: {summary_input:summary_input, email_notify:email_notify, num_sent:num_sent},
                success: function(data){
                     $('#modal-body').html(data)
               return true;
                }
            });
    }
}

当表单无效时，我不希望弹出模式。我怎样才能做到这一点？

最佳答案

您有一个<a>链接（带有onclick），该链接包裹在<button>周围，这似乎是多余的（并且结束标记是向后的）。

首先，简化该行：

<button type="button" id="summarize_btn" class="btn btn-success offset3">Summarize</button>

现在，使用jQuery，绑定到该按钮的单击，仅在ajax回调成功后显示模式。

$(document).ready(function(){
    $("#summarize_btn").bind('click', function(){
        var summary = $("#summary_input").val();
        var num_sent = $("#num_sent").val();
        if (summary == '' || num_sent == '') {
            return false;
        }

        $.ajax({
            type: "GET",
            url: "/summary/",
            data: $("#form_id").serialize(),
            dataType: "html",
            success: function(data){
                 $('#modal-body').html(data);
                 $('#summaryModal').modal('show');
            }
        });
    });
});

我希望这有帮助。

关于javascript - 即使表单无效，也会加载Bootstrap modal吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16226462/