javascript - 即使表单无效， Bootstrap 模式也会加载？

Question

我有一个像这样的 Bootstrap 模式:

<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>

我的生成函数是这样的:

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;
                }
            });
    }
}

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

Answer 1

您有一个<a>链接(带有 onclick)包含 <button>这似乎是多余的(并且结束标签是向后的)。

首先，简化该行:

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

现在，使用 jQuery，绑定(bind)到该按钮的单击，并且仅在 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');
            }
        });
    });
});

我希望这会有所帮助。