JavaScript redirect to next page error

Question

I am totally noob for javascript, I just started to learn and I stuck. I am working on ASP.NET app and in my view I create JavaScript function that need to check If checkbox is checked and It need to redirect to next View either if option is Yes or No. For option Yes work perfectlly, but when I select "No" it display required message and in console I get error

Uncaught TypeError: Cannot read property 'checked' of null at YesNoChecked (CreateManually:940) at HTMLButtonElement.onclick (CreateManually:886)

So my code so far

    function YesNoChecked() {
        var Yes = document.getElementById('Yes');
        var No = document.getElementById('No');

        if (document.getElementById('Yes').checked ==true) {
            console.log('Successfull');
        }
        if (document.getElementById('No').checked==false) {
            console.log('Error');
        }
    }

HTML

<div class="form-group">
  @Html.LabelFor(model => model.Chapel, htmlAttributes: new { @class = "control-label col-md-3" })
  <div class="col-md-9">
  <label class="radio-inline">
    @Html.RadioButtonFor(model => model.Chapel, "Yes", new { @class = "styled", htmlAttributes = new { @checked = "true" } })
    Yes
  </label>
  <label class="radio-inline">
    @Html.RadioButtonFor(model => model.Chapel, "No", new { @class = "styled", htmlAttributes = new { @checked = "true" } })
    No
  </label>
    @Html.ValidationMessageFor(model => model.Chapel, "", new { @class = "text-danger" })
  </div>
</div>

So basically, either choice is selected "No" or "Yes" it need to redirect to next View, but when choice is selected to "No" it need to hidden element called Chapel. Please help guys :/

If you need some more code let me know, I will publish

UPDATE

Button click

 <button type="submit" onclick="YesNoChecked()" class="btn btn-success"><i class="icon icon-check position-left"></i> Proceed to Payment</button>

Radiobutton Yes HTML

   <input class="styled" htmlattributes="{ checked = true }" id="Chapel" name="Chapel" type="radio" value="Yes" autocomplete="off">

Radiobutton No HTML

<input checked="checked" class="styled" htmlattributes="{ checked = true }" id="Chapel" name="Chapel" type="radio" value="No" autocomplete="off">

Amongst other things: you are creating radio buttons, not checkboxes. — Marco, Jun 08 '18 at 08:20
Please click the `<>` and create a [mcve] using RENDERED HTML - the question is not related to ASP assuming you give the elements correct IDs — mplungjan, Jun 08 '18 at 08:21
I don't know asp.net, but I think you are missing id's in your HTML. What do you get if you `console.log(document.getElementById('Yes'))` ? — onetwo12, Jun 08 '18 at 08:21
Any your code could be `function YesNoChecked() { var Yes = document.getElementById('Yes'); var No = document.getElementById('No'); if (Yes.checked) { console.log('Successfull'); } if (No.checked) { console.log('Error'); } }` — mplungjan, Jun 08 '18 at 08:23
@mplungjan Yes I know that question is not related to ASP but I am just saying that I am working on ASP application and I need to complete this JavaScript part, which is not familiar to me so much — , Jun 08 '18 at 08:24
@onetwo12 I get console.log(document.getElementById('Yes')) VM2772:1 null undefined — , Jun 08 '18 at 08:25
Googling `@Html.RadioButtonFor asp ID` I get https://forums.asp.net/t/2032957.aspx?How+to+add+an+unique+ID+to+Html+RadioButtonFor+ — mplungjan, Jun 08 '18 at 08:27
This `document.getElementById('Yes')` is looking for element with `id="Yes"` somewhere in your HTML, from the console.log I can conclude that you don't have that. And maybe you will need this later https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t — onetwo12, Jun 08 '18 at 08:28

Marco · Accepted Answer · 2018-06-08T08:36:07.850

Your code to generate a check box is wrong. At least in asp.net core you should receive the error "No overload for method 'CheckBoxFor' takes 3 arguments"

If Chapel in your model is a bool property, this creates a checkbox for it:

@Html.CheckBoxFor(m => m.Chapel, new { id="Yes", @class = "styled", htmlAttributes = new { @checked = "true" } })

If you want radio buttons:

@Html.RadioButtonFor(model => model.Chapel, true, new { id = "Yes", @class = "styled" }) Yes <br/>
@Html.RadioButtonFor(model => model.Chapel, false, new { id = "No", @class = "styled" }) No

This will properly create two html elements for you with the Ids Yes and No and will let your js work:

function YesNoChecked() {
    var Yes = document.getElementById('Yes');
    var No = document.getElementById('No');

    if (Yes.checked ==true) {
        console.log('Successfull');
    }
    if (No.checked==false) {
        console.log('Error');
    }
}

Insed of console.log I need to redirect to next View But however Thank you @Marco — , Jun 08 '18 at 08:38

JavaScript redirect to next page error

1 Answers1