Input value returns as "UNDEFINED" (empty) [Answered]RSS

5 replies

Last post Jul 25, 2019 10:05 AM by afrika

‹ Previous Thread|Next Thread ›

Shortcuts

afrika

Member

254 Points

1137 Posts

Input value returns as "UNDEFINED" (empty)

Jul 23, 2019 04:15 AM|afrika|LINK

Hi guys

both first and last name values return as empty or undefined, same things with the console.log data.

But the razor page antiforgery token works fine in jquery

Here is my code

  $(document).ready(function () {
       
        $('#Add_Submit').click(function (e) {
            e.preventDefault();
            console.log(data);
               alert(first_Name + ' ' + last_Name);
            alert(first_Name + ' ' + last_Name);
            alert(first_Name2 + ' ' + last_Name2);
            Dawn(data);
        
        });


       var last_Name2 =  $("#First_Name").val();
        var first_Name2 = $("#Last_Name]").val();

          var last_Name =  $('#Add_Form input[name="First_Name]"').val();
        var first_Name = $('#Add_Form input[name="Last_Name]"').val();
        var email = "$('#Email').val()";
          var token = $('#Add_Form input[name="__RequestVerificationToken"]').val();

Both values return null

Here is my (edited) razor page

<form asp-action="Address_Add" id="Add_Form">

                @Html.AntiForgeryToken()
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>



                <div class="form-group ">
                    <label asp-for="Title" class="control-label"></label>
                    @Html.DropDownList("AddressType", new SelectList(ViewBag.Titled, "Value", "Text"), new { @class = "form-control", @style = "width: 50px;" })
                    <span asp-validation-for="Title" class="text-danger"></span>
                </div>

                <div class="form-group">
                    <label asp-for="First_Name" class="control-label">First Name</label>
                    <input asp-for="First_Name" required class="form-control" maxlength="50" />
                    <span asp-validation-for="First_Name" class="text-danger"></span>
                </div>

                <div class="form-group">
                    <label asp-for="Last_Name" class="control-label">Last Name</label>
                    <input asp-for="Last_Name" required class="form-control" maxlength="50" />
                    <span asp-validation-for="Last_Name" class="text-danger"></span>
                </div>


                <div class="form-group">
                    <label asp-for="Gender" class="control-label">Gender</label>
                    @Html.DropDownList("AddressType2", new SelectList(ViewBag.Gender, "Value", "Text"), new { @class = "form-control", @style = "width: 50px;" })
                    <span asp-validation-for="Gender" class="text-danger"></span>
                </div>




                <br />
                <hr />
                <br />
                <div class="form-group">
                    <input type="submit" id="Add_Submit" value="Go !" class="btn btn-default" />
                </div>
                <br />
                <hr />
                <br />
            </form>

Layout page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Xxx</title>

<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link href="~/lib/xa/css/main.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJ TNrHIW2I5f" crossorigin="anonymous"></script>



@*<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>*@
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>


</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0i voRxT2MZw1T"/>
</environment>
<link rel="stylesheet" href="~/css/site.css" />
</head>

whats wrong here ?

- Reply
mgebhard
All-Star

47391 Points

20777 Posts
Re: Input value returns as "UNDEFINED" (empty)

Jul 23, 2019 11:33 AM|mgebhard|LINK
Like many of your posts you did not share all the relevant code or enough code to reproduce the issue. I expect the JavaScript to exist in a standard @section scripts {} section within the View. But there is no indication where the script is loaded.

Also there is no indication that the inputs have values when the page loads. If the user populates the values then of course the values are empty because the input did not have values when the page loaded. If this is the case then move the variable assignments inside the click handler.
```
  $(document).ready(function () {
       
        $('#Add_Submit').click(function (e) {
			var last_Name2 =  $("#First_Name").val();
			var first_Name2 = $("#Last_Name]").val();

			var last_Name =  $('#Add_Form input[name="First_Name]"').val();
			var first_Name = $('#Add_Form input[name="Last_Name]"').val();
			var email = "$('#Email').val()";
			var token = $('#Add_Form input[name="__RequestVerificationToken"]').val();

            e.preventDefault();
            console.log(data);
               alert(first_Name + ' ' + last_Name);
            alert(first_Name + ' ' + last_Name);
            alert(first_Name2 + ' ' + last_Name2);
            Dawn(data);
        
        });
```
Please start using the browser's debugging tools. Set a break point and set through the logic this will highlight any errors in your design.
- Reply
bruce (sqlwo...
All-Star

55494 Points

14235 Posts
Re: Input value returns as "UNDEFINED" (empty)

Jul 23, 2019 03:15 PM|bruce (sqlwork.com)|LINK
several issues with your code:
```
$('#Add_Form input[name="First_Name]"').val(); 
```
you have a jQuery syntax error. the " is in the wrong place. but the main error is you read the input values once on page load, and use these in the ajax call. you should read the values in the onclick event.
bruce (sqlwork.com)

Yongqing Yu

Contributor

3660 Points

1042 Posts

Re: Input value returns as "UNDEFINED" (empty)

Jul 24, 2019 03:31 AM|Yongqing Yu|LINK

Hi afrika,

In addition to the questions that the first two respondents pointed out to you, you also need to revise some details.

First, what's this 'data' mean? There is no 'data' defined in your jquery, If it doesn't matter, you can comment it out.

Second, in these statements :

afrika

var last_Name2 =  $("#First_Name").val();
        var first_Name2 = $("#Last_Name]").val();

          var last_Name =  $('#Add_Form input[name="First_Name]"').val();
        var first_Name = $('#Add_Form input[name="Last_Name]"').val();
        var email = "$('#Email').val()";
          var token = $('#Add_Form input[name="__RequestVerificationToken"]').val();

With your HTML code, you didn't add an ID or name attribute to these input boxes and that's why the page keeps returning "UNDEFINED".

You can refer to this link to learn about jquery selectors : https://www.w3schools.com/jquery/jquery_selectors.asp

I have changed your code based on your needs, you can refer to it:

Layout page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Xxx</title>

<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link href="~/lib/xa/css/main.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJ TNrHIW2I5f" crossorigin="anonymous"></script>



@*<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>*@
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>


</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0i voRxT2MZw1T"/>
</environment>
<link rel="stylesheet" href="~/css/site.css" />
 @RenderSection("scripts", required: false)
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

razor page:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}
@section Scripts{
    <script>
        $(document).ready(function () {
           
            $('#Add_Submit').click(function (e) {
                e.preventDefault();
                var last_Name2 = $("#First_Name").val();
                var first_Name2 = $("#Last_Name").val();

                var last_Name = $('#Add_Form input[name=First_Name]').val();
                var first_Name = $('#Add_Form input[name=Last_Name]').val();
               // var email = "$('#Email').val()";
              //  var token = $('#Add_Form input[name="__RequestVerificationToken"]').val();
                alert(first_Name + ' ' + last_Name);
                alert(first_Name + ' ' + last_Name);
                alert(first_Name2 + ' ' + last_Name2); 

            }); 
        });
    </script>
}
<h2>Index</h2>
<form asp-action="Address_Add" id="Add_Form">

    @Html.AntiForgeryToken()
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>



    <div class="form-group ">
        <label asp-for="Title" class="control-label"></label>
        @Html.DropDownList("AddressType", new SelectList(ViewBag.Titled, "Value", "Text"), new { @class = "form-control", @style = "width: 50px;" })
        <span asp-validation-for="Title" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="First_Name" class="control-label">First Name</label>
        <input asp-for="First_Name" required class="form-control" maxlength="50"  id="First_Name" name="First_Name"/>
        <span asp-validation-for="First_Name" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="Last_Name" class="control-label">Last Name</label>
        <input asp-for="Last_Name" required class="form-control" maxlength="50"  id="Last_Name" name="Last_Name"/>
        <span asp-validation-for="Last_Name" class="text-danger"></span>
    </div>


    <div class="form-group">
        <label asp-for="Gender" class="control-label">Gender</label>
        @Html.DropDownList("AddressType2", new SelectList(ViewBag.Gender, "Value", "Text"), new { @class = "form-control", @style = "width: 50px;" })
        <span asp-validation-for="Gender" class="text-danger"></span>
    </div>




    <br />
    <hr />
    <br />
    <div class="form-group">
        <input type="submit" id="Add_Submit" value="Go !" class="btn btn-default" />
    </div>
    <br />
    <hr />
    <br />
</form>

The result of this work demo:

Best Regards,

YongQing.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

- Reply
afrika
Member

254 Points

1137 Posts
Re: Input value returns as "UNDEFINED" (empty)

Jul 25, 2019 10:03 AM|afrika|LINK
Points noted.

Even though i marked this as an answer, this line was wrong and here is the corrected code
```
var last_Name = $('#Add_Form input[name="First_Name"]').val(); var first_Name = $('#Add_Form input[name="Last_Name"]').val();
```
As this below does not work
```
 [name="First_Name]"') 
			 [name="Last_Name]"') 
```
- Reply
afrika
Member

254 Points

1137 Posts
Re: Input value returns as "UNDEFINED" (empty)

Jul 25, 2019 10:05 AM|afrika|LINK
bruce (sqlwork.com)

several issues with your code:
```
$('#Add_Form input[name="First_Name]"').val(); 
```
you have a jQuery syntax error. the " is in the wrong place. but the main error is you read the input values once on page load, and use these in the ajax call. you should read the values in the onclick event.
points noted. I have corrected it above, Thank you

‹ Previous Thread|Next Thread ›

Input value returns as "UNDEFINED" (empty) [Answered]RSS

5 replies

Shortcuts

Input value returns as "UNDEFINED" (empty)

Re: Input value returns as "UNDEFINED" (empty)

Re: Input value returns as "UNDEFINED" (empty)

Re: Input value returns as "UNDEFINED" (empty)

afrika

Re: Input value returns as "UNDEFINED" (empty)

Re: Input value returns as "UNDEFINED" (empty)

bruce (sqlwork.com)