3

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.

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

4 Answers 4

Reset to default
2

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));
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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";
Improve this answer

Comments

1 
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.com ?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;
        }
Improve this answer

2 Comments

Your code has some serious syntax errors, please update and as well format it properly.
ty for advice me @LGSon
1

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

Improve this answer

3 Comments

I tried doing this, but for example if I select 'en' for the 1st time and then when I select 'fr' for the 2nd time, then in the url, I am getting like lang=enfr. How to send only the latest selected value is my question?
the idea is get href value once, becose when you change it first time it will be with last change, so the function will be (href, value)
Thej i've edited for no modificacion of first value of hre in link, is that your need?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.