单击按钮添加HTML表单 [英] Adding a HTML form on button click
问题描述
我正在为一个学校项目制作一个测验网站",但是我只停留在一部分上.
I am making a 'quiz website' for a school project but I am kind off stuck with one part.
我们需要向测验中添加问题,所以我想创建一个按钮添加问题",其中添加了1个(或更多)html表单.
We need to add questions to a quiz, so I want to make a button "Add Question" which adds 1 (or more) html form(s).
我几乎没有JavaScript经验,并且只了解基础知识.
I have little JavaScript experience, and know just the basics.
我的Laravel .blade文件:
My Laravel .blade file:
{{ Form::open(array('url'=>'quizzes/edit', 'class' => 'createquiz')) }}
<p>Question 1</p>{{ Form::text('', null, array('placeholder' => 'Question 1', 'size' => '40', 'id' => 'questions')) }}
<p>Question 2</p>{{ Form::text('', null, array('placeholder' => 'Question 2', 'size' => '40', 'id' => 'questions')) }}
<p>Question 3</p>{{ Form::text('', null, array('placeholder' => 'Question 3', 'size' => '40', 'id' => 'questions')) }}
<p>Question 4</p>{{ Form::text('', null, array('placeholder' => 'Question 4', 'size' => '40', 'id' => 'questions')) }}
<br>
<br>
{{ Form::button('Add Question', array('onclick' => 'addQuestion()', 'id' => 'questionadd')) }}
{{ Form::submit('Edit Quiz') }}
{{ Form::close() }}
我的JavaScript:
My JavaScript:
function addQuestion() {
var node = document.createElement('FORM');
var counter = 1;
var limit = 3;
if (counter == limit) {
alert("You have reached the limit of questions");
}
else {
node.appendChild(FORM);
document.getElementById("questions").appendChild(node);
}
}
因此,点击添加问题"按钮后,我想在其他问题之后添加一个问题
So on click of the "Add Question" button I want to have one question added right after the others
推荐答案
根据我从您的评论中收集到的信息,您正在寻求执行以下操作:
Okay from what I have gathered from your comments you are looking to do something like this:
<script>
var limit = 10; // Max questions
var count = 4; // There are 4 questions already
function addQuestion()
{
// Get the quiz form element
var quiz = document.getElementById('quiz');
// Good to do error checking, make sure we managed to get something
if (quiz)
{
if (count < limit)
{
// Create a new <p> element
var newP = document.createElement('p');
newP.innerHTML = 'Question ' + (count + 1);
// Create the new text box
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.name = 'questions[]';
// Good practice to do error checking
if (newInput && newP)
{
// Add the new elements to the form
quiz.appendChild(newP);
quiz.appendChild(newInput);
// Increment the count
count++;
}
}
else
{
alert('Question limit reached');
}
}
}
</script>
<form id="quiz" action="" method="POST">
<input type="button" value="Add question" onclick="javascript: addQuestion();"/>
<p>Question 1</p>
<input type="text" name="questions[]"/>
<p>Question 2</p>
<input type="text" name="questions[]"/>
<p>Question 3</p>
<input type="text" name="questions[]"/>
<p>Question 4</p>
<input type="text" name="questions[]"/>
<p></p>
</form>
记下注释,并通读代码以了解发生了什么.希望这会有所帮助.
Take note of the comments and have a good read through the code to see what's happening. Hope this helps.
这篇关于单击按钮添加HTML表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!