Why input value is NULL when using Ajax?(ASP.NET CORE)

Question

I do not have access to input values when using Ajax in View(MVC) but I have access to input values when not use Ajax. actually values is empty when use Ajax

When I use Ajax:

<form id="Form1" asp-action="Register" asp-controller="UserPanel" method="post">
    <div class="row">
        <div class="col-lg-5 col-md-5 col-sm-12 col-12  .sm-right" id="margin-top">
            <span>Name:</span>
            <input type="text" asp-for="Name" class="form-control">
        </div>
        <div>
            <span>Number:</span>
            <input type="text" asp-for="Number" class="form-control">
        </div>
    </div>
    <input type="reset" value="send" id="ajax-button" class="btn btn-success btn-sm waves-effect waves-light submit-btn" />
</form>

Script:

<script>
    $(document).ready(function () {
        var url = '@Url.Action("Register", "UserPanel")';
        var data = $('#Form1').serialize();
        $('#ajax-button').click(function () {
            debugger
            $.ajax({
                type: "POST",
                data: data,
                url: url,
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    alert('Done');
                },
                error: function () {
                    alert("error");
                }
            });
        })
    })
</script>

I added tag helpers

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, SmsWebClient
@using Microsoft.AspNetCore.Razor.TagHelpers;

Value is null before enter to ajax ,image:

Post the controller action method

Marcel
– Marcel

2019-04-28 20:18:11 +00:00
Commented Apr 28, 2019 at 20:18 — Marcel
– Marcel, Commented Apr 28, 2019 at 20:18
Value is null above enter to ajax. @KirkLarkin

Ahmad
– Ahmad

2019-04-29 04:32:09 +00:00
Commented Apr 29, 2019 at 4:32 — Ahmad
– Ahmad, Commented Apr 29, 2019 at 4:32
You have to serialize the form in button click event.

Thamarai T
– Thamarai T

2019-04-29 05:26:19 +00:00
Commented Apr 29, 2019 at 5:26 — Thamarai T
– Thamarai T, Commented Apr 29, 2019 at 5:26

Alireza · Accepted Answer · 2019-04-29 05:32:36Z

3

Please Move the

var data = $('#Form1').serialize();

to below

$('#ajax-button').click(function () {

In fact, your code should be:

<script>
    $(document).ready(function () {
        var url = '@Url.Action("Register", "UserPanel")';
        $('#ajax-button').click(function () {
        var data = $('#Form1').serialize();
            debugger
            $.ajax({
                type: "POST",
                data: data,
                url: url,
                success: function (result) {
                    alert('Done');
                },
                error: function () {
                    alert("error");
                }
            });
        })
    })
</script>

In your code data set when docuement loaded and for this reason the value is null

edited Apr 29, 2019 at 5:32

answered Apr 29, 2019 at 5:16

Alireza

5051 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehdi Sheykhveysi · Accepted Answer · 2019-04-29 05:27:51Z

You must write like this

<form id="Form1" asp-action="Register" asp-controller="UserPanel" method="post">
    <div class="row">
        <div class="col-lg-5 col-md-5 col-sm-12 col-12  .sm-right" id="margin-top">
            <span>Name:</span>
            <input type="text" asp-for="Name" class="form-control">
        </div>
        <div>
            <span>Number:</span>
            <input type="text" asp-for="Number" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <button id="ajax-button">Submit</button>
    </div>
</form>

And This ViewModel

 public class RegisterVm
    {
        public string Name { get; set; }
        public string Number { get; set; }
    }

And finally this is the Ajax code

@section Scripts{
    <script>
        $(document).ready(function () {

            var url = $('#Form1').attr("action");

            var model = $('#Form1').serialize();

            var token = $('input[name=__RequestVerificationToken]').val();

            model.__RequestVerificationToken = token;

            $('#ajax-button').click(function () {
                $.ajax({
                    type: $('#Form1').attr("method"),
                    data: model,
                    url: url,
                    success: function (result) {
                        alert('Done');
                    },
                    error: function () {
                        alert("error");
                    }
                });
            })
        })
    </script>
}

Edward · Accepted Answer · 2019-04-29 05:03:17Z

Your data are set when docuement loaded, it will not pass the value which you enter.

For a working demo, try code below:

<script>
    $(document).ready(function () {
        $('#ajax-button').click(function () {
            var url = '@Url.Action("Register", "Home")';
            var data = new FormData();
            data.append('Name', $('#Name').val());
            data.append('Number', $('#Number').val());

            $.ajax({
                type: "POST",
                data: data,
                url: url,
                processData: false,
                contentType: false,
                success: function (result) {
                    alert('Done');
                },
                error: function () {
                    alert("error");
                }
            });
        })
    })
</script>

Collectives™ on Stack Overflow

Why input value is NULL when using Ajax?(ASP.NET CORE)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related