Question

我想创建两个动态表单元素，以便当用户单击“添加另一个问题”时，他们会获得一个新的问题字段和一个答案字段，并且html被操作为“Q2”，“A2”等。我能够创建动态表单元素以根据此 blog 添加新问题输入，但也无法设置添加答案字段。

#search-form.open {
  max-height: 70px;
  position: absolute;
  top: 60px;
  width: 100%;
}

//disable delete question
$(document).ready(function() {
  $('#btnDel').prop('disabled', 'disabled');
});

//add question
$('#btnAdd').click(function() {
  var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
  var newNum = new Number(num + 2); // the numeric ID of the new Q input field being added
  var newNumA = new Number(num + 3); // the numeric ID of the new A input field being added

  // Question Input

  // create the new element via clone(), and manipulate it's ID using newNum value
  var newElem = $('#qInput' + num).clone().prop('id', 'qInput' + newNum);

  // manipulate the name/id/html of the span inside the new element
  newElem.children(':first').prop('id', 'spanQ' + newNum).html("Q" + newNum);

  // manipulate the name/id/val values of the input inside the new element 
  newElem.children().eq(1).prop('id', 'question' + newNum).prop('name', 'question' + newNum).val("");


  //Answer Input

  // create the new element via clone(), and manipulate it's ID using newNumA value
  var newElemA = $('#aInput' + num).clone().prop('id', 'aInput' + newNumA);

  // manipulate the name/id/html of the span inside the new element
  newElemA.children(':first').prop('id', 'spanA' + newNumA).html("A" + newNumA);

  // manipulate the name/id/val values of the input inside the new element 
  newElemA.children().eq(1).prop('id', 'answer' + newNumA).prop('name', 'answer' + newNumA).val("");


  // insert the new element after the last "duplicatable" input field
  $('#aInput' + num).after(newElem, newElemA);

  // enable the "remove" button
  $('#btnDel').prop('disabled', '');

  // business rule: you can only add 19 questions
  if (newNum == 19)
    $('#btnAdd').prop('disabled', 'disabled');
});

Answer 1

$(document).ready(function() {
  $('#btnDel').prop('disabled', 'disabled');
});

var currentQ=1;
var ids = [];

$('#btnAdd').click(function() {
newgen= $( ".clone" ).clone();
ids.push(newgen);
newgen.insertBefore(  $('.insertabove'));
newgen.removeClass("clone");
newgen.find('.spanQ').html('Q'+ ++currentQ);
newgen.find('.spanA').html('A'+ currentQ);
newgen.find('.question').attr('name', 'question_'+currentQ);
newgen.find('.answer').attr('name', 'answer_'+currentQ);
$('#btnDel').prop('disabled', '');
if (currentQ > 19)    $('#btnAdd').prop('disabled', 'disabled');
});

$('#btnDel').click(function(){
if (!newgen){alert('You need to have at least one question');}else{
newgen.remove();
ids.splice(-1,1);
newgen = ids[ids.length-1];

currentQ--;}



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="createWorksheet">

  <div class="clone">
    <div class="qInput1" class="styleOne clonedInput">
      <span class="spanQ"> Q1 </span>
      <input type="text" name="question_1" class="question" />
    </div>
    <div class="aInput2" class="styleTwo">
      <span class="spanA"> A1 </span>
      <input type="text" name="answer_1" class="answer" />
    </div>
  </div>

<span class="insertabove"></span>

  <div class="buttonGroup">
    <input type="button" id="btnDel" value="Remove Question" class="btnCreate" />
    <input type="button" id="btnAdd" value="Add another question" class="btnCreate" />
  </div>

  <div class="buttonGroup">
    <input type="submit" id="btnSub" value="Submit" class="btnCreate">
  </div>

</form>

我也修改了HTML，请查看它是否符合您的需求。

Answer 2

这只是您尝试做的简化版本。我添加了一个类QAset并修改了原始HTML元素的一些属性，以便更轻松地创建新的输入过程。

$(document).ready(function() {
  $('#btnDel').prop('disabled', 'disabled');
});

const QAset = $('.QAset')[0].outerHTML;
var num = /\$\{num\}/g;
$('.QAset').remove()
$('#btnAdd').click(function() {
  var currentQAset = $('.QAset').length
  var html = QAset.replace(num, currentQAset + 1)
  $('.buttonGroup:first').before(html)

  if (currentQAset + 1 > 1)
    $('#btnDel').prop('disabled', '');

  if (currentQAset == 19)
    $('#btnAdd').prop('disabled', 'disabled');
});

$('#btnAdd').click()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="createWorksheet">
  <div class="QAset">
    <div id="qInput${num}" class="styleOne">
      <span id="span${num}Q"> Q${num} </span>
      <input type="text" name="question${num}" id="question${num}" />
    </div>
    <div id="aInput${num}" class="styleTwo">
      <span id="span${num}A"> A${num} </span>
      <input type="text" name="answer${num}" id="answer${num}" />
    </div>
  </div>

  <div class="buttonGroup">
    <input type="button" id="btnDel" value="Remove Question" class="btnCreate" />
    <input type="button" id="btnAdd" value="Add another question" class="btnCreate" />
  </div>

  <div class="buttonGroup">
    <input type="submit" id="btnSub" value="Submit" class="btnCreate">
  </div>
</form>

Answer 3

查看您的代码，问题很简单 - 您实际上使用相同的索引（'#qInput' + num和'#aInput' + num）来调用问题和答案 - 问题是#qInput1答案是#aInput2

只需在各个阶段之间添加num++即可正常工作

编辑 - 更深入，如果您将答案的id更改为aInput1，也可以 - newNum和newNumA两者都应该{{1} }}

num + 1

//disable delete question
$(document).ready(function() {
  $('#btnDel').prop('disabled', 'disabled');
});

//add question
$('#btnAdd').click(function() {
  var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
  var newNum = new Number(num + 1); // the numeric ID of the new Q input field being added
  var newNumA = new Number(num + 1); // the numeric ID of the new A input field being added

  // Question Input

  // create the new element via clone(), and manipulate it's ID using newNum value
  var newElem = $('#qInput' + num).clone().prop('id', 'qInput' + newNum);

  // manipulate the name/id/html of the span inside the new element
  newElem.children(':first').prop('id', 'spanQ' + newNum).html("Q" + newNum);

  // manipulate the name/id/val values of the input inside the new element 
  newElem.children().eq(1).prop('id', 'question' + newNum).prop('name', 'question' + newNum).val("");

  // num++; // this is the new line
  //Answer Input

  // create the new element via clone(), and manipulate it's ID using newNumA value
  var newElemA = $('#aInput' + num).clone().prop('id', 'aInput' + newNumA);

  // manipulate the name/id/html of the span inside the new element
  newElemA.children(':first').prop('id', 'spanA' + newNumA).html("A" + newNumA);

  // manipulate the name/id/val values of the input inside the new element 
  newElemA.children().eq(1).prop('id', 'answer' + newNumA).prop('name', 'answer' + newNumA).val("");


  // insert the new element after the last "duplicatable" input field
  $('#aInput' + num).after(newElem, newElemA);

  // enable the "remove" button
  $('#btnDel').prop('disabled', '');

  // business rule: you can only add 19 questions
  if (newNum == 19)
    $('#btnAdd').prop('disabled', 'disabled');
});

jQuery添加动态表单元素

3 个答案: