CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvc
Nando
Nando

Reputation: 388

RadioButtonFor doesn't call onchange after load the page

not sure the title makes sense, but I have the code bellow to hide/show some fields when we select a yes/no radiobutton

<div class="container" style="width:100%;margin-top:2%">
@if (Model != null)
{
    using (Html.BeginForm("NextButton_Click", "Questionnaire", FormMethod.Post))
    {
        <table class="table table-hover">
            <tbody>
                @for (int i = 0; i < Model.QuestionsPaging.Count(); i++)
                {
                    ...
                    <tr>
                        <td>
                            <p>
                                @Html.RadioButtonFor(n => n.QuestionsAnswers[index].HasAnswer, false, new { @radioIndex = i, @onchange = "CallChangefunc(this)" }) @Html.Label("No")
                                @Html.RadioButtonFor(n => n.QuestionsAnswers[index].HasAnswer, true, new { @radioIndex = i, @onchange = "CallChangefunc(this)" }) @Html.Label("Yes")
                            </p>
                            <div id="div_questions_@i" style="display:none">
                                ...
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }
}

<script type="text/javascript">
    function CallChangefunc(myRadioButton) {
        var divName = "div_questions_" + myRadioButton.getAttribute("radioIndex");
        var divElement = document.getElementById(divName);

        if ($(myRadioButton).val().toLowerCase() === "true") {
            if (divElement.style.display != 'inline') {
                divElement.style.display = 'inline';
            }
        } else {
            if (divElement.style.display != 'none') {
                divElement.style.display = 'none'
            }
        }
    }
</script>

The code works fine, I click the radiobutton and it hides/shows the divs as expected. The problem I'm having is that when I load the form it selects the RadioButton as expected but the event 'onchange' doesn't get triggered, so I have all fields hidden even with some radiobuttons set to yes.

I don't have too much experience in web, not sure how can I fix it, I've tried some stuffs but didn't work, any help is welcome.

Thank you.

Solution: Thanks @jom

I added " $(':radio[id^="QuestionsAnswers"]').trigger('change');" and checked if the radiobutton is checked, because ".trigger('change')" trigger the event for every radiobutton, now I have:

<script type="text/javascript">
    $(document).ready(function () {
        $(':radio[id^="QuestionsAnswers"]').trigger('change');
    });

    function CallChangefunc(myRadioButton) {
        var divName = "div_questions_" + myRadioButton.getAttribute("radioIndex");
        var divElement = document.getElementById(divName);

        if ($(myRadioButton).val().toLowerCase() === "true" && myRadioButton.checked) {
            if (divElement.style.display != 'inline') {
                divElement.style.display = 'inline';
            }
        } else if ($(myRadioButton).val().toLowerCase() === "false" && myRadioButton.checked) {
            if (divElement.style.display != 'none') {
                divElement.style.display = 'none'
            }
        }
    }
</script>

Upvotes: 0

Views: 502

Answers (2)

Ali Maleki
Ali Maleki

Reputation: 300

Add $(document).ready before function CallChangefunc(myRadioButton)

Upvotes: 0

Yom T.
Yom T.

Reputation: 9200

Do this on either $(document).ready or before the closing </body> tag.

  $(':radio[id^="QuestionsAnswers"]').trigger('change');

  // Or attach the handlers by script instead of going through Razor engine

  $(':radio[id^="QuestionsAnswers"]').change(function () {
    CallChangefunc(this);
  });

Upvotes: 1

Related Questions