在ASP.NET中访问JavaScript变量

Question

我正在尝试访问锚标记的href属性中的JavaScript变量。

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代码：

<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>

我想将隐藏的字段调用PurposeHidden的值传递给href值，但单击下一步按钮后，什么都没发生。

Answer 1

我看到您正在直接访问HiddenField的值，这可能不起作用。我建议先获取元素引用，然后再调用其值。参见：

而不是：

<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>

尝试：

<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>

或者您可以绑定更改事件并使用jquery设置href值。

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

或者只是您应该在设置隐藏字段的值的位置设置它的值。

<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>