locked
hidden value is set in javascript but null in C# - how do I get the value? RRS feed

  • Question

  • User-1792854043 posted

    When my screen is displayed, depending on answers provided, I need to build and display a radio button list where the values are dynamic.  I have managed to do this but now I am not able to retrieve the value of the selected answer in C# - I can in javascript but in C# it's NULL.

    I have something like this:

    MY HTML - shows 3 radio button options whose values are derived at run time in javascript based on answers provided on the screen once page has loaded 
     
       <div class="testSection">
            <asp:HiddenField ID="hidAnswer" runat="server" />
            <asp:HiddenField ID="hidMin" runat="server" />
            <asp:HiddenField ID="hidMax" runat="server" />
            <table class="testTable" >                
                <tbody>               
                    <tr>    
                        <td style="padding-left: 18px">
                            <asp:Label ID="lblPrompt" runat="server"></asp:Label>                        
                        </td>
                    </tr>   
                    <tr>                   
                        <td id="rbtNoLapse">                                              
                             <div id="dvnTest1" title="rbTest1" >                          
                                <input id="rbtNo"      type="radio"    name="Lapse" />
                                <label id="LblNo"   for="rbtNo" ></label>
                            </div>
                             <div id="dvMin" title="rbTest1" >         
                                <input id="rbtMin"     type="radio"    name="Lapse"   />
                                <label id="LblMin"  for="rbtMin" ></label>
                            </div>
                             <div id="dvMax" title="rbTest1" >         
                                <input id="rbtMax"     type="radio" name="Lapse"  />    
                                <label id="LblMax"  for="rbtMax" ></label>
                            </div>                
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
     
     
     
    In javascript while validating the the selection I get the selected item. The alert is showing the correctly selected item in the hidden field hidAnswer. 
    var list = document.getElementById("rbtNoLapse");       
    var inputs = list.getElementsByTagName("input");       
    var selected;
           
    for (var i = 0; i < inputs.length; i++)
    {          
       if (inputs[i].checked)
       {
           selected = inputs[i];                 
           break;
        }
    }
     if (selected)
     {
        hidAnswer = selected.value;
    }         
     alert( hidAnswer);
           
     
     
     
    in C#, getting the values from the form, for both hidden fields the value = ""  - I dont understand why they do not have the same values as is showing in the alert in javascript. 
     
    if (hidMin.Value != "0")
    {
         if (hidAnswer.Value == "01")
          {
                do something 
           }
                  
    }

    I am obviously doing something wrong, have incorrect syntax or just simply not grasping this. Any help is appreciated. 

    Tuesday, September 11, 2018 2:27 PM

Answers

  • User839733648 posted

    Hi JH001,

    According to your description and code, I’ve made a sample on my side and would like to give you some advice.

    You’ve got the selected value successfully in JS but I think the alert result is not the hidden field’s value.

    It is just the value of a parameter “ hidAnswer” you’ve defined and set its value as selected.value .

    If you want to set the hidden field value as the selected value, you could use

    document.getElementById("<%= hidAnswer.ClientID %>").value = selected.value;

    Then you could get the value in C# written like  hidAnswer.Value.ToString();

    For more details, you could refer to my test code below.

    .aspx

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(function () {
                $('input[type="radio"]').click(function() {
                    var list = document.getElementById("rbtNoLapse");
                    var inputs = list.getElementsByTagName("input");
                    var selected;
                    for (var i = 0; i < inputs.length; i++) {
                        if (inputs[i].checked) {
                            selected = inputs[i];
                            break;
                        }
                    }
                    if (selected) {
                        hidAnswer = selected.value;
                        document.getElementById("<%= hidAnswer.ClientID %>").value = selected.value;
                    }
                    console.log();
                    //alert(hidAnswer);
                });
    
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server" method="post">
            <div class="testSection">
                <asp:HiddenField ID="hidAnswer" runat="server" />
                <asp:HiddenField ID="hidMin" runat="server" />
                <asp:HiddenField ID="hidMax" runat="server" />
                <table class="testTable">
                    <tbody>
                        <tr>
                            <td style="padding-left: 18px">
                                <asp:Label ID="lblPrompt" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td id="rbtNoLapse">
                                <div id="dvnTest1" title="rbTest1">
                                    <input id="rbtNo" type="radio" name="Lapse" value="1" />
                                    <label id="LblNo" for="rbtNo">111</label>
                                </div>
                                <div id="dvMin" title="rbTest1">
                                    <input id="rbtMin" type="radio" name="Lapse" value="2" />
                                    <label id="LblMin" for="rbtMin">222</label>
                                </div>
                                <div id="dvMax" title="rbTest1">
                                    <input id="rbtMax" type="radio" name="Lapse" value="3" />
                                    <label id="LblMax" for="rbtMax">333</label>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <asp:button text="Submit" runat="server" OnClick="Unnamed1_Click"/>
            </div>
        </form>
    </body>
    </html>
    

    code behind.

            protected void Unnamed1_Click(object sender, EventArgs e)
            {
                string selected = hidAnswer.Value.ToString();
                Response.Write(selected);
            }
    

    result:

    Besides, I suggest that you could get the selected value directly in code behind.

    You could set method="post" in form. And then you may get the selected value in code behind as below.

            protected void Unnamed1_Click(object sender, EventArgs e)
            {
                if (Request.Form["Lapse"] != null)
                {
                    string selected = Request.Form["Lapse"].ToString();
                    Response.Write(selected);
                }
            }
    

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 12, 2018 7:33 AM

All replies

  • User839733648 posted

    Hi JH001,

    According to your description and code, I’ve made a sample on my side and would like to give you some advice.

    You’ve got the selected value successfully in JS but I think the alert result is not the hidden field’s value.

    It is just the value of a parameter “ hidAnswer” you’ve defined and set its value as selected.value .

    If you want to set the hidden field value as the selected value, you could use

    document.getElementById("<%= hidAnswer.ClientID %>").value = selected.value;

    Then you could get the value in C# written like  hidAnswer.Value.ToString();

    For more details, you could refer to my test code below.

    .aspx

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(function () {
                $('input[type="radio"]').click(function() {
                    var list = document.getElementById("rbtNoLapse");
                    var inputs = list.getElementsByTagName("input");
                    var selected;
                    for (var i = 0; i < inputs.length; i++) {
                        if (inputs[i].checked) {
                            selected = inputs[i];
                            break;
                        }
                    }
                    if (selected) {
                        hidAnswer = selected.value;
                        document.getElementById("<%= hidAnswer.ClientID %>").value = selected.value;
                    }
                    console.log();
                    //alert(hidAnswer);
                });
    
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server" method="post">
            <div class="testSection">
                <asp:HiddenField ID="hidAnswer" runat="server" />
                <asp:HiddenField ID="hidMin" runat="server" />
                <asp:HiddenField ID="hidMax" runat="server" />
                <table class="testTable">
                    <tbody>
                        <tr>
                            <td style="padding-left: 18px">
                                <asp:Label ID="lblPrompt" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td id="rbtNoLapse">
                                <div id="dvnTest1" title="rbTest1">
                                    <input id="rbtNo" type="radio" name="Lapse" value="1" />
                                    <label id="LblNo" for="rbtNo">111</label>
                                </div>
                                <div id="dvMin" title="rbTest1">
                                    <input id="rbtMin" type="radio" name="Lapse" value="2" />
                                    <label id="LblMin" for="rbtMin">222</label>
                                </div>
                                <div id="dvMax" title="rbTest1">
                                    <input id="rbtMax" type="radio" name="Lapse" value="3" />
                                    <label id="LblMax" for="rbtMax">333</label>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <asp:button text="Submit" runat="server" OnClick="Unnamed1_Click"/>
            </div>
        </form>
    </body>
    </html>
    

    code behind.

            protected void Unnamed1_Click(object sender, EventArgs e)
            {
                string selected = hidAnswer.Value.ToString();
                Response.Write(selected);
            }
    

    result:

    Besides, I suggest that you could get the selected value directly in code behind.

    You could set method="post" in form. And then you may get the selected value in code behind as below.

            protected void Unnamed1_Click(object sender, EventArgs e)
            {
                if (Request.Form["Lapse"] != null)
                {
                    string selected = Request.Form["Lapse"].ToString();
                    Response.Write(selected);
                }
            }
    

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 12, 2018 7:33 AM
  • User-1792854043 posted
    Thanks Jenifer than solved my problem. I do appreciate your time and explanation. I have another question, once the data is saved , my application allows you to look at the page again and I’m not sure how to show the selected option using the database answer? Any additional advice ? Thanks again
    Wednesday, September 12, 2018 3:22 PM
  • User-1171043462 posted

    Try

    string selected = Request.Form[hidAnswer.UniqueID];

    Wednesday, September 12, 2018 8:48 PM
  • User-1792854043 posted

    Thanks so much Jenifer, that worked for me. 

    The selected answer is being saved into a database table and now when the application is run again and the screen revisited, it needs to show which one was previously chosen. 

    As the radio list is build dynamically, none of the id names are recognised in my C# code so I am struggling to set which one was actually set. 

    So in my pageLoad in C# I have something like this:

    ri = GetRegistryItemFromTable("pageid = 'LT01' and promptid = 'LT01' and answerID = '01'");   
    if (ri != null)
    {

    // option 01 was chosen last time and saved in DB and we have found it  so now I need to set the "checked" attribute to TRUE 
    }
    ri = GetRegistryItemFromTable("pageid = 'LT01' and promptid = 'LT01' and answerID = '02'");
    if (ri != null)
    {

    // option 02 was chosen last time and saved in DB and we have found it  so now I need to set the "checked" attribute to TRUE 
    }


    ri = GetRegistryItemFromTable("pageid = 'LT01' and promptid = 'LT01' and answerID = '03'");
    if (ri != null)
    {

    // option 03 was chosen last time and saved in DB and we have found it  so now I need to set the "checked" attribute to TRUE 
    }

    If you can point me in the right direction I would be very appriciative. Thanks again.

    Monday, September 17, 2018 10:07 AM