locked
Trying to capture a string entered in MVC razor form and convert it to and integer Is this possible?? RRS feed

  • Question

  • User2130491911 posted

    What I am trying to do is add a entry into the database that controls sort order based on the users record entry. requirement 

    So I have a razor form and when the users enters in 0300 I want to convert that to 300 and send it back to the control as one of the fields of the database table.

    So I wrote a jave script function that I wanted to take the value entered the contestants ID field and write to a HiddenFor field so when the form is saved the value gets written to the data base.

    In the razor for I have tried This parseInt option... but when I try to alert the value to the screen so I can see if it sees the data entry I get something called NaN and or Null or noting at all

                <script>
                    //Add Sort Order based on User Provided ID
                    function AddSortVal()
                    {
                 
                        var customVal = $("#MC_CONTESTANT_ID").text;
    
                        alert(customVal);
    
                        //$('#MC_SORT_ORDER').text(parseInt($('#MC_CONTESTANT_ID').val));
    
                        //alert(document.getElementById('#MC_CONTESTANT_ID'))
           
                        //var SortVal = parseInt($('#MC_CONTESTANT_ID').val);
                        //alert(SortVal);
             
                    }
    

    Here is the Razor Entry and the control information as well

    The field that has the ID is MC_ CONTESTANT_ID which is a string in the db, The hidden field is MC_SORT_ORDER

    The java scripted function trigger is on the first name. The goal is to convert that string and turn it into  int and store it in the hodden MC_SORT_ORDER Field which should get sent back to the controller with all of the other fields if I get how it works.

                    <div class="form-group">
                        @Html.LabelFor(model => model.MC_CONTESTANT_ID, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.MC_CONTESTANT_ID, new { htmlAttributes = new { @class = "form-control"} })
                            @Html.ValidationMessageFor(model => model.MC_CONTESTANT_ID, "", new { @class = "text-danger" })
                            @Html.HiddenFor(model => model.MC_SORT_ORDER)
                        </div>
                    </div>
    
                    <div class="form-group">
                        @Html.LabelFor(model => model.MC_CONTESTANT_FIRST_NAME, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.MC_CONTESTANT_FIRST_NAME, new { htmlAttributes = new { @class = "form-control", @type = "text", @onchange = "AddSortVal()" } })
                            @Html.ValidationMessageFor(model => model.MC_CONTESTANT_FIRST_NAME, "", new { @class = "text-danger" })
                        </div>
                    </div>

    Controller source codes/

       // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Create([Bind(Include = "MC_REC_ID,MC_CONTESTANT_ID,MC_CONTESTANT_FIRST_NAME,MC_CONTESTANT_LAST_NAME,MC_CONTESTANT_DOB,MC_CONTESTANT_APPLICATION_DATE,MC_CONTESTANT_STAFF_ID_NUM1,MC_CONTESTANT_PHONE,MC_CONTESTANT_EMAIL,MC_CONTESTANT_PARENT_NAME_FIRST_NAME,MC_CONTESTANT_PARENT_LAST_NAME,MC_CONTESTANT_APPLICATION_ONFILE_LINK,MC_CONTESTANT_VIDEO_SUBMISSION_DATE,MC_CONTESTANT_YOUTUBE_POST_DATE,MC_CONTESTANT_STAFF_ID_NUM2,MC_CONTESTANT_ADDRESS,MC_CONTESTANT_CITY,MC_CONTESTANT_STATE,MC_CONTESTANT_ZIPCODE,MC_CONTESTANT_COUNTRY,MC_REWARD_RECORD,MC_CONTESTANT_PRIZE_RECEIVED,MC_CONTESTANT_REWARD_SEND_DATE,MC_CONTESTANT_RECORD_UPDATE,MC_CONTESTANT_COL_I_APPLICATION,MC_CONTESTANT_VIDEO_FILE,MC_CONTESTANT_VIDEO_NUMBER,MC_CONTESTANT_TOTAL_SCORE,MC_SORT_ORDER")] CM_CONTESTANTS_MASTER_DETAIL_TBL cM_CONTESTANTS_MASTER_DETAIL_TBL)
            {
                if (ModelState.IsValid)
                {
                    db.CM_CONTESTANTS_MASTER_DETAIL_TBL.Add(cM_CONTESTANTS_MASTER_DETAIL_TBL);
                                   
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
    
                return View(cM_CONTESTANTS_MASTER_DETAIL_TBL);
            }

    Thanks for any help in advance.

    Saturday, October 10, 2020 8:15 PM

Answers

  • User475983607 posted

    The jQuery syntax is incorrect.  Input fields values are returned by the val() function.  text() is used to return the "text" within an element like a label or a div.

    var customVal = $("#MC_CONTESTANT_ID").val();

    This assumes the element exists and the there are not other HTML elements within $("#MC_CONTESTANT_ID").  

    Example.

    <div>
        <input id="MC_CONTESTANT_ID" type="text" name="MC_CONTESTANT_ID" value="0300" />
    </div>
    <div>
        <input id="Button1" type="button" value="button" />
    </div>
    <script>
        $('#Button1').click(function () {
            var myVal = parseInt($('#MC_CONTESTANT_ID').text());
            console.log(myVal);
        });   
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 10, 2020 10:30 PM

All replies

  • User475983607 posted

    The jQuery syntax is incorrect.  Input fields values are returned by the val() function.  text() is used to return the "text" within an element like a label or a div.

    var customVal = $("#MC_CONTESTANT_ID").val();

    This assumes the element exists and the there are not other HTML elements within $("#MC_CONTESTANT_ID").  

    Example.

    <div>
        <input id="MC_CONTESTANT_ID" type="text" name="MC_CONTESTANT_ID" value="0300" />
    </div>
    <div>
        <input id="Button1" type="button" value="button" />
    </div>
    <script>
        $('#Button1').click(function () {
            var myVal = parseInt($('#MC_CONTESTANT_ID').text());
            console.log(myVal);
        });   
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 10, 2020 10:30 PM
  • User2130491911 posted

    I see so ... when you write text with in the element what is meant by that?

    So if I have a label that is named this LabelOne the .text() will return LabelOne?

    Thanks for that replay. If do find Java Scripting difficult. Much more than the VBScript which was pretty straight forward.

    Sunday, October 11, 2020 3:24 PM
  • User475983607 posted

    I see so ... when you write text with in the element what is meant by that?

    The text() function returns the text within an element as explained in the linked reference jQuery documentation. 

    <div id="example">
        <span>Hello World</span>
        <div>
            This is <b>bold</b> text.
        </div>
    </div>
    <div>
        <input id="Button1" type="button" value="button" />
    </div>
        <script>
            $('#Button1').click(function () {
                console.log($('#example').text());
            });
        </script>

    Result

        Hello World
        
            This is bold text.

    So if I have a label that is named this LabelOne the .text() will return LabelOne?

    The name attribute value is NOT returned.  The text within the element's beginning and closing tag is returned.

    Thanks for that replay. If do find Java Scripting difficult. Much more than the VBScript which was pretty straight forward.

    You misunderstand text() is a jQuery function.  The JavaScript equivalent is innerText.

    document.getElementById('example').innerText

    just like VB.NET, jQuery functions and JavaScript properties are well documented.  It's just a matter of taking the time to read the reference material and creating a basic text as shown above.  

    Sunday, October 11, 2020 5:10 PM
  • User2130491911 posted

    This worked... Thanks

    Tuesday, October 13, 2020 10:31 PM