Trying to change a link on button click with javascript

Question

I have three buttons and i want such tha when i click on one button the link on an a tag changes

<a  class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>

<button class="goldpac">Choose Plan</button>
<button class="silverpac">Choose Plan</button>
<button class="bronzepac">Choose Plan</button>

I want such that when i click on one button, it changes the link at .payverlink

I have tried

function bronze()
    {
        $('.payverlink').href="exbronzeregistrationform.php";
    }
    function silver()
    {
        $('.payverlink').href="exsilverregistrationform.php";
    }

<button class="silverpac" onclick="silver()">Choose Plan</button>
<button class="bronzepac" onclick="bronze()">Choose Plan</button>

But this changes to bronze function onclick of any of the buttons. Please whats the issue.

Tried that also $('.bronzepac').click(function () { $('.payverlink').setAttribute('href', 'exbronzeregistrationform.php'); }); $('.silverpac').click(function () { $('.payverlink').setAttribute('href', 'exsilverregistrationform.php'); }); .but thisalso had the same issue — diagold
– diagold, Commented Jun 22, 2017 at 12:00

Vasiliki M. · Accepted Answer · 2017-06-22 12:14:18Z

You could set your javascript code to trigger the button click and avoid using the onclick into html

$(document).ready(function() {
   $("button").on('click', function(){

       if ($(this).hasClass('goldpac')) {
           window.location="http://..."; /* or exbronzeregistrationform.php for example */
       } else if ($(this).hasClass('silverpac')) {
           window.location="http://..."; /* or exbronzeregistrationform.php for example */
       } else if ($(this).hasClass('bronzepac')) {
           window.location="http://..."; /* or exbronzeregistrationform.php for example */
       }
   });
});

You could add one more line in each case changing the a tag, but ti wont make a huge difference in your actions as it isn't used as you click the buttons.

$("a.payverlink").attr("href", "http://...."); /* or exbronzeregistrationform.php for example */

So, you could just remove the 'href' as you contantly will change the url from js.

obinoob · Accepted Answer · 2017-06-22 12:19:22Z

1

Use attr or prop, attr stands for attribute and prop for property!

$(
  function(){
    $('#google').attr('href', 'https://duckduckgo.com/');
    //or use prop
    $('#duckduckgo').prop('href', 'https://bing.com')
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Learning</title>
</head>
<body>
<h1 class="header"></h1>
<a id="google" href="https://google.com/">google is down!</a>
<br>
<a id="duckduckgo" href="https://duckduckgo.com/">I'm slow...</a>
</body>
</html>

answered Jun 22, 2017 at 12:19

obinoob

6595 gold badges13 silver badges34 bronze badges

Comments

Andrius Jasiukevičius · Accepted Answer · 2017-06-22 12:03:31Z

0

I suspect that both functions are failing, since there is no such property href on JQuery object.

Use this approach instead:

$('.payverlink').prop("href","exbronzeregistrationform.php");

answered Jun 22, 2017 at 12:03

Andrius Jasiukevičius

1114 bronze badges

Comments

user8193706 · Accepted Answer · 2017-06-22 12:05:19Z

0

Have you try .prop() method of jQuery hopefully it works .

function bronze()
{
    $('.payverlink').prop('href','exbronzeregistrationform.php');
}
function silver()
{
    $('.payverlink').prop('href','exsilverregistrationform.php');
}

answered Jun 22, 2017 at 12:05

user8193706

2,4552 gold badges11 silver badges14 bronze badges

Comments

Sagiv b.g · Accepted Answer · 2017-06-22 12:05:50Z

0

You can use the .attr function:

function bronze(){
  changeLink('exbronzeregistrationform');
}
function silver(){
  changeLink('exsilverregistrationform.php');
}

function changeLink(url){
  $('.payverlink').attr('href',url);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a  class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>

<button class="silverpac" onclick="silver()">Choose Plan silverpac</button>
<button class="bronzepac" onclick="bronze()">Choose Plan bronzepac</button>

answered Jun 22, 2017 at 12:05

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Comments

Nirav Joshi · Accepted Answer · 2017-06-22 12:05:53Z

0

function bronze()
{
    $('.payverlink').attr("href","exbronzeregistrationform.php");
}
function silver()
{
    $('.payverlink').attr("href","exsilverregistrationform.php");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a  class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>

<button class="goldpac">Choose Plan</button>
<button class="silverpac" onclick="silver()">Choose Plan</button>
<button class="bronzepac" onclick="bronze()">Choose Plan</button>

You can try this. it will helps you. :)

answered Jun 22, 2017 at 12:05

Nirav Joshi

2,9701 gold badge25 silver badges46 bronze badges

Collectives™ on Stack Overflow

Trying to change a link on button click with javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related