How to set the href parameter value using javascript function

Question

I have the following form,

<form:form method="POST" commandName="language">
        <table>
            <tr>
                <td>Language:</td>
                <td>
                    <form:select path="languageName" id="mySelect" onchange="myFunction(this.value)">
                        <form:option value="" label="...." />
                        <form:options items="${languages}" />
                    </form:select>
                </td>
                <td>
                    <form:errors path="languageName" cssStyle="color: #ff0000;" />
                </td>

            </tr>

            <tr>
                <td>
                    <a id="demo" href="/eidsar/openid-authn-request?type=ident&lang=">OpenID 2.0 Identification</a> <br>
                    <a href="/eidsar/openid-authn-request?type=auth&lang=">OpenID 2.0 Authentication</a> <br>
                    <a href="/eidsar/openid-authn-request?type=auth-ident&lang=">OpenID 2.0 Identification and Authentication</a> <br>
                </td>
            </tr>
            <tr>
        </table>
    </form:form>

I would like to change the value of lang whenever the dropdown value is selected,

Here is my javascript function,

<script>
        function myFunction(val) {
            /* var text = document.getElementById("demo").getAttribute("href")+val;
            document.getElementById("demo").href = text; */
            document.getElementById("demo").href.replace(document.getElementById("demo").getAttribute("href"), document.getElementById("demo").getAttribute("href")+val);
            alert( document.getElementById("demo").href.replace(document.getElementById("demo").getAttribute("href"), document.getElementById("demo").getAttribute("href")+val));
        }
    </script>

But I am not able to send the language value in the url when i click on href link. Any help would be appreciated. Please dont mark this as duplicate, as I haven't found any proper answer for the same.

Answer 1

You need to do like this, where you assign the result back to
document.getElementById("demo").href = '...';

Also, there is another flaw in your function where the link will not be reset properly, it will increase on every select change, so here is one way to address that, where the original href is stored and reused.

function myFunction(val) {

  var elem = document.getElementById('demo');

  if (!elem.hasAttribute('data-href')) {
    elem.setAttribute('data-href', elem.href);    
  }

  elem.href = elem.getAttribute('data-href')+val));
}

I guess you want to change all links, so here is a simple way using the existing markup

function myFunction(val) {
  var elem = document.getElementById('demo');
  var children = elem.parentNode.children;
  for (var i = 0; i < children.length; i++) {
    setHref(children[i],val);
  }
}

function setHref(elem,val) {
  if (!elem.hasAttribute('data-href')) {
    elem.setAttribute('data-href', elem.href);    
  }
  elem.href = elem.getAttribute('data-href')+val));
}