Selecting a specific element from multiple forms

user_11221143 0
Viewed 207

I'm trying to select a specific element from multiple forms but it's not working properly:

So my javascript code is:

function makeActive(target)
{
    $("div.interactive").removeClass("interactive");
    $("#form" + target).addClass("interactive");
}

$(document).ready(function () {
    $('.interactive option[name=bu]').on('change', function () {
        $('.interactive option[name=discipline]').empty();
        $('.interactive option[name=project]').empty();
        $('.interactive option[name=role]').empty();
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetList", "Central")',
            dataType: 'Json',
            data: { InitiateId: $('.interactive option[name=bu]').val(), InitiateType: "BU" },
            success: function (data) {
                console.log("That was calling")
                $('.interactive option[name=discipline]').append('<option value="">Select</option>');
                $.each(data, function (index, value) {
                    $('.interactive option[name=discipline]').append('<option value="' + value.Id + '">' + value.Name + '</option>');
                });
                $('.interactive option[name=project]').append('<option value="">Select Discipline firt</option>');
                $('.interactive option[name=role]').append('<option value="">Select Project first</option>');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    });

And cshtml struct page is: 

    <div id="faq" role="tablist" aria-multiselectable="true">
        @foreach (var actor in Model)
        {
        string areacontrol = "answer" + actor.Id;
        count +=1;
        bool open = false;

        if (ViewBag.actor != null)
        {
        if (actor.Id == ViewBag.actor.Id)
        {
        open = true;
        }
        }
        else
        {
        if (count == 1)
        {
        open = true;
        }
        }

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="questionOne">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#faq" href="#@areacontrol" aria-expanded="false" aria-controls="answerOne"
                        onclick=" makeActive(@actor.Id)">
                        @actor.Name (@actor.Email)
                    </a>
                </h5>
            </div>
            <div id="@areacontrol" class="panel-collapse collapse @(open?" in":"")" role="tabpanel" aria-labelledby="questionOne">
                <div class="panel-body">
                    @using (Html.BeginForm("Assign", "Central", FormMethod.Post))
                    {
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    string form = "form" + actor.Id;
                    <div class="row form-group @(open?" interactive":"")" id="@form">
                        <div class="col-md-3 col-md-offset-0">
                            <label for="bu">Business Unit</label>
                            <select name="bu" class="form-control">

                                <option value="">--Select--</option>
                                @foreach (var item in flowcontext.ContiBusinessUnits.ToList())
                                {
                                if (ViewBag.bu != null && actor.Id == ViewBag.actor.Id)
                                {
                                bool selected = false;
                                if (ViewBag.bu.Name == item.Name)
                                {
                                selected = true;
                                }
                                if (selected)
                                {
                                <option value="@item.Id" selected>@item.Name</option>
                                }
                                else
                                {
                                <option value="@item.Id">@item.Name</option>
                                }
                                }
                                else
                                {
                                <option value="@item.Id">@item.Name</option>
                                }
                                }
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="discipline">Discipline</label>
                            <select name="discipline" class="form-control">
                                @if (ViewBag.discipline != null && actor.Id == ViewBag.actor.Id)
                                {
                                <option value="@ViewBag.discipline.ID">@ViewBag.discipline.Name</option>
                                }
                                else
                                {
                                <option value="">Select Business Unit first</option>
                                }
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="project">Project</label>
                            <select name="project" class="form-control">
                                @if (ViewBag.project != null && actor.Id == ViewBag.actor.Id)
                                {
                                <option value="@ViewBag.project.ID">@ViewBag.project.Name</option>
                                }
                                else
                                {
                                <option value="">Select Discipline first</option>
                                }
                                ViewBag.role_id = contiRole;
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="destination">Role</label>
                            <select name="role" class="form-control">
                                @if (ViewBag.role != null && actor.Id == ViewBag.actor.Id)
                                {
                                <option value="@ViewBag.role.ID">@ViewBag.role.Name</option>
                                }
                                else
                                {
                                <option value="">Select Project first</option>
                                }
                            </select>
                        </div>
                        <div class="col-md-3" style="display:none">
                            <label for="destination">User Id</label>
                            <select name="userid" class="form-control">
                                <option value="@actor.Id" selected>@actor.Name</option>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-3 col-md-offset-8">
                            <input type="submit" class="btn btn-primary btn-block" value="Add">
                        </div>
                    </div>
                    }
                </div>
            </div>
        </div>
        }
    </div>

<!--end language: lang-html -->

In that inside a foreach loop, I load/ generate a form. First: The bootstrap collapse will be open for the first user(actor); Inside, I have a form with is necessary to be similar and be a cascade drop select!

When I make a change[ $('.interactive option[name=bu]').on('change', function (){}]that calls for me a controller method which returns me a list and with that list a generate the second field and again for other 2 field! That helps me to make a cascade select for a form and that works well but only for the first one!

I think either I'm not making the selections properly or using ajax, "$ (document) .ready" does not get the data properly. How I can select properly or tell others methods!
How can improve that and make it work for all form elements?

razor html jquery ajax javascript
2 Answers

Hi in this example we get the selected value from a dropdown list in different forms using a commun class the elements share and then we save that value inside an array which contains the name of the dropdown list, the selected value and the selected value text.

let options = document.querySelectorAll('.cmbMsg');
//get all select boxes with the same class
var values = [];
options.forEach(function(option) {
values.push({"item":option.getAttribute("name"),"value":option[option.selectedIndex].value,"text":option[option.selectedIndex].text});
});

console.log(values);
.cmbMsg {
  font-size:14px;
}
<form action="" id="form1">
  <select name="select1" id="select1" class="cmbMsg">
    <option value="1" selected>Hello </option>
    <option value="2">My friend</option>
  </select>
</form>
<br>

<form action="" id="form2">
  <select name="select2" id="select2" class="cmbMsg">
    <option value="1">Hola</option>
    <option value="2" selected>Mundo</option>
  </select>
</form>

<br>

<form action="" id="form3">
  <select name="select3" id="select3" class="cmbMsg">
    <option value="1">Viva</option>
    <option value="2" selected>la France</option>
  </select>
</form>

Hope it helps

user_77873670

I found the solution!

The problem was that I did not recognize my selections after we came up with a change using ajax and I just load all my field immediately after the page load and group them for each form!

 $(form + 'select[name=bu]').on('change', function (){};

And I just call a function for getting all actorid and pushing on a list and "leasing" for all field;

user_112211430
Related