Question

我有输入验证和ajax帖子的问题。我使用http://1000hz.github.io/bootstrap-validator/

这是我的表格代码：

＆＃13;

var body = " {\"Warranty\": [ \n { \n \"Name\": \"test\", \n \"Type\": \"test2\", \n \"Months\": \"6\", \n }, \n { \n \"Name\": \"Test6\", \n \"Type\": \"test7\", \n \"Months\": \"6\", \n }, \n { \n \"Name\": \"test9\", \n \"Type\": \"test10\", \n \"Miles\": \"10000\", \n } \n ]} ";
eval("var object = " + body);
console.log(object);

＆＃13;

这是我的javascript代码：

<form id="order-form" class="form" action="" method="post" novalidate="true" role="form" data-toggle="validator">
  <fieldset>
    <div id="callback-type" class="btn-group">
      <button class="btn btn-default private-callback btn-primary" type="button" data-type="private">
        Private
      </button>
      <button class="btn btn-default public-callback" type="button" data-type="public">
        Public
      </button>
      <input class="callback-type" type="hidden" id="callback-type-data" name="callback[type]" value="private">
    </div>
  </fieldset>
  <fieldset style="border: none">
    <section class="callback-time-select form-group">
      <label class="input"> <i class="icon-prepend fa fa-user"></i>
        <input class="callback-datetime" placeholder="<?=date('Y/m/d H:i');?>" type="text" name="callback[time]" id="callback-time" required/>
        <div class="time-clear">
          <i class="fa fa-times-circle"></i>
        </div>
      </label>
      <div class="help-block with-errors"></div>
    </section>
    <section class="second callback-agent-section form-group">
      <select class="callback-agent" name="callback[user]" style="width:100%" class="select2" id="select-callback-agent" required>
        <option></option>
        <option value="1">Name</option>
      </select>
      <div class="help-block with-errors"></div>
    </section>
  </fieldset>
  <div class="tab-actions">
    <button type="submit" class="btn btn-primary btn-sm submit-button callback-btn-create">Set Callback</button>
    <button type="submit" class="btn btn-primary btn-sm submit-button callback-btn-update" style="display: none;">Update Callback</button>
    <button type="button" class="btn btn-default btn-sm submit-button callback-btn-remove" style="display: none;">Remove</button>
  </div>
</form>

$(document).on('click', '#dealing-modal #callback-tab .tab-actions .callback-btn-create', function(){ $(this).closest('form').validator().submit(function(e){ e.preventDefault(); if (!$('.has-error').length) { self.create(); } }); });方法：

self.create

我需要验证表单输入并在点击按钮上发送ajax帖子。它启动表单提交，并在表单生效后发送帖子。

我的问题是：

当输入为空时我按下按钮创建，表单验证它，我看到错误文本。没关系！但是当我点击按钮1或2次等等，并且在我完成所有输入之后，方法create: function() { Application.Debug("Calllback.create"); var self = this; var form = $(":input", this.window).serialize(); form = form + '&call_id=' + this.call.id; $.post(Application.url+'callbacks/create', form, function(data){ if(data.status === true) { self.callback = data.callback; $(".callback-btn-create",self.window).css('display','none'); $(".callback-btn-update",self.window).css('display','inline'); $(".callback-btn-remove",self.window).css('display','inline'); } else { Application.Debug("Calllback.create - ERROR"); } }); }执行ajax发布的次数与我单击按钮的次数相同。

问题出在哪里？

Answer 1

您只需要在点击之后和ajax调用之前禁用或显示以下按钮，反之亦然。

 <button type="button" class="btn btn-primary btn-sm submit-button callback- btn-create">Set Callback</button>

Answer 2

var $submitBtn; // Lets say this is the jQuery object that contains the form button element.

$submitBtn.attr('disabled', true);

$.post().always(function () {
    $submitBtn.attr('disabled', false);
});

并为您的按钮设置一些禁用样式：

input[type="submit"][disabled] {
    opacity: .4;
    pointer-events: none;
}

另一种方法：

var $form; // Lets say this is the jQuery object that contains the form element.

if ($form.data('posting')) {
    return false; // We are already posting data, don't do anything.
}

$form.data('posting', true);

$.post().always(function () {
    $form.data('posting', false);
});

如何停止重复ajax帖子？

2 个答案: