使用定义的模式生成多个动态ID的函数(Function that generates multiple dynamic ID's with a defined pattern)
我正在尝试使用定义的模式生成一个生成多个动态ID的函数，我该怎么做？
followup： Vue.js：如何使用定义的模式生成多个动态ID
细节：
我正在创建一个动态的学校测试应用程序。 单击“添加问题”按钮时，将生成一个包含4个输入字段和4个单选按钮的div。 每个输入和单选按钮都需要有一个ID。 到目前为止，该函数生成一个值，我希望可以将其用作ID。 每个单选按钮都有一个名称，这样就可以只选择它所属的组中的一个选项。 使用每个按钮单击“添加问题”按钮（这是一个单选按钮），此特定“名称”用于计算按钮点击次数。 在计数器的帮助下，“问题”输入字段和“选项”输入字段（连接到单选按钮）的动态ID以此模式生成：
例
Testtitle-问题，选项
JavaScriptQ1 (Question) JavaScriptQ1O1 (Option) JavaScriptQ1O2 JavaScriptQ1O3 JavaScriptQ1O4由于在启动测试时会生成一个div，并且只通过按钮点击生成ID，因此一个div不会获得它的ID。 看起来上面例子中的ID只有一个问题，实际上是两个！
我目前没有使用saveTest（），它将用于将测试保存到mySQL数据库中，但它可能用于解决此问题！
1.我希望生成一个额外的“ID组”，因此每个输入字段都有一个ID，但我该怎么做？
2.当这个问题解决后，如何为单选按钮生成唯一的ID？
3.然后，我如何将生成的值用作ID。 如何将它们“附加”到输入字段和单选按钮？
4还有其他更好的解决方法吗？ ID必须遵循某种模式，因为它们将保存在数据库中，然后用于更正测试。
我知道这是一个相当复杂的问题，但我试图尽可能好地解释。
我建议你看看jsfiddle ！ 单击添加问题，您将看到它是如何工作的。
var name=1;
$("body").on('click', '#radioAddQuestion', function () {
var singleQuestionModule = "singleQuestionModule";
var question = $(".module:first").clone()
.find("input:text").val("").end();
var question_label = $(".question-label:first").clone();
$(question).find(':radio').prop('checked', false);
$(question_label).insertBefore(".options-label:last");
$(question).insertBefore(".options-label");
$(question).find(':radio').attr('name', "n" + name);
// Here is where the ID value is currently generated:
name++;
let questionId = theTitle + "Q" + name;
console.log(questionId);
for (a = 1; a <= 4; a++) {
let optionId = theTitle + "Q" + name + "O" + a;
console.log(optionId);
}
console.log(name)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<!-- The Question Inputfield that needs ID-->
<div class="input-group input-group">
<input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
</div>
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;" for="wQuestion">Enter avaible options:</label>
</div>
<!-- The radio buttons and option input fields that need ID's-->
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name= "q" id="option1" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="q" id="option4" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<!-- The Add and Save Test Buttons-->
<span class="options-label"></span>
<br>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" id="radioAddQuestion">
<input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>
<label class="btn btn-success">
<input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save Test </label>
</div>
</div>
I am trying to make a function that generates multiple dynamic ID's with a defined pattern, how do I do that?
followup: Vue.js: How to generare multiple dynamic ID's with a defined pattern
Details:
I am creating a dynamic school-test application. When the button "Add question" is clicked, a div with 4 input fields and 4 radio buttons are generated. Each input and radio button needs to have an ID. So far, the function generates a value, that I hope can be used as an ID. Every radio button has a name, that makes it possible to only choose one option in the group it belongs to. With every button click on the "Add Question" button (which is a radio button), this particular "name" is used to count button clicks. With the help of the counter, the dynamic ID for the "question" input field and "options" input fields (that is connected to the radio buttons) is generated in this pattern:
Example
Testtitle-Question-Option
JavaScriptQ1 (Question)
JavaScriptQ1O1 (Option)
JavaScriptQ1O2
JavaScriptQ1O3
JavaScriptQ1O4
Since there is a div that is generated when the test is launched, and the ID is only generated by button clicks one div won't get it's ID's. It seems that there is only one question in the ID's in the example above when it's in fact two!
I am currently not using saveTest(), which will be used to save the test into a mySQL database, but it may be used to solve this!
1. I want that one extra "group of ID's" is generated, so each input field gets an ID, but how do I do that?
2. When this matter is solved, how do I generate unique ID's for the radio buttons?
3. How do I then do to use the generated values as ID's. How do I "attach" them to their input fields and radio buttons?
4 Is there any other, better ways to solve this? The ID's has to follow a certain pattern since they will be saved in a database and then be used to correct the tests.
I know that it's a rather complex issue, but I have tried to explain as good as possible.
I advise that you look at the jsfiddle instead! Click on Add Question and you will see how it works.
var name=1;
$("body").on('click', '#radioAddQuestion', function () {
var singleQuestionModule = "singleQuestionModule";
var question = $(".module:first").clone()
.find("input:text").val("").end();
var question_label = $(".question-label:first").clone();
$(question).find(':radio').prop('checked', false);
$(question_label).insertBefore(".options-label:last");
$(question).insertBefore(".options-label");
$(question).find(':radio').attr('name', "n" + name);
// Here is where the ID value is currently generated:
name++;
let questionId = theTitle + "Q" + name;
console.log(questionId);
for (a = 1; a <= 4; a++) {
let optionId = theTitle + "Q" + name + "O" + a;
console.log(optionId);
}
console.log(name)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<!-- The Question Inputfield that needs ID-->
<div class="input-group input-group">
<input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
</div>
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;" for="wQuestion">Enter avaible options:</label>
</div>
<!-- The radio buttons and option input fields that need ID's-->
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name= "q" id="option1" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="q" id="option4" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<!-- The Add and Save Test Buttons-->
<span class="options-label"></span>
<br>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" id="radioAddQuestion">
<input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>
<label class="btn btn-success">
<input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save Test </label>
</div>
</div>
最满意答案
我改变了剧本。 只是看看那个。 它将为您使用的所有控件生成动态ID。
var name=1;
var theTitle="online";
$("body").on('click', '#radioAddQuestion', function () {
name++;
$(".dynamicform").append(createQuestion(name));
});
$(".dynamicform").append(createQuestion(name));
function createQuestion(name){
var dynamic=`<span class="module">
<legend class="col-form-legend col-sm-10"></legend>
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<div class="form-group row">
<div class="input-group input-group">
<!-- The Question Inputfield that needs ID-->
<input type="text" class="form-control" aria-label="" id="${theTitle + "Q" + name}" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;"
for="wQuestion">Enter
avaible options:</label>
</div>
</div>
<!-- The radiobuttons and option inputfields that needs ID's-->
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "1"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "1"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "2"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "2"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "3"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "3"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "4"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "4"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
</span>
`;
return dynamic;
}
#singleQuestionModule {
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="d-flex justify-content-center">
<fieldset class=" form-group row">
<div class="dynamicform">
<!--Dynamic form comes here-->
</div>
<span class="options-label"></span>
<br>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" id="radioAddQuestion">
<input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>
<label class="btn btn-success">
<input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save
Test </label>
</div>
</div>
</fieldset>
</div>
</form>
</div>
Jsfiddle： https ：//jsfiddle.net/d9tfk1u6/
I changed the script. just have look on that. It will generate dynamic ID for all controls that you have been used.
var name=1;
var theTitle="online";
$("body").on('click', '#radioAddQuestion', function () {
name++;
$(".dynamicform").append(createQuestion(name));
});
$(".dynamicform").append(createQuestion(name));
function createQuestion(name){
var dynamic=`<span class="module">
<legend class="col-form-legend col-sm-10"></legend>
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<div class="form-group row">
<div class="input-group input-group">
<!-- The Question Inputfield that needs ID-->
<input type="text" class="form-control" aria-label="" id="${theTitle + "Q" + name}" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;"
for="wQuestion">Enter
avaible options:</label>
</div>
</div>
<!-- The radiobuttons and option inputfields that needs ID's-->
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "1"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "1"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "2"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "2"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "3"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "3"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "4"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "4"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
</span>
`;
return dynamic;
}
#singleQuestionModule {
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="d-flex justify-content-center">
<fieldset class=" form-group row">
<div class="dynamicform">
<!--Dynamic form comes here-->
</div>
<span class="options-label"></span>
<br>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" id="radioAddQuestion">
<input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>
<label class="btn btn-success">
<input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save
Test </label>
</div>
</div>
</fieldset>
</div>
</form>
</div>
Jsfiddle : https://jsfiddle.net/d9tfk1u6/
使用定义的模式生成多个动态ID的函数(Function that generates multiple dynamic ID's with a defined pattern)
我正在尝试使用定义的模式生成一个生成多个动态ID的函数，我该怎么做？
followup： Vue.js：如何使用定义的模式生成多个动态ID
细节：
我正在创建一个动态的学校测试应用程序。 单击“添加问题”按钮时，将生成一个包含4个输入字段和4个单选按钮的div。 每个输入和单选按钮都需要有一个ID。 到目前为止，该函数生成一个值，我希望可以将其用作ID。 每个单选按钮都有一个名称，这样就可以只选择它所属的组中的一个选项。 使用每个按钮单击“添加问题”按钮（这是一个单选按钮），此特定“名称”用于计算按钮点击次数。 在计数器的帮助下，“问题”输入字段和“选项”输入字段（连接到单选按钮）的动态ID以此模式生成：
例
Testtitle-问题，选项
JavaScriptQ1 (Question)
JavaScriptQ1O1 (Option)
JavaScriptQ1O2
JavaScriptQ1O3
JavaScriptQ1O4
由于在启动测试时会生成一个div，并且只通过按钮点击生成ID，因此一个div不会获得它的ID。 看起来上面例子中的ID只有一个问题，实际上是两个！
我目前没有使用saveTest（），它将用于将测试保存到mySQL数据库中，但它可能用于解决此问题！
1.我希望生成一个额外的“ID组”，因此每个输入字段都有一个ID，但我该怎么做？
2.当这个问题解决后，如何为单选按钮生成唯一的ID？
3.然后，我如何将生成的值用作ID。 如何将它们“附加”到输入字段和单选按钮？
4还有其他更好的解决方法吗？ ID必须遵循某种模式，因为它们将保存在数据库中，然后用于更正测试。
我知道这是一个相当复杂的问题，但我试图尽可能好地解释。
我建议你看看jsfiddle ！ 单击添加问题，您将看到它是如何工作的。
var name=1;
$("body").on('click', '#radioAddQuestion', function () {
var singleQuestionModule = "singleQuestionModule";
var question = $(".module:first").clone()
.find("input:text").val("").end();
var question_label = $(".question-label:first").clone();
$(question).find(':radio').prop('checked', false);
$(question_label).insertBefore(".options-label:last");
$(question).insertBefore(".options-label");
$(question).find(':radio').attr('name', "n" + name);
// Here is where the ID value is currently generated:
name++;
let questionId = theTitle + "Q" + name;
console.log(questionId);
for (a = 1; a <= 4; a++) {
let optionId = theTitle + "Q" + name + "O" + a;
console.log(optionId);
}
console.log(name)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<!-- The Question Inputfield that needs ID-->
<div class="input-group input-group">
<input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
</div>
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;" for="wQuestion">Enter avaible options:</label>
</div>
<!-- The radio buttons and option input fields that need ID's-->
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name= "q" id="option1" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="q" id="option4" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<!-- The Add and Save Test Buttons-->
<span class="options-label"></span>
<br>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" id="radioAddQuestion">
<input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>
<label class="btn btn-success">
<input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save Test </label>
</div>
</div>
I am trying to make a function that generates multiple dynamic ID's with a defined pattern, how do I do that?
followup: Vue.js: How to generare multiple dynamic ID's with a defined pattern
Details:
I am creating a dynamic school-test application. When the button "Add question" is clicked, a div with 4 input fields and 4 radio buttons are generated. Each input and radio button needs to have an ID. So far, the function generates a value, that I hope can be used as an ID. Every radio button has a name, that makes it possible to only choose one option in the group it belongs to. With every button click on the "Add Question" button (which is a radio button), this particular "name" is used to count button clicks. With the help of the counter, the dynamic ID for the "question" input field and "options" input fields (that is connected to the radio buttons) is generated in this pattern:
Example
Testtitle-Question-Option
JavaScriptQ1 (Question)
JavaScriptQ1O1 (Option)
JavaScriptQ1O2
JavaScriptQ1O3
JavaScriptQ1O4
Since there is a div that is generated when the test is launched, and the ID is only generated by button clicks one div won't get it's ID's. It seems that there is only one question in the ID's in the example above when it's in fact two!
I am currently not using saveTest(), which will be used to save the test into a mySQL database, but it may be used to solve this!
1. I want that one extra "group of ID's" is generated, so each input field gets an ID, but how do I do that?
2. When this matter is solved, how do I generate unique ID's for the radio buttons?
3. How do I then do to use the generated values as ID's. How do I "attach" them to their input fields and radio buttons?
4 Is there any other, better ways to solve this? The ID's has to follow a certain pattern since they will be saved in a database and then be used to correct the tests.
I know that it's a rather complex issue, but I have tried to explain as good as possible.
I advise that you look at the jsfiddle instead! Click on Add Question and you will see how it works.
var name=1;
$("body").on('click', '#radioAddQuestion', function () {
var singleQuestionModule = "singleQuestionModule";
var question = $(".module:first").clone()
.find("input:text").val("").end();
var question_label = $(".question-label:first").clone();
$(question).find(':radio').prop('checked', false);
$(question_label).insertBefore(".options-label:last");
$(question).insertBefore(".options-label");
$(question).find(':radio').attr('name', "n" + name);
// Here is where the ID value is currently generated:
name++;
let questionId = theTitle + "Q" + name;
console.log(questionId);
for (a = 1; a <= 4; a++) {
let optionId = theTitle + "Q" + name + "O" + a;
console.log(optionId);
}
console.log(name)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<!-- The Question Inputfield that needs ID-->
<div class="input-group input-group">
<input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
</div>
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;" for="wQuestion">Enter avaible options:</label>
</div>
<!-- The radio buttons and option input fields that need ID's-->
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name= "q" id="option1" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="q" id="option4" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<!-- The Add and Save Test Buttons-->
<span class="options-label"></span>
<br>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" id="radioAddQuestion">
<input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>
<label class="btn btn-success">
<input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save Test </label>
</div>
</div>
最满意答案
我改变了剧本。 只是看看那个。 它将为您使用的所有控件生成动态ID。
var name=1;
var theTitle="online";
$("body").on('click', '#radioAddQuestion', function () {
name++;
$(".dynamicform").append(createQuestion(name));
});
$(".dynamicform").append(createQuestion(name));
function createQuestion(name){
var dynamic=`<span class="module">
<legend class="col-form-legend col-sm-10"></legend>
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<div class="form-group row">
<div class="input-group input-group">
<!-- The Question Inputfield that needs ID-->
<input type="text" class="form-control" aria-label="" id="${theTitle + "Q" + name}" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;"
for="wQuestion">Enter
avaible options:</label>
</div>
</div>
<!-- The radiobuttons and option inputfields that needs ID's-->
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "1"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "1"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "2"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "2"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "3"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "3"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "4"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "4"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
</span>
`;
return dynamic;
}
#singleQuestionModule {
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="d-flex justify-content-center">
<fieldset class=" form-group row">
<div class="dynamicform">
<!--Dynamic form comes here-->
</div>
<span class="options-label"></span>
<br>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" id="radioAddQuestion">
<input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>
<label class="btn btn-success">
<input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save
Test </label>
</div>
</div>
</fieldset>
</div>
</form>
</div>
Jsfiddle： https ：//jsfiddle.net/d9tfk1u6/
I changed the script. just have look on that. It will generate dynamic ID for all controls that you have been used.
var name=1;
var theTitle="online";
$("body").on('click', '#radioAddQuestion', function () {
name++;
$(".dynamicform").append(createQuestion(name));
});
$(".dynamicform").append(createQuestion(name));
function createQuestion(name){
var dynamic=`<span class="module">
<legend class="col-form-legend col-sm-10"></legend>
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<div class="form-group row">
<div class="input-group input-group">
<!-- The Question Inputfield that needs ID-->
<input type="text" class="form-control" aria-label="" id="${theTitle + "Q" + name}" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;"
for="wQuestion">Enter
avaible options:</label>
</div>
</div>
<!-- The radiobuttons and option inputfields that needs ID's-->
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "1"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "1"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "2"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "2"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "3"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "3"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "4"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "4"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
</span>
`;
return dynamic;
}
#singleQuestionModule {
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="d-flex justify-content-center">
<fieldset class=" form-group row">
<div class="dynamicform">
<!--Dynamic form comes here-->
</div>
<span class="options-label"></span>
<br>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" id="radioAddQuestion">
<input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>
<label class="btn btn-success">
<input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save
Test </label>
</div>
</div>
</fieldset>
</div>
</form>
</div>
Jsfiddle : https://jsfiddle.net/d9tfk1u6/
发布评论