如何使用jQuery正确收集用户插入的输入值，使用ajax post将它们发送到服务器？

Question

I have a payment page that has a multi-step form. In the "step 1" the user inserts his information like nama, surname, etc, then billing information.

So, in the "step 1" I have fields like name, surname, etc. I want in each step collect all information with jQuery so that is possible to send an ajax request to the server to validate the information when the "go to step 2" button is clicked.

My doubt is about how to properly store this step1 data inserted by the user to be possible to send it to the server. For example in the step 1 Im getting the values like:

var name = $('#name').val();

Then how to send the data to the server using an ajax post request?

step 1 html

<div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
    <h6>User Info</h6>
    <form method="post" action="">
         {{csrf_field()}}
        <div class="form-group font-size-sm">
            <label for="name" class="text-gray">Name</label>
            <input type="text" required class="form-control"  value="{{ (\Auth::check()) ? Auth::user()->name : old('name')}}">
        </div>
        <!-- other form fields -->
        <input type="submit" id="goToStep2" href="#step2"
                class="btn btn-primary btn float-right next-step" value="Go to step 2"/>
    </form>
</div>

For the ajax part when "Go to step 2" is clicked I created a route 'storeUserInfo', but do you know how to send the data to the PaymentController?

$("a[id='goToStep2']").on('click', function(){
     $.ajax({
        url: '{{ route('products.storeUerInfo',null) }}',
        type: 'POST',
         success:function(result){
         ),
        error: function(error) {
            console.log(error.status)
        }
    });
});

Answer 1

This is a complete solution for form with file element

HTML

   <div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
        <h6>User Info</h6>
        <form method="post" action="" id="page-form">
             {{csrf_field()}}
            <div class="form-group font-size-sm">
                <label for="name" class="text-gray">Name</label>
                <input type="text" required class="form-control"  value="{{ (\Auth::check()) ? Auth::user()->name : old('name')}}">
            </div>
            <!-- other form fields -->
            <input type="submit" id="goToStep2" href="#step2"
                    class="btn btn-primary btn float-right next-step" value="Go to step 2"/>
        </form>
    </div>

JS

$(function () {
    'use strict'

    var page_form_id = "page-form";

    $('#a[id='goToStep2']').on('click', function () {
        $('#' + page_form_id + ' .error').html("");
        $('#' + page_form_id + ' .form-group').removeClass("has-error");
        var custom_form = $("#" + page_form_id);
        var custom_params = custom_form.serializeArray();
        var custom_files = $("#file")[0].files;
        var custom_formData = new FormData();
        for (var i = 0; i < custom_files.length; i++) {
            custom_formData.append("file", custom_files[i]);
        }

        $(custom_params).each(function (custom_index, custom_element) {
            custom_formData.append(custom_element.name, custom_element.value);
        });

        $.ajax({
            method: "POST",
            url: '{{ route('products.storeUerInfo',null) }}',
            contentType: false,
            processData: false,
            data: custom_formData,

            success: function (data, textStatus, jqXHR) {
                setTimeout(function () {
                    window.location.reload();
                }, 3000);
            },
            error: function (data) {
                var errors = data.responseJSON;
                $.each(errors['message'], function (index, value) {
                    $('#' + add_form_id + ' .eMsg_' + index).html(value[0]);
                    $('#' + add_form_id + ' .eMsg_' + index).parent().parent().addClass("has-error");
                });
            }
        });
    });

});