AJAX发送空值

Question

Register form:

{!! Form::open(['route' => 'api.register', 'method' => 'post', 'id' => 'register_form']) !!}
    <div class="form-group">
        <div class="inputer">
            <div class="input-wrapper">
                <input id="register_name" type="text" class="form-control" placeholder="Enter your full name">
            </div>
        </div>
    </div>
    <!--.form-group-->
    <div class="form-group">
        <div class="inputer">
            <div class="input-wrapper">
                <input id="register_email" type="email" class="form-control" placeholder="Enter your email address">
            </div>
        </div>
    </div>
    <!--.form-group-->
    <div class="form-group">
        <div class="inputer">
            <div class="input-wrapper">
                <input id="register_pass" type="password" class="form-control" placeholder="Enter your password">
            </div>
        </div>
    </div>
    <!--.form-group-->
    <div class="form-group">
        <div class="inputer">
            <div class="input-wrapper">
                <input id="register_confirm" type="password" class="form-control" placeholder="Enter your password again">
            </div>
        </div>
    </div>
    <!--.form-group-->
    <div class="form-group">
        <label>
            <input type="checkbox" name="remember" value="1"> I have read and agree to the term of use.
        </label>
    </div>
    <div class="form-buttons clearfix">
        <button class="btn btn-white pull-left show-pane-login">Cancel</button>
        <button id="register_submit" class="btn btn-success pull-right">Sign Up</button>
    </div>
    <!--.form-buttons-->
 {!! Form::close() !!}

JS:

        $("#register_form").submit(function(e) {
            e.preventDefault();
        });
        $('#register_submit').click(function()
        {
            var address = $('#register_form').attr('action');
            var method = $('#register_form').attr('method');
            var user_name = $('#register_name').val();
            var mail = $('#register_email').val();
            var pass = $('#register_pass').val();
            var pass_confirm = $('#register_confirm').val();
            var name = $("input[name=_token]").val();
            $.ajax({
                url: address,
                type: method,
                data:
                    {
                        name: user_name,
                        email: mail,
                        password: pass,
                        password_confirm : pass_confirm,
                        _token: name
                    },
                success:function(response) {
                    alert(response);
                },
                error:function(response) {
                    alert(response);
                },
            });
        });

Route:

Route::post('/processregister', ['as' => 'api.register', 'uses' => 'AuthController@register']);

Register function:

public function register(Request $request)
    {
        return $request->name;
    }

At webportal.dev/processregister it gives blank page. It means request parameters sends remains null. Where I am going wrong?

(Maybe conflicts? There is also a login form on same page but it is submitted by seperate function and that login form works correctly.)

Answer 1

It's due to a very common mistake in Submit button.

A button <button> with type=submit will submit the form by default, unless you stop the default behavior via event.preventDefault() in your $('#register_submit').click() function. The default behavior runs before your AJAX call is responded and forwarded to the URL in action attribute specified in <form> tag (i.e. http://webportal.dev/processregister)

In your case, you can also change the type of the button to button to avoid this form submission behavior.