Question

我有一个需要3个步骤的表单，1是一些细节，然后当用户按下＆＃34; Next＆＃34;按钮它不使用ajax就可以移动到下一步而不检查一切是否正确。

我今天搬到了angularJS，我真的很想让它发挥作用。

这就是我所拥有的。

<form id="mccheckout" method="post" action="{$smarty.server.PHP_SELF}?a=confproduct&amp;i={$i}">
    <input type="text" name="namefiled" id="namefiled" value="" required="" ng-maxlength="30" placeholder="Enter the name" ng-model="name" class="ng-valid ng-dirty">
    <input type="submit">
</form>

当我按下一步时，如果名称字段正确，我想加载表单的下一步。

下一步应该是：

<input type="text" name="namefiled" id="namefiled" value="" required="" ng-maxlength="30" placeholder="Enter the password" ng-model="password" class="ng-valid ng-dirty">

这应该是同一个<form>我不希望它在表单之外，提交按钮应该只检查一切是否正确，然后调用下一个表单。

我不知道如何去做这个并且我对ajax相当新。我应该通过ajax请求从同一页面或外部文件加载表单内容吗？

你们可以提供一些关于如何做到这一点的示例代码。

感谢您的时间，

Answer 1

这是一种可行的方法：

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>IrishGeek82 SO Help File</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300,400italic,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script>
    $(document).ready(function() 
                      {
                      }
                    );
    </script>
    <style type="text/css">
    .invalid
    {
        border:1px solid red;
    }
    </style>
    <script type="text/javascript">

    function validateStep1()
    {
        return true;
    }

    function validateStep2()
    {
        return true;
    }

    function validateStep3()
    {
        return true;
    }

    function validateStep4()
    {
        return false;
    }

    //Start at step 0
    var currStep = 0;

    //Each "step" refers to an element in your form that has an ID.
    //We include a reference to a validation function in the JSON String
    //So we can validate the field.
    var steps    = [{"stepName":"step1","validationMethod":validateStep1},
                    {"stepName":"step2","validationMethod":validateStep2},
                    {"stepName":"step3","validationMethod":validateStep3},
                    {"stepName":"step4","validationMethod":validateStep4}];

    //This function runs the validation routine on the current 
    //step and advances to the next step on TRUE.
    function validateForm(formObj)
    {
        console.log("Curr Step:"+currStep);

        //You can perform your validation in here and only advance to the next step if you can.
        //You could just as easily use anonymous functions in the JSON Object above.
        if (steps[currStep].validationMethod())
        {
            currStep++;

            if (currStep <= steps.length)
            {
                $("#"+steps[currStep].stepName).css("display","block");
                console.log("Curr Step:"+currStep);
            }
            else
            {
                currStep--;
            }
        }
        else
        {
            $("#"+steps[currStep].stepName).addClass("invalid");
        }
    }

    </script>
</head>
<body>
<form id="someForm" name="someForm" action="#" method="get">

    <input type="text" id="step1" name="step1" style="display:block;" value=""/>
    <input type="text" id="step2" name="step2" style="display:none;" value=""/>
    <input type="text" id="step3" name="step3" style="display:none;" value=""/>    
    <input type="text" id="step4" name="step4" style="display:none;" value=""/>
    <hr>
    <button id="navButton" onclick="validateForm('someForm');return false;">Next</button>
</form>
</body>
</html>

我创建了一个id数组，它们是表单中的元素以及验证每个步骤的函数。

主函数validateForm（）查找当前步骤的验证函数，运行它，如果结果为True，则前进到下一步并显示该字段。

如果有帮助，请告诉我:)

Answer 2

提交操作：服务器端脚本。

使用style.visibility或style.display更改表单的内容

sUBMIT按钮的内容是否可以重新加载文件？它的意思是： document.getElementById（“mccheckout”）。动作这个属性可以更改而无需重新加载文档？

制作超过1张FORM（每步1张）如果step1-form ok，则使step2-form可见，step1-form隐藏（隐藏step3-form）。

...

如何使用下一个按钮加载内容

2 个答案: