How to change button URL through JS?

Question

I have been spending a lot of time researching how to change a button href dynamically in my website using JS. I have a functioning Wordpress website, but would like to add some small additional functionality using JS to change a button's link based on a few user options.

I have researched this and found answers, but I absolutely cannot get the solutions to work on my site.

One of the simplest solutions that should work was found here: How to make option selection change button link?

I can't understand what is different between what I am trying to accomplish and what the accepted answer proposed. I added window.onload() to prevent the JS from running before elements were loaded.

I am trying to do something similar with the following HTML & JS code:

HTML Code:

<input type="hidden" id="input-book-type" value="GlassCrystal">

<br><br>

<select id="select-page-size">
<option value="6x6">6" x 6"</option>
<option value="10x10">10" x 10"</option>
</select>

<br><br>

<input id="input-project-title" value="Optional Project Title">

<br><br>    

<a class="button" id="design-button" href="http://">Design Now</a>

JS Code:

window.onload = function() {

document.getElementById("design-button").onclick = function() {
var booktype = document.getElementById("input-book-type");
var pagesize = document.getElementById("select-page-size");
var projtitle = document.getElementById("input-project-title");

this.href = "http://test/?sessionid=guest&ref="+booktype.value+pagesize.value+"&projectName="+projtitle.value+"/";
};

}

JS Fiddle: https://jsfiddle.net/w65c9x2d/

So do you just want to update the href only when you click the button, or do you want to update the href whenever an input is updated? — Ethan, Jun 03 '17 at 16:29
I would like to change the href on the button (id design-button) — Frank Pereny, Jun 03 '17 at 16:29
Basically, I thought if I do it this way, after the user changes options, when they click it the href will be updated to the current status. Avoid (avoiding unnecessary updates of the href) — Frank Pereny, Jun 03 '17 at 16:30

score 0 · Answer 1 · answered Jun 03 '17 at 16:31

Here is example code:

<a href="#" id="abc">jhg</a>
<a href="#" id="myLink">jhhghj</a>

<script type="text/javascript">
   document.getElementById("myLink").onclick = function() {
   document.getElementById("abc").href="xyz.php"; 
   return false;
};
</script>

I took this from here

score 0 · Answer 2 · answered Jun 03 '17 at 16:31

0

Change your button to this:

<button class="button" id="design-button" onclick="redirect()">Design Now</button>

Now instead of using a link, simply do a function that will take the inputs and change the window.location.href (or whatever method you prefer) to change the page.

redirect(obj) {
    window.location.href = "http://test/?sessionid=guest&ref="+booktype.value+pagesize.value+"&projectName="+projtitle.value+"/"
}

Obviously change it to your liking :)

answered Jun 03 '17 at 16:31

Polymer

792
1
5
15

**important note You don't have to use – Polymer Jun 03 '17 at 16:32
Yes, in the JSFiddle it looks ugly, but on my website it looks great! :) – Frank Pereny Jun 03 '17 at 16:33
Well, in that case, just use
and style it similar to your tag :) The reason I'm avoiding is simply because that has default behaviour that we want to change
– Polymer Jun 03 '17 at 16:34
Thanks for the suggestion. – Frank Pereny Jun 03 '17 at 16:37

score 0 · Accepted Answer · answered Jun 03 '17 at 16:39

I think your code to change the href is correct. However, the onload function is not immediately invoked for the code to work.

window.onload = function(e) {

  var booktype = document.getElementById("input-book-type");
  var pagesize = document.getElementById("select-page-size");
  var pagenum = document.getElementById("select-page-num");
  var projtitle = document.getElementById("input-project-title");

  document.getElementById("design-button").onclick = function() {
    this.href = "http://design.framesmile.com/?sessionid=guest&ref=" + booktype.value + pagesize.value + "*projectName=" + projtitle.value + " / ";
    console.log(this.href);
  };
}();// invoke the function

<input type="hidden" id="input-book-type" type="" value="GlassCrystal">

<br>
<br>

<select id="select-page-size">
  <option value="6x6">6" x 6"</option>
  <option value="10x10">10" x 10"</option>
</select>

<br>
<br>

<select id="select-page-num">
  <option value="20">20</option>
  <option value="22">22</option>
</select>

<br>
<br>

<input id="input-project-title" type="" value="Optional Project Title">

<br>
<br>


<a class="button" id="design-button" href="http://test/">Design Now</a>

Thanks, worked perfectly. Could you elaborate further on what exactly was going on. I thought that the window.onload() would run immedately after the page loads. I apologize if it is a dumb question, I am very new to JS. — Frank Pereny, Jun 03 '17 at 16:55
Sure. Basically whats happening is you are assigning a function to the 'onload' property of the 'window' object. So, window.onload = function(){} just adds the function body. Now, the browser won't invoke the function by itself, so we have to do it ourselves. Thus, window.onload = function(){}() will immediately invoke the function after its creation. The technical term for this is IIFE if you want to learn more about it. — Piyush, Jun 03 '17 at 17:21

score -1 · Answer 4 · answered Jun 03 '17 at 16:41

I recommend using jQuery.

$("#submit").on('click', function(event) {
                event.preventDefault();
                data = $("#link").val();
                $("#frame").attr({
                    src: "http://"+data});
            });

When the submit button is clicked, it changed the iframe url which changed the content of the iframe automatically.

I don't really understand what you are trying to ask, but try to modfiy the code above :)

How to change button URL through JS?

4 Answers4

Linked