使用jquery使用按钮类型不提交类型的表单提交

Question

我需要使用FormData()提交表单，但在表单中，我使用一个type="button"按钮，而不是type=" submit“按钮，这将刷新页面。我试图在谷歌上搜索解决方案，但到目前为止还没有找到正确的答案或明确的答案。我将张贴一个简单的形式与3输入，并从这里开始，如果我想要更大。当我var_dump[$_POST]，我得到空array[0]{}，请帮助。

​

$("#discussion_submit_button").on("click", function(e){
//$("#discussion_form").submit(function(e){
    e.preventDefault();
    var title = $("#discussion_title").val();
    var discussion = $("#discussion_input_textarea").val();

    if (title == '' || discussion == '') { 
        $(".discussion_label_arrow, .discussion_required_fields").fadeIn("Slow");
        // error message, we select span tag with ID error_message and we change its content to this text
        setTimeout(function(){
            $('.discussion_label_arrow, .discussion_required_fields').fadeOut("Slow");
        }, 2000); 
    } else {
        var formData = new FormData(this);
        alert(formData);
        $.ajax({
            url: "widgets/discussion_board_submit.php",
            method: "POST",
            cache: false,
            processData: false,
            contentType: false,
            data: formData,
            success:function(data){
                //alert(data);
            }
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="" class="discussion_form" id="discussion_form">
        <div class="discussion_label_div"><span class="discussion_label_span">Title</span><span class="discussion_label_arrow"><span></div>
        <div class="discussion_input_div"><input type="text" name="discussion_title" class="discussion_input" size="50" id="discussion_title"/></div>

        <div class="discussion_label_div"><span class="discussion_label_span">Subject</span><span class="discussion_label_arrow"><span></div>

        <div class="discussion_label_div"><span class="discussion_label_span">Discussion</span><span class="discussion_label_arrow"><span></div>
        <textarea rows="5" cols="50" name="discussion_textarea" class="discussion_input_textarea" placeholder="Open your discussion..." id="discussion_input_textarea"></textarea>
        <input type="button" name="discussion_submit_button" value="Assert" class="share_button" id="discussion_submit_button"/>
    </form>

​

这是我的php：

var_dump($_POST);

Answer 1

问题是将它传递给FormData构造函数，但它需要表单元素来初始化对象。

你可以这样做：

var formData = new FormData(this.form);

或者从DOM中选择表单：

var formData = new FormData($("#discussion_form")[0]);

请记住，您必须将HTMLFormElement传递给FormData，因此不能使用jQuery对象。这就是为什么我从jQuery数组中选择第一个元素的原因。

Answer 2

不要用javascript验证表单，而是向不能为空的字段添加一个required属性。

如果您愿意，可以使用css样式(如:invalid )对它们进行样式设计。

用户会将注意力集中在第一个错误的元素上，并且能够在尝试提交它时纠正它。

但是，除非触发提交事件，否则这是不可能发生的，如果使用button.onclick或type="button"并阻止流，则不会发生这种情况。这就是你的错误。

构造表单数据时，参数成为按钮元素，而不是formdata所需的窗体。

new FormData(this); // <-- `this` is a button elm in your case

因此，当您使用约束验证时，只有当所有字段都有效时，提交事件才会触发。因此，提交事件上总是有一个有效的表单，this将被引用到FormData所需的form元素。

所以我应该这么做：

​

function form2ajax(evt) {
  evt.preventDefault();

  var formData = new FormData(this);
  
  // Having html define the markup
  // makes you able to reuse this function
  // for other forms
  $.ajax({
    url: this.action,
    method: this.method,
    cache: false,
    processData: false,
    contentType: false,
    data: formData,
    success: function(data) {
      //alert(data);
    }
  });
  
  // Just Another solution to submit the form...
  // fetch(this.action, {method: this.method, body: formData})
  //   .then(res => res.text())
  //   .then(console.log)
}

$("#discussion_form").submit(form2ajax)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="widgets/discussion_board_submit.php" class="discussion_form" id="discussion_form">
  <div class="discussion_label_div">
    <span class="discussion_label_span">Title</span>
    <span class="discussion_label_arrow"><span> <!-- note missing / in span -->
  </div>
  <div class="discussion_input_div">
    <!-- note required attribute -->
    <input type="text" required name="discussion_title" class="discussion_input" size="50" id="discussion_title"/>
  </div>
    
  <div class="discussion_label_div">
    <span class="discussion_label_span">Subject</span>
    <span class="discussion_label_arrow"><span> <!-- note missing / in span -->
  </div>
      
  <div class="discussion_label_div">
    <span class="discussion_label_span">Discussion</span>
    <span class="discussion_label_arrow"><span> <!-- note missing / in span -->
  </div>
  
  <!-- note required attribute -->
  <textarea required rows="5" cols="50" name="discussion_textarea" class="discussion_input_textarea" placeholder="Open your discussion..." id="discussion_input_textarea"></textarea>
  
  <!-- note using type=submit instead of type=button -->
  <!-- type=button don't trigger a submit -->
  <input type="submit" name="discussion_submit_button" value="Assert" class="share_button" id="discussion_submit_button"/>
</form>

​