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