Onchange event on a radio button doesn't work

Question

I have this group of radio button:

{% for user in users %}

        <form name="form_user_{{ user.id }}" method="post" action="/networks/{{ net.id }}/sensors/{{ sens.id }}/rights">
          <tr>
            <td>
              <div>
                {{ escape(user.name) }}
                <input type='hidden' name="id" value='{{ user.id }}'>
              </div>
            </td>
            <td>

              <label class="radio inline" onchange="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_0" value="0">
                None
              </label>
              <label class="radio inline" onchange="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_1" value="1">
                Read
              </label>
              <label class="radio inline" onchange="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_4" value="4">
                Read + Commands
              </label>

              {{ xsrf_form_html() }}
            </td>

          </tr>
        </form>
        {% end %}

I have a js function that change the check on the radio buttons and, when the radio button checked change, I would the form submit working. If I click on the radio button everything works fine. But if I use the js function that change the check, this don't work. Why?

Thank you.

EDIT

This is my js function:

<script>
function checkall(perm){

var permall = parseInt(perm);

switch (permall){
case 0:
    {% for user in users %}
    document.getElementById("perms_{{user.id}}_0").checked=true
    {% end %}
    break;
case 1:
    {% for user in users %}
    document.getElementById("perms_{{user.id}}_1").checked=true
    {% end %}
    break;
case 4:
    {% for user in users %}
    document.getElementById("perms_{{user.id}}_4").checked=true
    {% end %}
    break;
  }
}
</script>

score 2 · Accepted Answer · edited May 23 '17 at 12:28

Maybe because the JS don't trigger the onchange event. You have to trigger it by yourself.

Explanation to trigger event manually here : StackOverflow topic

[BEST IDEA]

After thinking, i think the best way is to call the form action url in an Ajax method.

With jQuery it could be something like :

var changeRadio = function(callback, checkedData) {
    $.ajax({
       type : 'POST',
       url : callback,
       data : checkedData,
       success : function() {
          //if you wan't, you can do something
        }
    });

};

And in your switch : EDIT (replace coma by colon in the second parameter)

    {% for user in users %}
        document.getElementById("perms_{{user.id}}_0").checked=true;
        changeRadio(document.forms['form_user_{{ user.id }}'].action, {document.getElementById("perms_{{user.id}}_0").name:document.getElementById("perms_{{user.id}}_0").value});
    {% end %}
    break;

Thanks to jQuery

All jQuery method :

var changeRadio = function(callback, inputElement) {
    var element = inputElement; //By creating a global var, you're able to access it into success function
    $.ajax({
       type : 'POST',
       url : callback,
       data : {$(element).attr('name'):$(element).val()},
       success : function() {
          $(element).attr('checked', true);
        }
    });

};

function checkall(perm){

    var permall = parseInt(perm);
    $('input:checkbox[value="'+permall+'"]').each(function() {
       changeRadio($(this).parent('form').attr('action'), $(this));
    });
}

Last edit

JS

 var changeRadio = function(callback, inputElement, form) {
    var element = inputElement; //By creating a global var, you're able to access it into success function
    console.log(form);
    $.ajax({
        type : 'POST',
        url : callback,
        data : $(form).serialize(),
        success : function() {
             $(element).attr('checked', true);
        }
});
};

var checkall = function (perm){
    var permall = parseInt(perm);
    $('input:radio[value="'+permall+'"]').each(function() {
        changeRadio($('#form_user_'+$(this).attr('user_id')).attr('action'), $(this),$('#form_user_'+$(this).attr('user_id')));
    });
}

$(document).ready(function() {
    $('.checkallCaller').on('click', function() {
        checkall($(this).attr('rel'));
    });
});

And in HTML, add 'checkallCaller' class to each labels of check all radio, and add user_id attribute to user radio. (It's not w3c but it work's)

I edit the question with my js function. Anyway, can it be that I change only the label element, don't the radio buttons? How can I do? — sharkbait, Mar 18 '13 at 10:30
When the radio button checked change I want submit the form! — sharkbait, Mar 18 '13 at 10:36
If I have a list of users, it submit only the form of the last user of the list. something like the for loop doesn't work. The solution with jQuery anyway is very interesting. I think I have to do in this direction. — sharkbait, Mar 18 '13 at 11:00
In fact, i've added jQuery solution because of the limit of the previous one. — JoDev, Mar 18 '13 at 11:09
Why you pass like checkedData name and value? I think it's not the same I usually pass to my form. I think the error is here. — sharkbait, Mar 18 '13 at 11:13
**Are you using jQuery now?** Have you change the **perms_{{user.id}}_0** in each `CASE`? I'm sending data in this form, bBecause to make a POST (which work on submit) working with Ajax, you have to send data like `array['elementName'] = elementValue`. Because in your PHP, i think you use `$_POST['elementName']`. (Can you add your PHP treatment, to adapt the code) — JoDev, Mar 18 '13 at 12:51
For infromation, in my previous method, i was wrong in the second parameter (the data array), you have to replace **coma** by **colon** in `{document.getElementById("perms_{{user.id}}_0").name,document.getElementById("perms_{{user.id}}_0").value}` for the call to work. — JoDev, Mar 18 '13 at 13:14
Youre method seems to me very good. But I don't know why doesn't work. It's something like nothing happen. Do I have to include some libreries to jQuery? — sharkbait, Mar 18 '13 at 14:16
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/26384/discussion-between-jodev-and-sharkbait) — JoDev, Mar 18 '13 at 14:20

Onchange event on a radio button doesn't work

1 Answers1