Radio buttons not updating with jquery

Question

I have radio buttons in my code and want them to update like the other variables on the web page when their state is changed

HTML

<TD><Input id="radOn2" name="Nb_var86" type= "radio" Value=1 onClick="this.form.submit();">ON</TD>
<TD><Input id="radOff2" name="Nb_var86" type= "radio" Value=0 onClick="this.form.submit();">OFF</TD>

JavaScript

var timeout;
function bloop() {

    $.ajax({
        url: "/ajax.html",
        success:function(result){
            var array=result.split(','); 
            for(i=0;i<array.length;i++){
                $("input[name='Nb_var"+array[i].substring(0,array[i].indexOf(':'))+"']").val(array[i].substring(array[i].indexOf(':')+1));
            }
        }
    });

    timeout = window.setTimeout(function(){bloop()}, 4000);
}

For the life of me I cannot figure out why the radio buttons wont update. Any help is appreciated.

I have attempted the other examples found in Stack overflow, they did not seem to work. My bloop function updates a list of variables on the web page but the radio buttons (variables in the list) do not get updated unless you refresh the page. I would like to have jquery update the radio button status without refreshing the page

Here is what I have tried : I can see the var on the page so I know that the server and ajax are updating the var:

<TD><Input id="radOn2" name="Nb_var86" type= "radio" Value=1 onClick="this.form.submit();">ON</TD>
<TD><Input id="radOff2" name="Nb_var86" type= "radio" Value=0 onClick="this.form.submit();">OFF<input readonly name= "Nb_var86"style="font-size: 105%;border:none;" value ="<Nb_var86>" size = 2></TD>

then in the script I have tried all of these but no luck actually flipping the radio button:

if($("input[name=Nb_var86]:checked").val()==1){
    $('input:radio[name=Nb_var86][id=radon2]').click();
    //$("#radon2").prop("checked", "checked");
    //$('input:radio[name = Nb_var86]').val(['radon2']);
    //$('#radon2').attr('checked', 'checked');
    //$("input[name = Nb_var86] [id = radon2]").prop('checked', true);
    //$("#radoff2").prop("checked", false).val()==0;
    //$("#radon2").prop("checked", true).val()==1;

Am I missing something?

Unrelated to the question, but it's convention to use lowercase for HTML tags (`` / ``) and attributes `(Value` / `onClick`) — DBS, Jan 18 '17 at 16:35
You don't want to change its value, but whether it's checked. — Ruan Mendes, Jan 18 '17 at 18:15
Possible duplicate of [jQuery set radio button](http://stackoverflow.com/questions/9525128/jquery-set-radio-button) — Ruan Mendes, Jan 18 '17 at 18:16

score 2 · Answer 1 · edited May 23 '17 at 12:08

2

Here's a link to a thread with quite a few options for you to try. You don't want to change its value, but whether it's checked.

jQuery set radio button

I personally like the prop option, something like this

jQuery('[value="radio2"]').prop('checked', true)

Here's the docs for prop http://api.jquery.com/prop/

edited May 23 '17 at 12:08

Community

1
1

answered Jan 18 '17 at 16:29

Charlie L

463
2
12

Paul · Answer 2 · 2017-01-18T18:32:01.353

0

use prop?

$("#radOn2").prop("checked",true);

etc...

I think you would want setInterval for this as well...

var timeout;
function bloop() 
    $.ajax({
        url: "/ajax.html",
        success:function(result){
            var array=result.split(','); 
            for(i=0;i<array.length;i++){
                var arr = array[i];
                var num = arr.substring(0, arr.indexOf(':'));
                $("input[name='Nb_var"+num+"']").val(num+1).prop("checked",true));
            }
        }
    });
}

timeout = setInterval(function(){ bloop(); }, 4000);

I tested this on a fiddle here: https://jsfiddle.net/k4zLvgyr/7/

The fiddle does not have the AJAX but it simply toggles the radio on and off... Let me know if this helps.

edited Jan 18 '17 at 18:32

answered Jan 18 '17 at 16:30

Paul

1,527
2
16
24

I have attempted the $("#radOn2").prop("checked",true); route by putting that in the bloop function, does not work. Is that the correct place to put it? – user7412500 Jan 18 '17 at 16:52
Are you trying to detect the change of the radio? I am trying to figure out how you are calling the bloop() function? Your timeout is set to repeat from within the bloop() function so you need to initialize it first. If you are simply trying to trigger something based on the change of a radio there are other methods. Let me know... – Paul Jan 18 '17 at 16:59
The bloop function is called every 5 seconds first called from onPageLoad and updates a list of variables on the web page, like liveish feed from a micro-controller. The other variables in the /ajax.html file update just fine when the variables in the micro-controller update. If you open second instance of the index.html and change a radio button it does not update on the first one automatically, it only updates if you refresh the page. – user7412500 Jan 18 '17 at 18:04
Skippy, I have been able to see when ajax makes the change in Nb_var86 (either a 1 or 0) and have tried the following: `code` if($("input[name=Nb_var86]:checked").val()==1){ $('input:radio[name=Nb_var86][id=radon2]').click(); //$("#radon2").prop("checked", "checked"); //$('input:radio[name = Nb_var86]').val(['radon2']); //$('#radon2').attr('checked', 'checked'); //$("input[name = Nb_var86] [id = radon2]").prop('checked', true); //$("#radoff2").prop("checked", false).val()==0; //$("#radon2").prop("checked", true).val()==1; }`code` – user7412500 Jan 21 '17 at 13:24
Are you trying to toggle the value from 1 to 0 and show the checked radio correctly? It looks like you are trying to click an element with the .click() function after its inserted in the DOM. This may not work correctly. You may be better off simply presetting the element, like if($("input[name='Nb_var86']").is(":checked")){ ... toggle the value here ... } – Paul Jan 23 '17 at 18:26
Paul, the radio buttons show the correct 'checked' on page load. if the server side changes their value they remain unchanged in a loaded web page. Using jquery I can see their value change, but the checked stays where it was on page load. – user7412500 Jan 25 '17 at 23:48
Is the setIntrval or setTimeout still functioning after the AJAX request? You may need to reset the timer after the server load. – Paul Jan 27 '17 at 01:55
Yes the timeout and AJax requests run every 5 seconds but the radio buttons with not flip state on a loaded page, I can display their value and can see it change be the buttons...not so much so :( – user7412500 Jan 27 '17 at 03:58
Hmm, what version of jQuery are you using? – Paul Jan 27 '17 at 04:04

score 0 · Answer 3 · answered Jan 18 '17 at 16:50

You can use props or attr or val.

Here the example:

<!DOCTYPE html>
<html>
<body>

    <input id="radOn2" name="Nb_var86" type= "radio" value=1 onClick=""/>ON
    <input id="radOff2" name="Nb_var86" type= "radio" value=0 onClick=""/>OFF

   <p>Click in the button.</p>

   <button onclick="fn()">Try it</button>

   <script src="http://code.jquery.com/jquery-3.1.1.min.js">
   </script>
   <script type="text/javascript">
       function fn() {
           $("input[name=Nb_var86][value=1]").attr('checked', 'checked');
           $("input[name=Nb_var86][value=0]").prop('checked',true);
           $("input[name=Nb_var86]").val([1,0]); //With an array
           $("input[name=Nb_var86]").val([0,1]);
       }
   </script>
</body>
</html>

Radio buttons not updating with jquery

3 Answers3