CODEWITHSUNDEEP
jqueryhtmlajax
user7412500
user7412500

Reputation: 1

Radio buttons not updating with jquery

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?

Upvotes: 0

Views: 3264

Answers (3)

Charlie L
Charlie L

Reputation: 463

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/

Upvotes: 2

Paul
Paul

Reputation: 1545

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.

Upvotes: 0

fingerprints
fingerprints

Reputation: 2970

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>

Upvotes: 0

Related Questions