enable @Html.editorFor based on checkbox selection

Question

Hi I am still very new to web design and languages including JavaScript.

In a strongly typed cshtml view, is it possible to only show a textfield based on a checkbox (where both the textfield and the checkbox are strongly typed to the model?) I created a example scenario below:

Sample Class:

namespace FruitSurveyNameSpace
{
    public class FruitSurvey 
    {
        public bool likesFruit { get; set; }
        public string fruitName { get; set; }
    }
}

Sample cshtml:

<!DOCTYPE html>
@using FruitSurveyNameSpace
@model FruitSurvey
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <p>Like Fruit? @Html.EditorFor(model => model.likesFruit) </p>
        <p>Which Fruit: @Html.EditorFor(model => model.fruitName)</p>
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

which generates the following html

<form action="/" method="post">
  <input name="__RequestVerificationToken" type="hidden" value="blahValue" />
  <fieldset>
    <legend>Survey</legend>
    <p>likesFruit?
      <input class="check-box" data-val="true" data-val-required="The likesFruit field is required." id="likesFruit1" name="likesFruit1Name" type="checkbox" value="true" />
    </p>
    <p>fruitName
      <input class="text-box single-line" id="fruitName1" name="fruitName1Name" type="text" value="" />
    </p>
  </fieldset>
</form>

As in the sample scenario above, it only makes sense for the user to input the fruit name once he/she selects that he/she likes fruit (dynamically). Otherwise, the fruit name input doesn't have any meaning and should not be displayed. Furthermore, we probably enforce the user to input the fruit name once the he/she selects like fruit checkbox (currently I am using [Required] attribute in non dynamically generated fields and not sure if it would still work if becoming dynamic).

As we can see, both values are strongly typed to the model, and that's why I'm using html helpers. Is there a way to do so without using JavaScript? Or if there isn't, how should I do so in combination with html helpers?

Many thanks in advance.

If you don't use javascript, this'll have to be done with a multi-step wizard, where the user will have to select the checkbox and then POST the form to refresh the page and see the textbox. — Rowan Freeman
– Rowan Freeman, Commented Aug 8, 2014 at 0:02
I am still looking around for how to incorporate JavaScript with html.editorFor. Or must I forgo the html.editorFor? I was looking at plus2net.com/javascript_tutorial/enable-disable.php which looks pretty simple, with a regular input tag and a onclick attribute. But doesn't seem like I can add onclick attribute to html.editorFor... — Banana
– Banana, Commented Aug 8, 2014 at 0:07

score 1 · Accepted Answer · 2014-08-08 01:03:06Z

1

For the validation, you would need a [RequiredIf] attribute. There a many examples on SO or you can look at the MVC Foolproof Nuget package

As Rowan indicated, a 2 step wizard would be required if javascript is not acceptable. If you can use javascript, then its simply a matter of toggling the textbox visibility based on the checked state of the checkbox.

Based on the html above

$('#likesFruit1').click(function() {
  $('#fruitName1').toggle();
});

This assumes that the the checkbox is initially checked, and the textbox is initially visible. Note also that this only toggles the textbox. If you have associated labels and/or text where all the elements are wrapped in a container (say a div) then you might want

$('#fruitName1').closest('div').toggle();

so that the associated elements are also toggled.

edited Aug 8, 2014 at 1:03

answered Aug 8, 2014 at 0:07

user3559349

Sign up to request clarification or add additional context in comments.

8 Comments

Banana Over a year ago

I think JavaScript will be the better route. But is there a way to do so with html.editorFor?

user3559349 Over a year ago

Please add the generated html to your post and I can give you the script to do this (need to see id's, class names etc)

Banana Over a year ago

For sure I can do that, but in the meantime, I thought if we have the cshtml file, the html file will be autogenerated at runtime. Therefore, should we be editing a html file?

user3559349 Over a year ago

Not sure what you mean - I don't want to edit the file, just see what is generated so I can use the correct selectors in the function to toggle the visibility of the textbox. I assume its <input type="checkbox" id="likesFruit".../> and <input type="text" id="fruitName".../> but since you using EditorFor() rather than CheckBoxFor() and TextBoxFor() (suggesting you might have a custom editor template) I cant be sure

Banana Over a year ago

<form action="/" method="post"> <input name="__RequestVerificationToken" type="hidden" value="blahValue" /> <fieldset> <legend>Survey</legend> <p> likesFruit? <input class="check-box" data-val="true" data-val-required="The likesFruit field is required." id="likesFruit1" name="likesFruit1Name" type="checkbox" value="true" /> </p> <p> <input class="text-box single-line" id="fruitName1" name="fruitName1Name" type="text" value="" /> </p> </fieldset> </form>

|

Collectives™ on Stack Overflow

enable @Html.editorFor based on checkbox selection

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related