2016-03-08 25 views
0

I'have一个复杂的HTML形式向导上的每一步,我有一些表单输入字段提交的数据,因为我有

<form class="uk-form-stacked" id="wizard_advanced_form"> 
    <div id="wizard_advanced" data-uk-observe> 
     <c:forEach var="i" begin="1" end="${quizTotalQuestions}"> 
      <!-- first section --> 
      <h3></h3> 
      <section> 

      <h2 class="heading_a"> 
       Question number ${i} :         
      </h2> 
      <hr class="md-hr"/> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_fullname">Write question number ${i} here...<span class="req">*</span></label> 
        <textarea id="wizard_fullname" class="md-input" id="question_text" required></textarea> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option a<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_one" required class="md-input" /> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option b<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_two" required class="md-input" /> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option c<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_three" required class="md-input" /> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option d<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_four" required class="md-input" /> 
       </div> 
      </div> 

      <h2 class="heading_a"> 
       Correct answer:         
      </h2> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <select id="wizard_birth_place" name="wizard_birth_place" required> 
         <option value="">Select answer for question ${i}</option> 
         <option value="a">option a</option> 
         <option value="b">option b</option> 
         <option value="c">option c</option> 
         <option value="d">option d</option>          
        </select> 
       </div> 
      </div>       
     </section>       
     </c:forEach> 
    </div> 
</form> 

所以如果有${quizTotalQuestions} = 2页面放出来是

<form class="uk-form-stacked" id="wizard_advanced_form"> 
    <div id="wizard_advanced" data-uk-observe>   

      <h3></h3> 
      <section> 

      <h2 class="heading_a"> 
       Question number 1 :         
      </h2> 
      <hr class="md-hr"/> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_fullname">Write question number 1 here...<span class="req">*</span></label> 
        <textarea id="wizard_fullname" class="md-input" id="question_text" required></textarea> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option a<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_one" required class="md-input" /> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option b<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_two" required class="md-input" /> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option c<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_three" required class="md-input" /> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option d<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_four" required class="md-input" /> 
       </div> 
      </div> 

      <h2 class="heading_a"> 
       Correct answer:         
      </h2> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <select id="wizard_birth_place" name="wizard_birth_place" required> 
         <option value="">Select answer for question 1</option> 
         <option value="a">option a</option> 
         <option value="b">option b</option> 
         <option value="c">option c</option> 
         <option value="d">option d</option>          
        </select> 
       </div> 
      </div>       
     </section> 

      <h3></h3> 
      <section> 

      <h2 class="heading_a"> 
       Question number 2 :         
      </h2> 
      <hr class="md-hr"/> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_fullname">Write question number 2 here...<span class="req">*</span></label> 
        <textarea id="wizard_fullname" class="md-input" id="question_text" required></textarea> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option a<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_one" required class="md-input" /> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option b<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_two" required class="md-input" /> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option c<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_three" required class="md-input" /> 
       </div> 
      </div> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <label for="wizard_address">Option d<span class="req">*</span></label> 
        <input type="text" name="wizard_address" id="option_four" required class="md-input" /> 
       </div> 
      </div> 

      <h2 class="heading_a"> 
       Correct answer:         
      </h2> 
      <div class="uk-grid"> 
       <div class="uk-width-medium-1-1 parsley-row"> 
        <select id="wizard_birth_place" name="wizard_birth_place" required> 
         <option value="">Select answer for question 2</option> 
         <option value="a">option a</option> 
         <option value="b">option b</option> 
         <option value="c">option c</option> 
         <option value="d">option d</option>          
        </select> 
       </div> 
      </div>       
     </section>       

    </div> 
</form> 

请看看形式的剪断这是

wizard form snip

每个<section>用于获取在我的情况简单的问题的细节,这意味着更多的<section>因为在这一点上${quizTotalQuestions}数目增加的创建,当我在接下来点击我要提交并保存说单一的问题,所以对于接下来有功能

onStepChanged: function(i, e) { 
    altair_wizard.content_height(t, e), setTimeout(function() { 
     $window.resize() 
    }, 100); 

    console.log("Next is pressed"); 

} 
onStepChanging: function(i, e, a) { 
    var n = t.find(".body.current").attr("data-step"), 
     r = $('.body[data-step="' + n + '"]'); 

    $.ajax({ 
     contentType : 'application/json; charset=utf-8', 
     type: 'POST', 
     url: '/imtehan/question/', 
     dataType : 'json', 
     data : {'questionText' : $("#question_text").val()}, 

     success : function(callback){    
      console.log("Data is ==> " + $("#question_text").val()); 
      console.log("Data inserted"); 
     }, 
     error : function(){ 
      console.log("Error"); 
     } 
    }); 
    console.log("Data is" + $("#qu estion_text").val());    
    console.log("Next is being pressed"); 
    return r.find("[data-parsley-id]").each(function() { 
     $(this).parsley().validate() 
    }), $window.resize(), r.find(".md-input-danger").length ? !1 : !0 
}, 
onFinished: function() {   
    $.ajax({ 
      contentType : 'application/json; charset=utf-8', 
      type: 'POST', 
      url: '/imtehan/question/', 
      dataType : 'json', 
      data : {'questionText' : $("#question_text").val()}, 

      success : function(callback){     
       console.log("Data is ==> " + $("#question_text").val()); 
       console.log("Data inserted"); 
      }, 
      error : function(){     
       console.log("Error"); 
      } 
     }); 
    console.log("Finish Pressed"); 
} 

,但问题是,当我按接下来数据没有提交,在控制台收到错误。

Data is ==> undefined 
Failed to load resource: the server responded with a status of 400 (Bad Request) 

我想我得到,因为没有数据从$("#question_text").val()得到的错误我如何能得到的东西的工作。

回答

0

我还不能评论。 = /(新用户)

您是否看到在HTML中有多个#question_text

+0

是的,可能是这个问题,因为

是动态创建的,不幸的是没有任何想法来处理这个问题...... –

+0

在所有问题字段中创建一个类名,所以,你可以尝试调用类似' $( “QUESTION_TEXT。”)最后()VAL();' –

相关问题