locked
Input value returns as "UNDEFINED" (empty) RRS feed

  • Question

  • User-973886032 posted

    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 ?

    Tuesday, July 23, 2019 4:15 AM

Answers

  • User475983607 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 23, 2019 11:33 AM
  • User665608656 posted

    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 :

     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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 24, 2019 3:31 AM

All replies

  • User475983607 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 23, 2019 11:33 AM
  • User-474980206 posted

    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.

    Tuesday, July 23, 2019 3:15 PM
  • User665608656 posted

    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 :

     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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 24, 2019 3:31 AM
  • User-973886032 posted

    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]"') 
    Thursday, July 25, 2019 10:03 AM
  • User-973886032 posted

    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

    Thursday, July 25, 2019 10:05 AM