Получение значений группы текстовых полей в одной переменной

Я пытаюсь получить значения из группы текстовых полей, которые выглядят примерно как это. Первый вопрос и поле вариантов будут доступны по умолчанию. Когда пользователь нажимает кнопку добавления текстового поля, будет добавлен еще один набор. При нажатии кнопки загрузки должны отображаться все значения группы в одной переменной.

Я хочу получить результат вроде это.

Если пользователь выбирает переключатель, он должен сопровождаться знаком «#» впереди, если не «*».

Я могу получить значения отдельно по каждому вопросу. Но не удалось сделать это для всей группы и сохранить ее в одном экземпляре. Я тоже реализовал цикл for. Но что-то идет не так.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
       <form class="col-sm-12"> 

                        <div id="textfields">
                           <div id="entireText0">
                            <div class="form-row">
                                <div class="col-sm-10">
                                        <div class="form-group">
                                                <label for="textarea0">Question</label>
                                                <textarea class="form-control" id="textarea0" rows="2"></textarea>
                                        </div>
                                </div>
                            </div>

                            <div class="form-row">
                                <label>Options</label>
                            </div>

                            <div id="optionfields">
                                <div class="form-group" id="myForm0">
                                        <div class="input-group col-sm-3">
                                                <div class="input-group-prepend">
                                                  <div class="input-group-text">
                                                  <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                                  </div>
                                                </div>
                                                <input type="text" name="txtbox" id="textbox1" class="form-control" aria-label="Text input with radio button">
                                        </div>
                                        </br>
                                        <div class="input-group col-sm-3">
                                                <div class="input-group-prepend">
                                                  <div class="input-group-text">
                                                  <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                                  </div>
                                                </div>
                                                <input type="text" name="txtbox" id="textbox2" class="form-control" aria-label="Text input with radio button">
                                        </div>
                                    </br>
                                    <div class="input-group col-sm-3">
                                            <div class="input-group-prepend">
                                              <div class="input-group-text">
                                              <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                              </div>
                                            </div>
                                            <input type="text" name="txtbox" id="textbox3" class="form-control" aria-label="Text input with radio button">
                                    </div>
                                    </br>
                                    <div class="input-group col-sm-3">
                                            <div class="input-group-prepend">
                                              <div class="input-group-text">
                                              <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                              </div>
                                            </div>
                                            <input type="text" name="txtbox" id="textbox4" class="form-control" aria-label="Text input with radio button">
                                    </div>
                                    </br>                                
                                </div>
                            </div>
                            </div>
                            </div>



                <button type="button" id ="button0" class="btn btn-primary" onclick="addTextFields();">Add Text field</button>
                <br/><br/>
                <button type="button" class="btn btn-primary" onclick="selectedRadioButton();">Download</button>

            </form>

JS:

function selectedRadioButton() {
            for(textid=0;textareaid>=textid;textareaid--,textid++){
            var question= document.getElementById("textarea"+textid).value; 
            console.log("question",question);           
            question_gi= "::Q"+(textid+1)+"::"+question;
            var selectedArray=["["];
            $('.form-group #myForm+textid+ input[type=radio]').each(function() {
                var value = "*";
                if ($(this).is(":checked")) {
                value = "#";
                }
                value += $($(this).closest('.input-group').find("input[type=text]")).val();
                selectedArray.push(value);
            });
            selectedArray.push("]");
            var newArr = selectedArray.join(',').replace(/,/g, ' ').split();
            entire_gi= question_gi+ "%0d%0a" +newArr;
            finalvalue=[];
            finalvalue += entire_gi[textid];
            console.log(finalvalue);
              }

            }
0
0
29
1

Ответы 1

Вам нужно использовать document.querySelectorAll, чтобы получить все переключатели и все текстовые поля для формирования финальной строки.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
       <form class="col-sm-12"> 

                        <div id="textfields">
                           <div id="entireText0">
                            <div class="form-row">
                                <div class="col-sm-10">
                                        <div class="form-group">
                                                <label for="textarea0">Question</label>
                                                <textarea class="form-control" id="textarea0" rows="2"></textarea>
                                        </div>
                                </div>
                            </div>

                            <div class="form-row">
                                <label>Options</label>
                            </div>

                            <div id="optionfields">
                                <div class="form-group" id="myForm0">
                                        <div class="input-group col-sm-3">
                                                <div class="input-group-prepend">
                                                  <div class="input-group-text">
                                                  <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                                  </div>
                                                </div>
                                                <input type="text" name="txtbox" id="textbox1" class="form-control" aria-label="Text input with radio button">
                                        </div>
                                        </br>
                                        <div class="input-group col-sm-3">
                                                <div class="input-group-prepend">
                                                  <div class="input-group-text">
                                                  <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                                  </div>
                                                </div>
                                                <input type="text" name="txtbox" id="textbox2" class="form-control" aria-label="Text input with radio button">
                                        </div>
                                    </br>
                                    <div class="input-group col-sm-3">
                                            <div class="input-group-prepend">
                                              <div class="input-group-text">
                                              <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                              </div>
                                            </div>
                                            <input type="text" name="txtbox" id="textbox3" class="form-control" aria-label="Text input with radio button">
                                    </div>
                                    </br>
                                    <div class="input-group col-sm-3">
                                            <div class="input-group-prepend">
                                              <div class="input-group-text">
                                              <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                              </div>
                                            </div>
                                            <input type="text" name="txtbox" id="textbox4" class="form-control" aria-label="Text input with radio button">
                                    </div>
                                    </br>                                
                                </div>
                            </div>
                            </div>
                            </div>



                <button type="button" id ="button0" class="btn btn-primary" onclick="addTextFields();">Add Text field</button>
                <br/><br/>
                <button type="button" class="btn btn-primary" onclick="selectedRadioButton();">Download</button>

            </form>
<script>
function selectedRadioButton() {
   var textarea = document.querySelector('#textarea0');
   var question = textarea.value;
   var str = "::Q1::"+question+"\n";
   var radios = document.querySelectorAll('input[type=radio]');
   str += "[";
   var textinputs = document.querySelectorAll('input[type=text]');
   for(let i = 0; i < radios.length; i++){
     str += (radios[i].checked)? "#": "*";
     str += textinputs[i].value;
   }
   str += "]";
   console.log(str);
}
</script>

Другие вопросы по теме