Access JavaScript variable in ASP.NET

Question

I am trying to access JavaScript variable in the href attribute of anchor tag.

Javascript:

<script language="javascript">
    $(document).ready(function(){
        $(":input[name= 'purpose']").on('change', function(){
             var TravelSelection = $(this).val();
             /*alert(TravelSelection);*/
             var pageName
             if (TravelSelection == '1') {
                 pageName = '#page1';
             } else {
                 pageName = '#page2';
             }
             document.getElementById('<%=purposeHidden.ClientID%>').value = pageName;
        });
    });
</script>   

HTML/ASPX Code:

<form id="survey" action="#" runat="server">
    <section id="purpose" data-role="page">
        <div data-role="content" class="content">
            <p>
               <legend class="title">Visitation Purpose & Entrance:</legend>
               <div class="ui-corner-all ui-shadow" style="padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px;">
                  <legend style="font-weight:700;">Visitation Purpose:</legend>
                  <fieldset data-role="controlgroup" data-mini="true">
                     <input type="radio" id="meeting" value="1" name="purpose" />
                     <label for="meeting">Meeting</label>
                     <input type="radio" id="event" value="2" name="purpose" />
                     <label for="event">Event</label>
                  </fieldset>
                  <asp:HiddenField ID="purposeHidden" runat="server"/>
               </div>
                </p>
            <p><a href="<%=purposeHidden.value%>" data-role="button" data-theme="c" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">Next</a></p>
         </div>
      </section>

      <section id="page1" data-role="page">
        ..display this page
      </section>
</form>

I want to pass the value of hidden field call purposeHidden into href value but it seen notthing happen once I click the next button.

Answer 1

I see you are accessing the Value of the HiddenField directly which might not work. I would suggest to get the element reference first then call for its value. See:

Instead of:

<a href="<%=purposeHidden.value%>" data-role="button" data-theme="c" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">Next</a>

Try:

<a href="#" id='anchorElement' data-role="button" data-theme="c" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">Next</a>

<script>
$(document).ready(function(){
    $('#anchorElement').on('click', function(){
        var whereTo = $('#<%= purposeHidden.ClientID %>').val();
        window.location.href = whereTo;
        return false;
    });
});
</script>

Or you can bind the change event and set the href value using jquery.

$(document).ready(function(){
    $('#<%= purposeHidden.ClientID %>').on('change', function(){
        var whereTo = $(this).val();
        $('#anchorElement').attr('href', whereTo);
        return false;
    });
});

Or simply you should set its value where you are setting the value of your hidden field.

<script language="javascript">
    $(document).ready(function(){
        $(":input[name= 'purpose']").on('change', function(){
             var TravelSelection = $(this).val();
             /*alert(TravelSelection);*/
             var pageName
             if (TravelSelection == '1') {
                 pageName = '#page1';
             } else {
                 pageName = '#page2';
             }
             document.getElementById('<%=purposeHidden.ClientID%>').value = pageName;
             $('#anchorElement').val(pageName); // This line...
        });
    });
</script>