How to change html input type based on another text box value MVC?

Question

I went through similar questions but still unable to figure out.

I have a form as shown below. One of the input type is a hidden. The values for both textboxes are specified by the model passed from the controller.

 <form asp-action="Edit">
     //input one
     <div class="form-group" id="control1">
            <label asp-for="Value" class="control-label"></label>
            <input asp-for="Value" class="form-control" required="required" id="param2" />
            <span asp-validation-for="Value" class="text-danger"></span>
     </div>
     <input type="hidden" asp-for="Type" id="param1" />
 </form>

The default input type is textbox, but suppose if the value of asp-for="Type" is equal to "drop", I want to change the input type to dropdown list with True or False Option. I have tried the following. I added the new form group and assigned id=control2.

       <div class="form-group" id="control2">
            <select asp-for="Value">
                <option value="True">True</option>
                <option value="False">False</option>
            </select>
        </div>

What I did was that, I select the value of param1 using jquery and if it is equal to "bool" then I hide control1 and show control2 (which is wrong). So even though I have selected the value using the dropdownlist from control 2, the textbox value from control1 (which I hide) is being used when POST occurred.

Can someone please advise me on this? Either an alternative method or continue using my method by to use the value of control2

Many thanks in advance!

I read your question multiple times but can't figure out what you mean. Could you post your jQuery to show what you have done / try to do? — Wimanicesir
– Wimanicesir, Commented Mar 4, 2020 at 8:32
may I check which part you are not clear. if the condition is met, want to use enable the dropdown list. that is what I want in short — Wai Yan Maung Oo
– Wai Yan Maung Oo, Commented Mar 4, 2020 at 8:39

Abhishek · Accepted Answer · 2020-03-04 08:47:55Z

1

Instead of using jQuery you can use the razor syntax to add or remove the element from DOM. Update your code as below.

<form asp-action="Edit">
     //input one
	 
	 <input type="hidden" asp-for="Type" id="param1" />
	 @if(Model.Type.Equals("Drop"))
	 {
		 <div class="form-group" id="control2">
            <select asp-for="Value">
                <option value="True">True</option>
                <option value="False">False</option>
            </select>
		</div>
	 }
	 else
	 {
		<div class="form-group" id="control1">
            <label asp-for="Value" class="control-label"></label>
            <input asp-for="Value" class="form-control" required="required" id="param2" />
            <span asp-validation-for="Value" class="text-danger"></span>
		</div>
	 }
     
 </form>

Here if condition is true it will add drop down in DOM else it will append texbox.

Hope it helps.

answered Mar 4, 2020 at 8:47

Abhishek

1,0043 gold badges15 silver badges26 bronze badges

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

1 Comment

Wai Yan Maung Oo Over a year ago

Hi Abishek. This works like a charm. Thank you very much - have a good day!

Collectives™ on Stack Overflow

How to change html input type based on another text box value MVC?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related