2015-04-07 63 views
1

我想提出一個測驗的網站,並在{ID}測驗的編輯畫面我可以編輯+添加問題(和答案)JavaScript的「複製」 HTML表單

現在我有一個形式,我想使用JavaScript進行「複製」使其變得動態,當然問題編號應該是2,3,4等,然後點擊「添加問題」

這是我以前的,但我認爲有一個更高效方式來複製表格而不是製作一個完整的表格。

但我是那種離套牢怎麼辦呢..

HTML

{{ Form::open(array('url'=>'quizzes/edit', 'id' => 'quiz')) }} 
{{ Form::button('Add Question', array('onclick' => 'addQuestion()', 'id' => 'questionadd', 'value' => 'Add new question')) }} 
{{ Form::submit('Edit Quiz', array('id' => 'quizsubmit')) }} 

    <p id="questiontitle">Question 1</p> 
    {{ Form::text('', null, array('placeholder' => 'Question 1', 'size' => '40', 'id' => 'questions', 'onfocus' => 'showAnswers(this)')) }} <br> 
    {{ Form::text('', null, array('placeholder' => 'Good Answer', 'size' => '30', 'id' => 'answers')) }} 
    {{ Form::text('', null, array('placeholder' => 'False Answer', 'size' => '30', 'id' => 'answers')) }} 
    {{ Form::text('', null, array('placeholder' => 'False Answer', 'size' => '30', 'id' => 'answers')) }} 


{{ Form::close() }} 

的JavaScript

var qlimit = 10; // Max questions 
var qcount = 1; // 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 (qcount < qlimit) { 
     // Create a new <p> element 
     var newQ = document.createElement('p'); 
     newQ.innerHTML = 'Question ' + (qcount + 1); 

     // Create the new text box 
     var newInput = document.createElement('input'); 
     newInput.type = 'text'; 
     newInput.name = 'questions[]' 

     var newQ = document.createElement('p'); 
     newQ.innerHTML = 'Question ' + (qcount + 1); 

     // Error checking 
     if (newInput && newQ) { 
      // Add the new elements to the form 
      quiz.appendChild(newQ); 
      quiz.appendChild(newInput); 


      // Increment the count 
      qcount++; 
     } 
    } 

    // Error message when maximum amount of questions is reached 
    else { 
     alert('The maximum amount of questions is ' + qcount); 
    } 
    } 
} 

回答

1
var quizForm = document.getElementByID('quiz').outerHTML; 

這將複製您的競猜形式。那麼如果你想改變值(我認爲這是你想要的),你需要給所有元素一個ID並將新值與元素對齊。像:

document.getElementByID('questions').value = 'new value'; 

請問您的三個答案的實例具有相同的ID? ID必須是唯一的。