javascript - 在表单中单击按钮时创建文本输入
问题描述
我想创建另一个输入字段,每次单击表单内的按钮“+”。我搜索了一个解决方案,但我找不到任何东西。输入字段应在“+”按钮上的表单内创建。
这是我当前的代码:
<div class="row">
<div class="col-md-12">
<form method="post" id="create-form" action="create.php" enctype="multipart/form-data">
<?php
/* getting sample questions */
/* checks result and creates variables from result */
if ($sampleamount > 0) { // amount
$samplequery->bind_result($questionid_sample, $question_sample);
while ($samplequery->fetch()) { // while page can use this variables
/* echo text-box, value from db */
$required = $questionid_sample === 1 ? "required" : ""; // one question is always required
echo "<input class='question-box' type='text' name='" . $questionid_sample . "' placeholder='Write your question in here.' maxlength='255' size='70' value='" . $question_sample . "'" . $required . "> <br>";
}
} else {
/* no result (db=sample_question) */
header('Location: ../index.php');
}
$samplequery->close();
closeDB($conn);
/* adds more input for user */
for ($i = ($sampleamount + 1); $i <= ($additionalquestions + $sampleamount); $i++) {
echo "<input class='question-box' type='text' name='" . $i . "' placeholder='Write your question in here.' maxlength='255' size='70'> <br>";
}
?>
<br>
<input class="createsurvey2" type="button" id="addqbtn" name="addqbtn" value="+" >
<br>
<input class="createsurvey2" type="submit" name="btnSubmit" value="Create Survey!" >
</form>
</div>
</div>
</div>
<script>
function addquestion() {
var counter = 2;
var addqbtn = document.getElementById('addqbtn');
var form = document.getElementById('create-form');
var addInput = function() {
counter++;
var input = document.createElement("input");
input.id = 'additionalquestion-' + counter;
input.type = 'text';
input.class = 'question-box';
input.name = 'name';
input.placeholder = 'Write your question in here.';
form.appendChild(input);
};
addqbtn.addEventListener('click', function(){
addInput();
}.bind(this));
};
</script>
解决方案
<html>
<body>
<button onclick="createNewFiled()" id="incrementBtn" type="button">Click here</button>
<form id="form" action="">
</form>
</body>
</html>
<script type="text/javascript">
var counter = 0;
var incrementBtn = document.getElementById('incrementBtn');
var form = document.getElementById('form');
var createNewFiled = function() {
counter++;
var input = document.createElement("input");
var br = document.createElement("br"); // If you need new line after each input field
input.id = 'input-' + counter;
input.classList.add("inputClass");
input.type = 'text';
input.name = 'name'+counter;
input.placeholder = 'Input field ' + counter;
form.appendChild(input);
form.appendChild(br); // If you need new line after each input field
};
</script>
推荐阅读
- firebase - Firestore 文档不使用 (document.toObject(myPojo::class.java)) 将单个值复制到我的 pojo 类
- excel - 如何从活动工作簿中获取数据,将其复制到另一个工作簿中,然后将更改的文件另存为新文件
- php - jQuery 事件日历“切断”结束日期
- google-apps-script - 我想移动到在特定列中没有值的另一个工作表行
- swift - 如何获取 UITableView 中的所有 UITextField 值?
- javascript - js中的快速排序
- css - 如何像角材料步进器一样实现离子步进器?
- jenkins - 使用 Jenkins 管道作业中的 Helm 客户端部署 Kubernetes helm 的可行性
- python - 带有数字的正则表达式标记化?
- javascript - 无法通过从变量中获取纬度和经度来重新初始化谷歌地图