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.

Please don't tag JavaScript questions as Java questions, they are not the same. — Stultuske, Mar 01 '16 at 07:42
Just _set_ the `href` attribute: `element.href = "something else";`. — Sebastian Simon, Mar 01 '16 at 07:43

Asons · Accepted Answer · 2016-03-01T08:47:24.330

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

score 1 · Answer 2 · answered Mar 01 '16 at 07:45

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";

answered Mar 01 '16 at 07:45

Vishal Gajera

4,137
5
28
55

ZaoTaoBao · Answer 3 · 2016-03-01T08:30:25.040

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

edited Mar 01 '16 at 08:30

answered Mar 01 '16 at 07:49

ZaoTaoBao

2,567
2
20
28

Your code has some serious syntax errors, please update and as well format it properly. – Asons Mar 01 '16 at 08:24
ty for advice me @LGSon – ZaoTaoBao Mar 01 '16 at 08:33

score 1 · Answer 4 · edited May 23 '17 at 10:28

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

edited May 23 '17 at 10:28

Community

1
1

answered Mar 01 '16 at 07:50

Álvaro Touzón

1,247
1
8
21

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? – Thej Mar 01 '16 at 08:59
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) – Álvaro Touzón Mar 01 '16 at 09:09
Thej i've edited for no modificacion of first value of hre in link, is that your need? – Álvaro Touzón Mar 01 '16 at 09:17

How to set the href parameter value using javascript function

4 Answers4