CODEWITHSUNDEEP
javascriptjqueryhtml
guradio
guradio

Reputation: 15555

get the updated value of data attr jquery

$('select').change(function() {
  var value = $('option:selected', this).val()

  //var sum = parseInt(value);
  if (value < '1') {
    $("#noradiobutton").attr('data-finalvalue', 0);
    $("#input:text").val(0);

  } else {
    console.log(value)
    $('#yesradiobutton').attr('data-finalvalue', value);
    $('#input:text').val(value);
  }


  $('input:text').val(value)

}).change();

$("input:radio[name=yesnoradiobuttongroup]").change(function() {
  var finalvalue;
  if ($("#yesradiobutton").is(':checked')) {
    finalvalue = $(this).data('finalvalue');
    console.log(finalvalue)
    $('input:text').val(finalvalue);
  }
  if ($("#noradiobutton").is(':checked')) {
    finalvalue = $(this).data('finalvalue');
    console.log(finalvalue)
    $('input:text').val(finalvalue);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
  <option></option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
  <option value='5'>5</option>
</select>

<input type='text'>
<span><input type="radio" id="yesradiobutton" name="yesnoradiobuttongroup" value="0" class="InputBoxDe" checked/><label for="yesradiobutton">Yes</label></span>
<span><input type="radio" id="noradiobutton" name="yesnoradiobuttongroup" value="1" class="InputBoxDe" /><label for="noradiobutton">No</label></span>

I have here select input and radio button. When select is change the value is stored in input and also in radio button as data attr. I am getting the first value of data attr but I can't get the updated value to show up in input text. But when checking in the dev tools the value in data attr is changing.

Question: How to get the latest the value of data attr

Scenario: After load select 1 in select option. 1 will be displayed in input and stores in Yes radio button as data attr. If you click No data in input will be 0 clicking Yes will turn it to 1 which is the data attr. Selecting 2 in select will dispay 2 in input and also in data attr of radio button Yes. Clicking No will again put 0 in input and clicking Yes will display 1 instead of 2 which is the current value of data attr.

Requirement: after clicking yes input should display 2 which is the data attr of yes button

FIDDLE DEMO

Upvotes: 0

Views: 96

Answers (1)

shu
shu

Reputation: 1956

Try this instead of using data use attr to read the values

  $("input:radio[name=yesnoradiobuttongroup]").change(function () {
        var finalvalue;
        if ($("#yesradiobutton").is(':checked')) {
            finalvalue = $(this).attr("data-finalvalue")
            console.log(finalvalue)
            $('input:text').val(finalvalue);
        }
        if ($("#noradiobutton").is(':checked')) {
            finalvalue = $(this).attr("data-finalvalue")
            console.log(finalvalue)
            $('input:text').val(finalvalue);
        }
 });

Upvotes: 1

Related Questions