jQuery code not running when putting it on an if statement

Question

I'm trying to execute a jQuery script to change the data-url attribute based on which radio button is clicked/selected.

But my code won't work when I put it inside the if statement to check which radio button is active. It will successfully replace the data-url attribute though when executing without an if statement.

$('input[name="radio1"]').on('change', function() {
  if ($(this).val() == 'yearly') {
    var a = $('#samcart').data('url');
    $('#samcart').attr("data-url", "www.urlhere.com");
  } else if ($(this).val() == 'quarterly') {
    var a = $('#samcart').data('url');
    $('#samcart').attr("data-url", "www.url2here.com");
  } else {
    var a = $('#samcart').data('url');
    $('#samcart').attr("data-url", "www.url3here.com");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="samcart" class='samcart-popup-container' style='margin:auto;width:200px;align:center;' data-id='123' data-url='empty'>
  <div class='samcart-popup-button' type='button' class='btn btn-default css3button'>
    Join
  </div>

Hi Nardi, and welcome. Can you provide the code that comprises the ``? — Forty3, Aug 23 '17 at 22:22
Hi Forty3, thank you! `I have some text here` And two other radio buttons with yearly and quarterly values instead of monthly. — Nardi Braho, Aug 23 '17 at 22:45
You shouldn't mix `.attr()` and `.data()` to access data attributes, maybe that's your problem. See https://stackoverflow.com/questions/28335833/get-wrong-value-in-data-attribute-jquery/28335905#28335905 — Barmar, Aug 23 '17 at 23:22
@Barmar I kinda feared that, but how can I make it work since `$('#samcart').attr("data-url", "www.url3here.com");` was the only method that actually changed the data-url value — Nardi Braho, Aug 23 '17 at 23:34
Or `a = $("#samcart").attr("data-url");`. Just be consistent about it, use only `.data()` or `.attr()` for that attribute. — Barmar, Aug 23 '17 at 23:36
Really appreciate your answer @Barmar! However it's not working still. Driving me crazy. The problem seems to be in the if statement, since the code that sets the attribute works fine standalone — Nardi Braho, Aug 24 '17 at 20:23
This is the only button. I have included it's code in the post above. `
Join
` Here is it's default script provided that makes the payment gateway accesible https://samcart.com/assets/templates/popup/embed_scripts/embed.min.js — Nardi Braho, Aug 24 '17 at 20:40
@Barmar Thanks dude, I resolved it in a different approach, but if you have found the solution to the old approach, you're welcome to share it — Nardi Braho, Aug 24 '17 at 22:14
I can't find a solution because I don't understand why your code isn't working. You should post the solution you found as an answer. — Barmar, Aug 24 '17 at 23:09

Ivan Buttinoni · Answer 1 · 2017-08-25T09:52:24.990

EDITED It's seem your code is good, I do not substantial changes, see the jsfille below:

https://jsfiddle.net/7tL6dfft/16/

HTML

<form action='#' method='get'>
<input type="radio" name="radio1" id="yearly" value="yearly"><label class="yearly-label four col" for="yearly">I have some text here</label>
<input type="radio" name="radio1" id="quarterly" value="quarterly"><label class="yearly-label four col" for="yearly">quarterly</label>
<input type="radio" name="radio1" id="weekly" value="weekly"><label class="yearly-label four col" for="yearly">weekly</label>

</form>
<a id="samcart" href='#' data-url='http://exmaple.com'>sam cart url</a>

JS

$(function(){
console.log("start");

$('input[type=radio][name=radio1]').on('change', function() {
  console.log("event",$(this).val());
  if ($(this).val() == 'yearly') {

    $('#samcart').data("url", "www.urlhere.com");
    $('#samcart').html("www.urlhere.com");
    var a = $('#samcart').data('url');
  } else if ($(this).val() == 'quarterly') {

    $('#samcart').data("url", "www.url2here.com");
    $('#samcart').html("www.url2here.com");
    var a = $('#samcart').data('url');
  } else {

    $('#samcart').data("url", "www.url3here.com");
    $('#samcart').html("www.url3here.com");
    var a = $('#samcart').data('url');
  }
  alert("new data-url: "+a);
});
})

May be you were mislead by

your debug, you take the "var a" before change the value
your browser, sometimes the change of attrs is not show by developer tool
the position of the js, you set your JS before the code in the loading chain, see $(function(){})

Thanks but It's still not working. To clarify, I have used multiple methods for adding the if statements and I had no ideas left. None of them worked — Nardi Braho, Aug 23 '17 at 22:48

jQuery code not running when putting it on an if statement

1 Answers1