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

Question

我正在使用 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();
            });

Answer 1

删除此行

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

它应该可以工作(我有同样的问题并且删除了这一行有效。)

无论如何，该行都是不必要的，看起来您的代码与示例中的代码相同，我猜测如果您没有具有该 Id 的元素，则会导致不相关的错误。