I have the following form,

<form:form method="POST" mandName="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.

I have the following form,

<form:form method="POST" mandName="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.

• javascript
• html

• 1 Please don't tag JavaScript questions as Java questions, they are not the same. – Stultuske Commented Mar 1, 2016 at 7:42
• Just set the href attribute: element.href = "something else";. – Sebastian Simon Commented Mar 1, 2016 at 7:43

4 Answers 4

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));
}

If this is the case,

 <a id="demo"...>..</a>

then you can do it by this way into JavaScript function,

var pastLink =  document.getElementById("demo").getAttribute("href");
document.getElementById("demo").href = pastLink  + "someNewLink.html";

try something like:


function method(val){
           //capture elements wanna change
            try{
                 var link = document.getElementById("mylink");
                //check value selection
                if(val == 'x'){
                    link.innerHTML = "facebook";,
                    link.setAttribute('href', "http://facebook. ?lang= somevalue");
                }else if(...){
                  ....
                }
            }catch(err){
               //just to show you differents ways to capture errors
               console.log(err.message) 
               //or 
               document.getElementById("some_div_for_message").innerHTML = err.message;
            }
        return false;
        }

could you try to do this

var href= document.getElementById("demo").href;
 function myFunction(href, val) {
    document.getElementById("demo").href = href + 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));
        }

and you can see thios question in this post How to change the href for a hyperlink using jQuery Expect it help you