使用Bootstrap Wizard将数据发布到给定的URL

时间:2013-09-24 14:23:14

标签: javascript jquery twitter-bootstrap

我正在使用bootstrap显示向导,如example所示。当我单击“提交”按钮时,数据不会发布到给定的URL /wizard_submit。帮助

注意:有关完整代码,请访问给出的示例。

 <div class="wizard" id="wizard-demo">
        <div class="wizard-card" data-onValidated="setServerName" data-cardname="name">
                <h1>First</h1>
<div class="control-group">
                    <input id ="name" type="text"
                     />
                </div>
        </div>
            <div class="wizard-card" data-onload="" data-cardname="location">
                <h3>LAST</h3>
    <div class="wizard-input-section">

                <select data-placeholder="Monitor nodes" style="width:350px;" class="chzn-select">
                    <option value=""></option>
                        <option>Male</option>
                        <option>Female</option>

                </select>

            </div>
            </div>

            <div class="wizard-success">
                <div class="alert alert-success">
                                Success!!!!
                </div>

                <a class="btn im-done">Close</a>
            </div>

        </div>

的Javascript

$(function() {

                $.fn.wizard.logging = true;

                var wizard = $("#wizard-demo").wizard({
                    showCancel : true
                });
                wizard.on("submit", function(wizard) {
                    $.ajax({
                        url : "/wizard_submit",
                        type : "POST",
                        data : wizard.serialize(),
                        success : function() {
                            wizard.submitSuccess();

                            wizard.hideButtons();
                            wizard.updateProgressBar(0);
                        },
                        error : function() {
                            wizard.submitError();
                            wizard.hideButtons();
                        }
                    });
                });

                $(".chzn-select").chosen();

                wizard.el.find(".wizard-ns-select").change(function() {
                    wizard.el.find(".wizard-ns-detail").show();
                });

                wizard.el.find(".create-server-service-list").change(function() {
                    var noOption = $(this).find("option:selected").length == 0;
                    wizard.getCard(this).toggleAlert(null, noOption);
                });

                wizard.on("submit", function(wizard) {
                    var submit = {
                        "hostnamed" : $("#new-server-fqdn").val()
                    };

                    setTimeout(function() {
                        wizard.trigger("success");
                        wizard.hideButtons();
                        wizard._submitting = false;
                        wizard.showSubmitCard("success");
                        wizard.updateProgressBar(0);
                    }, 2000);
                });

                wizard.el.find(".wizard-success .im-done").click(function() {
                    wizard.reset().close();
                });

                wizard.el.find(".wizard-success .create-another-server").click(function() {
                    wizard.reset();
                });

                $(".wizard-group-list").click(function() {
                    alert("Disabled for demo.");
                });

                $("#open-wizard").click(function() {
                    wizard.show();
                });

                wizard.show();
            });

1 个答案:

答案 0 :(得分:0)

删除此行

 var submit = {
                    "hostnamed" : $("#new-server-fqdn").val()
                };

它应该可以工作(我遇到了同样的问题并删除了这条线。)

无论如何,该行是不必要的,看起来你在代码中有相同的代码,我猜你是否有一个带有该ID的元素,它会导致无关的错误。