How To Change Button URL Through JS?

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 s

Solution 1:

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>

Solution 2:

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

Solution 3:

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 :)

Solution 4:

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 :)