Question

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

我在iframe上面有一个简单的html表单，它将提交要处理的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，其中有一个id为secondQuestion的div，如下所示：

<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功能不再起作用。我没有以＆＃34;完成＆＃34;的形式得到确认。警报框。

我读到.on()函数，但我认为现在它有点过头了???

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

Answer 1

您有两种选择 - 使用＆＃34; .on＆＃34;正如你在另一个答案中提到或隐藏的那样。

使用.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函数的顶部 -

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

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

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

Answer 2

更好的选择是加载页面上的所有元素。在第一个表单元素之后禁用所有表单元素并隐藏它们的包装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>

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

2 个答案: