Получить значения различных типов ввода в div, используя jquery

Question

У меня есть два div, которые я переключаю в зависимости от того, хочет ли пользователь добавить опции Single Select или несколько. Таким образом, за один раз виден только 1 div.

<div class="form-group row" id="divOptions">
        @Html.Label("Choices", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10" id="divSingleChoice">
            <div class="elementRadio" id="div_0">
                <label class="radio-inline">
                    <input type="radio" name="UserChoice" value="0" checked />
                    <input type="text" id="txt_0" name="UserChoices[0].ChoiceText" value="@Request.Form["UserChoices[0].ChoiceText"]" />
                </label>
            </div>
            <div class="elementRadio" id="div_1">
                <label class="radio-inline">
                    <input type="radio" name="UserChoice" value="1" />
                    <input type="text" id="txt_1" name="UserChoices[1].ChoiceText" value="@Request.Form["UserChoices[1].ChoiceText"]" />
                </label>
            </div>
            <input type="hidden" id="RadioChoiceCount" name="RadioChoiceCount" value="2" />
        </div>
        <div class="col-10" id="divMultiChoice" style="display:none">
            <div class="elementMultiple" id="div_0">
                <label class="radio-inline">
                    <input type="checkbox" name="IsChecked_0" checked />
                    <input type="text" id="txt_0" name="MChoiceText_0" value="@Request.Form["MChoiceText_0"]" />
                </label>
            </div>
            <div class="elementMultiple" id="div_1">
                <label class="radio-inline">
                    <input type="checkbox" name="IsChecked_1" />
                    <input type="text" id="txt_1" name="MChoiceText_1" value="@Request.Form["MChoiceText_1"]" />
                </label>
            </div>
            <input type="hidden" id="MultiChoiceCount" name="MultiChoiceCount" value="2" />
        </div>
        <div class="offset-2 col-10 form-group">
            <input type="submit" value="Add Choice" id="addChoice" class="btn btn-primary" />
        </div>
    </div>

Мне нужна помощь в поиске вариантов наряду с выбором радио / флажков. Я использую следующие jquery, но не работает:

$("#btnSave").click(function (e) {
var data = new FormData();
var selectedVal = $("#QuestionTypeID option:selected").text().toLowerCase();
if (selectedVal == 'radio') {
            data.append("UserChoice", $("divSingleChoice input[type='radio']:checked").val());

            $(".elementRadio").each(function (index, element) {
                var text2 = $(this).closest("input[type=text]").text();
                alert(text2);
                data.append("UserChoices[" + index + "].ChoiceText", $(this).closest("input[type=text]").text());
            });
        }
        else {
            $(".elementMultiple").each(function (index, element) {
                data.append("IsChecked_" + index, $(this).closest("input[type=checkbox]").prop("checked"));
                data.append("MChoiceText_" + index, $(this).closest("input[type=text]").text());
            });
        }
}

Любая помощь приветствуется. Спасибо.

Answer 1

Это то, что я закончил -

$("#btnSave").click(function (e) {
var data = new FormData();
var selectedVal = $("#QuestionTypeID option:selected").text().toLowerCase();
        if (selectedVal == 'radio') {
            data.append("UserChoice", $("#divSingleChoice input[type='radio']:checked").val());
            $('input[type=text]', $('#divSingleChoice')).each(function (index) {

                if ($(this).prop('type') == 'text') {
                    // "this" is the current element in the loop
                    data.append("UserChoices[" + index + "].ChoiceText", this.value); 
                }
            });
        }
        else {
            var i = 0; //increase after every checkbox and text pair
            $('input', $('#divMultiChoice')).each(function () {
                // "this" is the current element in the loop
                if ($(this).prop('type') == 'checkbox') {
                    data.append("UserChoices[" + i + "].IsChecked", $(this).prop('checked'));
                }

                if ($(this).prop('type') == 'text') {
                    data.append("UserChoices[" + i + "].ChoiceText", this.value);
                    i++;
                }
            });
        }
}