How to require input by select option from dropdown in ASP.NET Core

Question

I want the desired input to be required when I select a specific option from the dropdown

<select class="form-control" required name="[@i].Ansere" asp-for="@Model.ToList()[i].Ansere">
     <option value="" default="" selected="">انتخاب کنید</option>
     <option value="بله">بله</option>
     <option value="خیر">خیر</option>
     <option value="اقدام شد">اقدام شد</option>
     <option value="عدم نیاز">عدم نیاز</option>
     <option value="ابلاغ">ابلاغ</option>
</select>

<td colspan="3"><input class="form-control text-sm"  placeholder="شرح مورد ارزیابی ..." name="[@i].Discreption" autocomplete="off"/></td>

You can add or remove "rule" dynamically. Check this link stackoverflow.com/questions/3033910/… — Naveen Chandra Tiwari
– Naveen Chandra Tiwari, Commented May 1, 2023 at 5:53

Chen · Accepted Answer · 2023-05-09 01:22:58Z

0

Update2:

Do you mean to add required attribute to input only when Ansere2 is selected? You can add a judgment condition:

function test(newValue)
{
    var Ansere = newValue.value;
    if (Ansere == "Ansere2")
    {
        var selectName = newValue.name;
        var inputName = selectName.replace("Ansere", "Discreption");
        var input = $("input[name="+"'"+inputName+"'"+"]");
                
        $(input).prop('required',true);
    }
}

Update:

If you want to use the name of input, you can refer to my code below:

@for(var i = 0; i  < 5; i++)
{
        <select class="form-control" required name="[@i].Ansere" asp-for="@Model[@i].Ansere" onchange="test(this)">
            <option value="" default="" selected="">انتخاب کنید</option>
            <option value="Ansere1">Ansere1</option>
            <option value="Ansere2">Ansere2</option>
            <option value="Ansere3">Ansere3</option>
            <option value="Ansere4">Ansere4</option>
            <option value="Ansere5">Ansere5</option>
        </select>

        <td colspan="3"><input class="form-control text-sm"  placeholder="شرح مورد ارزیابی ..." name="[@i].Discreption" autocomplete="off"/></td>
}

@section Scripts {
    <script>
        function test(newValue)
        {
            var Ansere = newValue.value;
            var selectName = newValue.name;
            var inputName = selectName.replace("Ansere", "Discreption");
            var input = $("input[name="+"'"+inputName+"'"+"]");
            $(input).prop('required',true);
        }
    </script>
}

------------------------------------------------------------------------------------------------------

If you have multiple selects without id to distinguish, you can refer to my code below.

I wrap select and input in a div, then monitor the change of select:

@model List<TestApp.Models.MyModel>

@for(var i = 0; i  < 5; i++)
{
    <div>
        <select class="form-control" required name="[@i].Ansere" asp-for="@Model[@i].Ansere" onchange="test(this)">
            <option value="" default="" selected="">انتخاب کنید</option>
            <option value="Ansere1">Ansere1</option>
            <option value="Ansere2">Ansere2</option>
            <option value="Ansere3">Ansere3</option>
            <option value="Ansere4">Ansere4</option>
            <option value="Ansere5">Ansere5</option>
        </select>

        <td colspan="3"><input class="form-control text-sm"  placeholder="شرح مورد ارزیابی ..." name="[@i].Discreption" autocomplete="off"/></td>
    </div>
}

@section Scripts {
    <script>
        function test(newValue)
        {
            var Ansere = newValue.value;
            var input = newValue.parentElement.getElementsByTagName('input')[0];
            $(input).prop('required',true);
        }
    </script>
}

TestResult:

Is this what you want?

edited May 9, 2023 at 1:22

answered May 1, 2023 at 2:37

Chen

5,2821 gold badge4 silver badges12 bronze badges

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

9 Comments

sadegh Over a year ago

Please post the image of the result of the code, thank you

sadegh Over a year ago

My friend, I tried this, but it didn't work. Have you test this?

sadegh Over a year ago

What should I put instead newValue?

sadegh Over a year ago

And what does this mean ? getElementsByTagName('input')[0];

Chen Over a year ago

Hi @sadegh, you can see I added onchange event to select, and take this as a parameter. The newValue parameter in the js code is the select element after your selection. newValue.parentElement is the div element on the outer layer of select, getElementsByTagName('input')[0] is the input element in the div.

|

Collectives™ on Stack Overflow

How to require input by select option from dropdown in ASP.NET Core

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related