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

<inputtype="hidden"id="input-book-type"type=""value="GlassCrystal"><br><br><selectid="select-page-size"><optionvalue="6x6">6" x 6"</option><optionvalue="10x10">10" x 10"</option></select><br><br><selectid="select-page-num"><optionvalue="20">20</option><optionvalue="22">22</option></select><br><br><inputid="input-project-title"type=""value="Optional Project Title"><br><br><aclass="button"id="design-button"href="http://test/">Design Now</a>

Solution 2:

Here is example code:

<ahref="#"id="abc">jhg</a><ahref="#"id="myLink">jhhghj</a><scripttype="text/javascript">document.getElementById("myLink").onclick = function() {
   document.getElementById("abc").href="xyz.php"; 
   returnfalse;
};
</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 :)