form submit using jquery ajax with button type not submit type

Question

I need to submit a form using FormData() but in the form i use a button with type="button" instead of type="submit" which will refresh the page. I tried to search on google for solution but so far couldn't find the right answer or a clear answer. I will be posting a simple form with 3 inputs and start from here if i want to go bigger. When i var_dump[$_POST] i get empty array[0]{} please help.

$("#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>

and this is my php :

var_dump($_POST);

Answer 1

Instead of validating the form with javascript add a required attribute to the fields that can't be empty.

If you like You can use css styling such as :invalid to style them
user will get focus on the first element that is wrong and will be able to correct it when they try to submit it.
but that can't happen unless the submit event is triggered which won't happen if you use a button.onclick or a type="button" and prevent the flow. And that is your mistake.

when you construct your formdata the argument becomes a button element and not a form which the FormData requires

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

---

So when you use constraint validation, then submit event will only get trigger if all fields are valid. So you will always have a valid form on the submit event and this will be referred to the form element which you need for the FormData

So here is what i should have done:

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

The problem is you pass this to FormData constructor, but it requires form element to initialize object.

You can do this:

var formData = new FormData(this.form);

or just pick form from DOM:

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

---

Just remember you have to pass HTMLFormElement to FormData, so you can't use jQuery object. That is why I pick first element from the jQuery array.