kkakadiya Ответов: 1

JQuery как сделать текстовое поле и выпадающий список значений внутри div в массив

Привет,

В основном в jQuery я клонирую div несколько раз, и внутри него у меня есть 3 текстовых поля и выпадающий список. Теперь я хочу получить 3 текстовых поля и одно выпадающее значение внутри каждого div в массиве и хочу передать это в контроллер.
Экс: 


<div class="col-md-12 m-t-5 NewVehicle">
                                            
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                                <div class="form-group">
                                                    <label for="VehicleYear">Year/Make</label><span class="text-danger">*</span>
                                                    <div style="display:flex;">
                                                        <input class="form-control m-r-5" id="txtVehicleYear" type="text" />
                                                        <input class="form-control" id="txtVehicleMake" type="text">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="VehicleModel">Model</label><span class="text-danger">*</span>
                                                    <input class="form-control" id="txtVehicleModel" type="text">
                                                </div>
                                                <div class="form-group">
                                                    <label for="VehicleType">Vehicle Type</label><span class="text-danger">*</span>
                                                    @Html.DropDownListFor(Model => Model.lstVehicleType, new SelectList(Model.lstVehicleType, "Value", "Text"), new { @class = "form-control", @id = "ddlNewVehicleType" })
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                            </div>
                                        </div>


Что я уже пробовал:

Я пробовал использовать jquery, но все значения внутри находятся в одном массиве.
var inputArray = [];
$('#dvNewVehicle').найти("выберите, текста, ввода").каждый(функция () {
var cntrlId = $(this). attr ('id');
inputArray.метод push($("#" + cntrlId + "").функция val().отделка());
});

выше возвращает мне value1, value2, value3, value4, value5, value6, но я хочу, чтобы он был [{value1, value2, value3}, {value4, value5, value6}].
одно значение div в одном списке.

1 Ответов

Рейтинг:
1

F-ES Sitecore

Несколько проблем, прежде всего http и формы работали нормально задолго до того, как был изобретен js, вам не нужно, чтобы js выполнял базовый http, например отправлял данные формы в действие. Далее вы дублируете идентификаторы, а идентификаторы должны быть уникальными; их дублирование может привести к неожиданному поведению. Кроме того, идентификаторы используются только для js, css и т. д., Они не представляются с формой, для этого вам нужно "имя".

Самое простое решение вашей проблемы-изменить ваши идентификаторы на имена и изменить целевое действие

<div class="col-md-12 m-t-5 NewVehicle">
                                            
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <div class="form-group">
            <label for="VehicleYear">Year/Make</label><span class="text-danger">*</span>
            <div style="display:flex;">
                <input class="form-control m-r-5" name="txtVehicleYear" type="text" />
                <input class="form-control" name="txtVehicleMake" type="text">
            </div>
        </div>
        <div class="form-group">
            <label for="VehicleModel">Model</label><span class="text-danger">*</span>
            <input class="form-control" name="txtVehicleModel" type="text">
        </div>
        <div class="form-group">
            <label for="VehicleType">Vehicle Type</label><span class="text-danger">*</span>
            <select name="ddlNewVehicleType">
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    </div>
</div>


[HttpPost]
public ActionResult Index(string[] txtVehicleYear, string[] txtVehicleMake, string[] txtVehicleModel, string[] ddlNewVehicleType)
{
    // you'll probably want some validation that all arrays are the same length

    for (int i = 0; i < txtVehicleYear.Length; i++)
    {
        string year = txtVehicleYear[i];
        string make = txtVehicleMake[i];
        string model = txtVehicleModel[i];
        string type = ddlNewVehicleType[i];
    }

    return View();
}


Обновление

Ниже приведены два divs (я жестко закодировал их для простоты) внутри формы, которая затем отправляется через ajax и сериализацию

<form id="myForm">
    <div class="col-md-12 m-t-5 NewVehicle">

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <div class="form-group">
                <label for="VehicleYear">Year/Make</label><span class="text-danger">*</span>
                <div style="display:flex;">
                    <input class="form-control m-r-5" name="txtVehicleYear" type="text" />
                    <input class="form-control" name="txtVehicleMake" type="text">
                </div>
            </div>
            <div class="form-group">
                <label for="VehicleModel">Model</label><span class="text-danger">*</span>
                <input class="form-control" name="txtVehicleModel" type="text">
            </div>
            <div class="form-group">
                <label for="VehicleType">Vehicle Type</label><span class="text-danger">*</span>
                <select name="ddlNewVehicleType">
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        </div>
    </div>

    <div class="col-md-12 m-t-5 NewVehicle">

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <div class="form-group">
                <label for="VehicleYear">Year/Make</label><span class="text-danger">*</span>
                <div style="display:flex;">
                    <input class="form-control m-r-5" name="txtVehicleYear" type="text" />
                    <input class="form-control" name="txtVehicleMake" type="text">
                </div>
            </div>
            <div class="form-group">
                <label for="VehicleModel">Model</label><span class="text-danger">*</span>
                <input class="form-control" name="txtVehicleModel" type="text">
            </div>
            <div class="form-group">
                <label for="VehicleType">Vehicle Type</label><span class="text-danger">*</span>
                <select name="ddlNewVehicleType">
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        </div>
    </div>
</form>

<input value="Click" type="button" onclick="submit()"/>

<script>
    function submit() {
        $.ajax({
            method: 'POST',
            url: '@Url.Action("Index", "Home")',
            data: $("#myForm").serialize()
        });
    }

</script>


Метод контроллера такой же, как и выше

kkakadiya

Я делаю AJAX-вызов вместо отправки формы.

F-ES Sitecore

Сериализуйте значения формы и используйте их в качестве данных, google "jQuery serialise form data", у него есть довольно простые методы для этого.

kkakadiya

У меня есть уникальные идентификаторы,так как я даю индекс Id. ex: txtVehicleYear-1,txtVehicleYear-2, -3 и т. д., И это для каждого текстового поля и выпадающего списка.
Новый код кнопки автомобиля

var id = 0;
$("#btnAddVehicle"). click (функция () {
$(".NewVehicle"). clone (). attr ('id', 'dv -' + (id += 1)).addClass('addVechicle').insertAfter('.NewVehicle').removeClass("NewVehicle").appendTo("#dvNewVehicle");
$(".addVechicle"). css ("display", " inline");
$(".addVechicle").найти('#btnClearVehicle').буква attr('идентификатор', 'btnClearVehicle-' + ИД).буква attr('onclick функции', 'RemoveAddVehicle(' + ИД + ')');
$(".addVechicle").найти('#txtVehicleYear').буква attr('идентификатор', 'txtVehicleYear-' + ИД);
$(".addVechicle").найти('#txtVehicleMake').буква attr('идентификатор', 'txtVehicleMake-' + ИД);
$(".addVechicle").найти('#txtVehicleModel').буква attr('идентификатор', 'txtVehicleModel-' + ИД);
$(".addVechicle").найти('#ddlNewVehicleType').буква attr('идентификатор', 'ddlNewVehicleType-' + ИД).буква attr('имя', 'ddlNewVehicleType-' + ИД);
});

F-ES Sitecore

Вы можете сохранить удостоверения личности, это не проблема, просто убедитесь, что у них одно и то же имя.

Кроме того, вы уже видите, сколько этой информации не было в вашем первоначальном вопросе? Чтобы получить более точные ответы, вы должны заранее предоставить всю необходимую информацию.

kkakadiya

извините за это, я опубликовал то, что является ядром вопроса.

kkakadiya

Сериализация работает только на моем первом Div. что делать, если у меня есть более одного div? Он не работает на моем другом div.

F-ES Sitecore

Я обновил свое решение, включив в него отправку ajax