如何在使用Ajax进行表单提交时加载一个div div

Question

基本上我有三个问题需要从用户那里询问在iframe中显示的网站。

我有一个简单的html表单，iframe上方将提交用户对processor.php的处理答案。

第一个问题后，我需要加载两个，一个接一个，但以一种方式，iframe保持不变，因此整个页面不能刷新。

这是我到目前为止有：

形式：

<form id="myForm" action="" method="post"> 
    <span id="surveyQuestion">Question 1</span><br/> 
    <input type="hidden" name="firstQuestion" value="Question 1"> 
    <span class="info">0</span> 
    <input type="radio" class="radioButton" name="response" value="0"> 
    <input type="radio" class="radioButton" name="response" value="1"> 
    <input type="radio" class="radioButton" name="response" value="2"> 
    <input type="radio" class="radioButton" name="response" value="3"> 
    <input type="radio" class="radioButton" name="response" value="4"> 
    <input type="radio" class="radioButton" name="response" value="5"> 
    <span class="info">5</span> 
</form> 

jQuery的：

$(function() { 
    $("input.radioButton").change(function(){ 
     $.ajax({ 
      type: 'post', 
      url: 'processor.php', 
      data: $('#myForm').serialize(), 
      success: function() { 
       $("#surveyBox").load("question2.php #secondQuestion > *"); 
      } 
     }); 
    }); 
}); 

我使用$("#surveyBox").load("question2.php #secondQuestion > *");加载question2.php那里是一个div与id secondQuestion，看起来像这样：

<div id="secondQuestion"> 
<script type='text/javascript'> 
$(function() { 
    $("input.radioButton").change(function(){ 
     $.ajax({ 
      type: 'post', 
      url: 'processor.php', 
      data: $('#myForm').serialize(), 
      success: function() { 
      alert('Done'); 
      } 
     }); 
    }); 
}); 
</script> 
<form id="myForm" action="" method="post"> 
    <span id="surveyQuestion">Question 2</span><br/> 
    <input type="hidden" name="secondQuestion" value="Question 2"> 
    <span class="info">0</span> 
    <input type="radio" class="radioButton" name="response" value="0"> 
    <input type="radio" class="radioButton" name="response" value="1"> 
    <input type="radio" class="radioButton" name="response" value="2"> 
    <input type="radio" class="radioButton" name="response" value="3"> 
    <input type="radio" class="radioButton" name="response" value="4"> 
    <input type="radio" class="radioButton" name="response" value="5"> 
    <span class="info">5</span> 
</form> 
</div> 

问题是，当我这样做时，新加载的div内的submit功能不再有效。我没有以“完成”警告框的形式得到确认。

我读了关于.on()的功能，但我觉得现在有点过头了???

我还必须问：这是一个明智的想法，还是我可以将问题完全放在另一个地方，并以其他方式一个接一个地称呼它们？因为现在我需要在第二个等之后加载question3.php ...

Answer 1

更好的选择是加载页面上的所有元素以开始。禁用第一个表单后的所有表单元素并隐藏它们的包装div。成功取消隐藏并启用每个后续问题。

事情是这样的......

<div id="question1"> 
    <form id="myForm1" action="" method="post"> 
     <span id="surveyQuestion">Question 1 ... 
    </form> 
</div> 
<div id="question2" style="display: none"> 
    <form id="myForm2" action="" method="post"> 
     <span id="surveyQuestion">Question 2.... 
    </form> 
</div> 
<div id="question3" style="display: none"> 
    <form id="myForm3" action="" method="post"> 
     <span id="surveyQuestion">Question 3.... 
    </form> 
</div> 
<script type="text/javascript"> 
$(function() { 

    $("#myForm1 input.radioButton").change(function(){ 
     submitForm(1, 2); 
    }); 
    $("#myForm2 input.radioButton").change(function(){ 
     submitForm(2, 3); 
    }); 
    $("#myForm3 input.radioButton").change(function(){ 
     submitForm(3, null); 
    }); 

    submitForm = function(thisQuestionNumber, nextQuestionNumber){ 
     $.ajax({ 
      type: 'post', 
      url: 'processor.php', 
      data: $('#myForm'+thisQuestionNumber).serialize(), 
      success: function() { 
       if(nextQuestionNumber != null){ 
        $("question"+nextQuestionNumber).show(); 
        $("#myForm"+nextQuestionNumber).enable(); 
       } else { 
        // any code to tie things up 
       } 
      } 
     }); 
    } 
}); 
</script> 

但如果你不绝对需要提交他们一次一个，这样的形式包装的一切，你可以重构这个代码和隐藏和显示每个问题的需要。然后只有在最后一个问题得到解答后才提交。像这样...

<form id="myForm" action="" method="post"> 
    <div id="question1"> 
     <span id="surveyQuestion">Question 1</span><br/> 
     <input type="radio" class="radioButtonGroup1" name="response1" value="0"> 
     ... 
    </div> 
    <div id="question2" style="display: none"> 
     <span id="surveyQuestion">Question 2</span><br/> 
     <input type="radio" class="radioButtonGroup2" name="response2" value="0"> 
     ... 
    </div> 
    <div id="question3" style="display: none"> 
     <span id="surveyQuestion">Question 3</span><br/> 
     <input type="radio" class="radioButtonGroup3" name="response3" value="0"> 
     ... 
    </div> 
</form> 
<script type="text/javascript"> 
$(function() { 

    $("input.radioButtonGroup1").change(function(){ 
     $("question2").show(); 
    }); 
    $("input.radioButtonGroup2").change(function(){ 
     $("question3").show(); 
    }); 
    $("input.radioButtonGroup3").change(function(){ 
     submitForm(); 
    }); 

    submitForm = function(){ 
     $.ajax({ 
      type: 'post', 
      url: 'processor.php', 
      data: $('#myForm').serialize(), 
      success: function() { 
       // any code to tie things up 
      } 
     }); 
    } 
}); 
</script> 

Answer 2

你有两个选择 - 使用“.on”作为你提到的或隐藏在其他答案中提到的。

使用。在（）

$("#surveyBox").on("submit", "#firstQuestion form", function(){ 
    //form1 ajax 
}); 
$("#surveyBox").on("submit", "#secondQuestion", function(){ 
    //form2 ajax 
}); 
$("#surveyBox").on("submit", "#thirdQuestion", function(){ 
    //form3 ajax 
}); 

隐藏窗体

与HTML -

<div id="firstQuestion"> 
    //first form 
</div> 
<div id="secondForm"> 
    //second form 
</div> 
<div id="thirdForm"> 
    //third form 
</div> 

以下内容添加到您的jQuery functiion的顶部 -

$("#secondForm").hide(); 
$("#thirdForm").hide(); 

然后在你的每一个Ajax调用你的成功函数可以隐藏提交的表单并显示下一个表单。即

$("#firstForm").hide(); 
$("#secondForm").show();