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

不是使用javascript验证表单，而是将required属性添加到不能为空的字段中。

如果你喜欢你可以使用:invalid之类的CSS样式来设置它们的样式用户将专注于第一个错误的元素，并且当他们尝试提交时将能够纠正它。
但除非触发提交事件，否则不会发生这种情况，如果你使用了button.onclick或type="button"并阻止流量。那是你的错。

当你构造你的formdata时，参数变成了一个按钮元素，而不是FormData需要的一个表单

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

因此，当您使用constraint validation时，只有所有字段都有效时，提交事件才会触发。因此，您将始终在提交事件中有一个有效的表单，并且this将被引用到FormData所需的表单元素

所以这就是我应该做的：

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>

Answer 2

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

你可以这样做：

var formData = new FormData(this.form);

或者只是从DOM中选择表单：

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

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

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

2 个答案: