Add an URL of list item and add it as a link to the button

I broke my head trying to get an URL value of a list item in my list and add it to the Add to Cart button so that when the user choose an item "20 items" its URL is added to the Add to Cart button url.

For example if the list item "20 items" (<li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>) the Add to cart button should follow to the link https://www.example.com/?add-to-cart=193&variation_id=35435

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

Unfortunately my understanding of javascript is really bad at the moment so I can't understand how to do that on my own. I would much appreciate any help.

asked Nov 23 '18 at 9:12

Jamdev

387215

add a comment |

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

Unfortunately my understanding of javascript is really bad at the moment so I can't understand how to do that on my own. I would much appreciate any help.

asked Nov 23 '18 at 9:12

Jamdev

387215

add a comment |

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

Unfortunately my understanding of javascript is really bad at the moment so I can't understand how to do that on my own. I would much appreciate any help.

asked Nov 23 '18 at 9:12

Jamdev

387215

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

Unfortunately my understanding of javascript is really bad at the moment so I can't understand how to do that on my own. I would much appreciate any help.

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

javascript twitter-bootstrap

asked Nov 23 '18 at 9:12

Jamdev

387215

asked Nov 23 '18 at 9:12

Jamdev

387215

asked Nov 23 '18 at 9:12

Jamdev

387215

asked Nov 23 '18 at 9:12

Jamdev

387215

asked Nov 23 '18 at 9:12

Jamdev

387215

add a comment |

2 Answers
2

active

oldest

votes

On click of the anchor tag get its href and use jquery attr to update the href of the Add to Cart anchor tag

$('.dropdown-menu').on('click', 'a', function(e) {

  e.preventDefault();

  $('#test').attr('href', $(this).attr('href'))



})

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



<ul class="dropdown-menu">

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a id='test' href="" class="btn btn-danger">Add to cart</a>

answered Nov 23 '18 at 9:19

brk

26.8k32040

add a comment |

First you should use some backend script to get params using GET or POST
For example if i am using PHP my code will be like this

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

on cart.php you have to use $_GET["add-to-cart"] & $_GET["variation_id"] to get both the variables

This scenario redirects user to different page. you can also use ajax if you want to perform action without redirection

answered Nov 23 '18 at 9:20

Janak Prajapati

814719

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53443626%2fadd-an-url-of-list-item-and-add-it-as-a-link-to-the-button%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

On click of the anchor tag get its href and use jquery attr to update the href of the Add to Cart anchor tag

$('.dropdown-menu').on('click', 'a', function(e) {

  e.preventDefault();

  $('#test').attr('href', $(this).attr('href'))



})

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



<ul class="dropdown-menu">

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a id='test' href="" class="btn btn-danger">Add to cart</a>

answered Nov 23 '18 at 9:19

brk

26.8k32040

add a comment |

On click of the anchor tag get its href and use jquery attr to update the href of the Add to Cart anchor tag

$('.dropdown-menu').on('click', 'a', function(e) {

  e.preventDefault();

  $('#test').attr('href', $(this).attr('href'))



})

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



<ul class="dropdown-menu">

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a id='test' href="" class="btn btn-danger">Add to cart</a>

answered Nov 23 '18 at 9:19

brk

26.8k32040

add a comment |

On click of the anchor tag get its href and use jquery attr to update the href of the Add to Cart anchor tag

$('.dropdown-menu').on('click', 'a', function(e) {

  e.preventDefault();

  $('#test').attr('href', $(this).attr('href'))



})

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



<ul class="dropdown-menu">

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a id='test' href="" class="btn btn-danger">Add to cart</a>

answered Nov 23 '18 at 9:19

brk

26.8k32040

On click of the anchor tag get its href and use jquery attr to update the href of the Add to Cart anchor tag

$('.dropdown-menu').on('click', 'a', function(e) {

  e.preventDefault();

  $('#test').attr('href', $(this).attr('href'))



})

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



<ul class="dropdown-menu">

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a id='test' href="" class="btn btn-danger">Add to cart</a>

$('.dropdown-menu').on('click', 'a', function(e) {

  e.preventDefault();

  $('#test').attr('href', $(this).attr('href'))



})

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



<ul class="dropdown-menu">

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a id='test' href="" class="btn btn-danger">Add to cart</a>

$('.dropdown-menu').on('click', 'a', function(e) {

  e.preventDefault();

  $('#test').attr('href', $(this).attr('href'))



})

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



<ul class="dropdown-menu">

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>

  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a id='test' href="" class="btn btn-danger">Add to cart</a>

answered Nov 23 '18 at 9:19

brk

26.8k32040

answered Nov 23 '18 at 9:19

brk

26.8k32040

answered Nov 23 '18 at 9:19

brk

26.8k32040

answered Nov 23 '18 at 9:19

brk

26.8k32040

add a comment |

First you should use some backend script to get params using GET or POST
For example if i am using PHP my code will be like this

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

on cart.php you have to use $_GET["add-to-cart"] & $_GET["variation_id"] to get both the variables

This scenario redirects user to different page. you can also use ajax if you want to perform action without redirection

answered Nov 23 '18 at 9:20

Janak Prajapati

814719

add a comment |

First you should use some backend script to get params using GET or POST
For example if i am using PHP my code will be like this

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

on cart.php you have to use $_GET["add-to-cart"] & $_GET["variation_id"] to get both the variables

This scenario redirects user to different page. you can also use ajax if you want to perform action without redirection

answered Nov 23 '18 at 9:20

Janak Prajapati

814719

add a comment |

First you should use some backend script to get params using GET or POST
For example if i am using PHP my code will be like this

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

on cart.php you have to use $_GET["add-to-cart"] & $_GET["variation_id"] to get both the variables

This scenario redirects user to different page. you can also use ajax if you want to perform action without redirection

answered Nov 23 '18 at 9:20

Janak Prajapati

814719

First you should use some backend script to get params using GET or POST
For example if i am using PHP my code will be like this

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



<ul class="dropdown-menu">

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35435">20 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35436">30 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35437">50 items</a></li>

    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35438">100 items</a></li>

</ul>

<a href="" class="btn btn-danger">Add to cart</a>

on cart.php you have to use $_GET["add-to-cart"] & $_GET["variation_id"] to get both the variables

This scenario redirects user to different page. you can also use ajax if you want to perform action without redirection

answered Nov 23 '18 at 9:20

Janak Prajapati

814719

answered Nov 23 '18 at 9:20

Janak Prajapati

814719

answered Nov 23 '18 at 9:20

Janak Prajapati

814719

answered Nov 23 '18 at 9:20

Janak Prajapati

814719

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk