首页 > 传统方式提交表单,防止重复提交问题?

传统方式提交表单,防止重复提交问题?

提交表单的时候,不是使用ajax提交,就是传统的表单提交,为防止表单重复提交,应该怎么写javascript或jquery代码呢?如果提交没成功,怎么恢复提交按钮?

html如下:


<form>
  <fieldset class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    <small class="text-muted">We'll never share your email with anyone else.</small>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile">
    <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </fieldset>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>
  <div class="radio disabled">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
      Option three is disabled
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

给按钮添加点击事件, 点击后, 给按钮添加disabled属性

$(":submit").on("click", function(){
    // 如果需要判断表单是否通过, 写这
    // if (通过)
     $(this).prop("disabled", true);
})

访问页面返回token,提交表单带上token。验证token是否有效。


js 加断组织默认事件的代码


可以加一个缓存层。然后提交成功了。则就创建一个针对用户的数据hash或者字符串等等的。反正你可以想着办法的存,然后下次提交的时候,先进行对比,如果相同,则提示已经提交过了。如果不存在,则可以继续进行提交,但是隔着提交这个办法救不灵了。
用JS不保险。我个人觉得。


token是个不错的方式!

【热门文章】
【热门文章】