Using jQuery global variable in href parameter

Question

I have a problem using the selected value from a form in jquery. It is closely related to:

I have tried for hours getting this work using the above (and other) examples.

I have a drop down list with account numbers:

    <form id="accounts">
        <select>
            <option value="">Select one</option>
            <c:forEach var="custAccount" items="${customerAccounts}">
                <option value=${customerAccount}>${customerAccount.accountId}</option>
            </c:forEach>
        </select>
    </form>

I want to use the selected account in an href:

            <a href="Controller?&accountid='+selectedAccount+'&username=${username}&userid=${userid}&command=customerNewTransaction">Start new transfer</a>

And here is my script:

    <script type="text/javascript">
      $(document).ready(function() {
        var selectedAccount;
        $("#accounts").change(function() {
           selectedAccount = $(this).text();
        });
      });
    </script>

This doesn't work and the selected text is empty every time. I have also tried calling .val() aswell with the same (lack of) result.

What am I missing?

Change `$("#accounts")` to `$("#accounts select")`, although it'll probably be better if you gave the actual `` for `$('#account-select');` — MackieeE, Nov 12 '13 at 19:07
Ok. But what about the href - How do I use the var "selectedAccount"? — mcabe, Nov 12 '13 at 19:17
You cannot use a JavaScript variable in the middle of HTML like in your question, have to first render some HTML, then change it with JS later. See both of our answers below. — t0mppa, Nov 12 '13 at 19:44

score 0 · Answer 1 · answered Nov 12 '13 at 19:12

0

You have added an change handler on the form, instead of the select. You might want something like this:

<form id="accountForm">
  <select id="account">
    ..
  </select>
</form>

and then in your jQuery script:

$(document).ready(function () {
    $('#account').on('change', function (event) {
      $('#accountForm').append($(this).val());
    });        
});

answered Nov 12 '13 at 19:12

meavo

1,042
1
7
16

what will .append accomplish? sorry if its a dumb question – mcabe Nov 12 '13 at 19:24
I did not quite understand what you wanted to achieve with: selectedAccount = $(this).text(); Append adds the value of the dropdown (i.e. the selected option) to the form. – meavo Nov 12 '13 at 19:34
The form itself was a fault on my part - it is unnecessary since the only place I need the text from the selection is in the href. Sorry for the confusion – mcabe Nov 12 '13 at 19:46

score 0 · Accepted Answer · answered Nov 12 '13 at 19:34

<form id="accounts">
    <select id="account-select">
        <option value="">Select one</option>
        <c:forEach var="custAccount" items="${customerAccounts}">
            <option value=${customerAccount}>${customerAccount.accountId}</option>
        </c:forEach>
    </select>
    <div id="transfer-container">

    </div>
</form>

<script type="text/javascript">
  $(document).ready(function() {
      $("#account-select").change(function() {
          $('#transfer-container').html( '<a href="Controller?&accountid='+ $(this).val() +'">Start new transfer</a>' );
    });
  });
</script>

score 0 · Answer 3 · answered Nov 12 '13 at 19:41

Ah, I see MackieeE beat me to it, but just to offer a slightly different example:

    <script type="text/javascript">
        function updateLink() {
            var selectedAccount = $('#account').val();
            var uri = 'Controller?&accountid='+selectedAccount+'&command=customerNewTransaction';

            $('#account-link').attr('href', uri);
        }
    </script>

    <form>
      <select id="account" onchange="updateLink();">
        <option value="0" selected disabled>Select one</option>
        <c:forEach var="custAccount" items="${customerAccounts}">
          <option value=${customerAccount}>${customerAccount.accountId}</option>
        </c:forEach>
      </select>
    </form>

    <a id="account-link" href="#">Start a new transfer</a>

Using jQuery global variable in href parameter

3 Answers3