将引导向导表单提交到 sql 数据库

Posted 2023-04-13

【中文标题】将引导向导表单提交到 sql 数据库

【英文标题】：submit bootstrap wizard form to sql database

【发布时间】：2017-08-11 17:41:13

【问题描述】：

我正在使用一些免费的引导模板开发我的网站，并使用 asp.net 和 c# 来实现这个网站。

该模板带有表单向导模板页面，该页面有 3 个步骤，每个步骤都有一些问题。还有 3 个按钮：下一个、上一个和完成。

向导页面模板使用：

<!-- jQuery Smart Wizard -->
<script src="../vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>

我想将表单数据提交到 sql 数据库，但是我无法控制完成按钮和其他按钮。

<!-- jQuery Smart Wizard -->
<script>
  $(document).ready(function() 
    $('#wizard').smartWizard();

    $('.buttonNext').addClass('btn btn-success');
    $('.buttonPrevious').addClass('btn btn-primary');
    $('.buttonFinish').addClass('btn btn-default');
  );
</script>
<!-- /jQuery Smart Wizard -->

这是我的表格：

<!-- Smart Wizard -->
                <form class="form-horizontal form-label-left" id="add_project_form" runat="server" onsubmit="">

                <div id="wizard" class="form_wizard wizard_horizontal">

                    <ul class="wizard_steps">
                    <li>
                      <a href="#step-1">
                        <span class="step_no">1</span>
                        <span class="step_descr">
                                          Step 1<br />
                                          <small>General Information</small>
                                      </span>
                      </a>
                    </li>
                    <li>
                      <a href="#step-2">
                        <span class="step_no">2</span>
                        <span class="step_descr">
                                          Step 2<br />
                                          <small>Assign User</small>
                                      </span>
                      </a>
                    </li>
                    <li>
                      <a href="#step-3">
                        <span class="step_no">3</span>
                        <span class="step_descr">
                                          Step 3<br />
                                          <small>Create Project</small>
                                      </span>
                      </a>
                    </li>
                    </ul>


                    <div id="step-1">

                      <!-- Project Name -->
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="project_name">Project Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <asp:TextBox id="project_name" required="required" class="form-control col-md-7 col-xs-12" runat="server"></asp:TextBox>
                        </div>
                      </div>

                      <!-- PI name -->
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="pi_name">PI Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <asp:TextBox id="pi_name" required="required" class="form-control col-md-7 col-xs-12" runat="server"></asp:TextBox>
                        </div>
                      </div>

                   </div>

           <div id="step-2">

                      <!-- Assign Developer dropdown -->
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Assign Developer</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <asp:DropDownList ID="developers_DropDownList" runat="server" Width="100px">
                          </asp:DropDownList>
                        </div>
                      </div>

                   </div>


                    <div id="step-3">
                       <p>
                            Click on 'Finish' to create the new database.
                       </p>

                    </div>


                </div>
                <!-- End SmartWizard Content -->

              </form>

我知道如何使用 c# 中的按钮“onclick”功能提交表单数据。但在这里，我无法访问按钮。在这种情况下如何提交我的表单？

我可以向您展示“jquery.smartWizard.js”文件，但它很大。

澄清： 我不知道在这种情况下提交表单的正确方法是什么。 1-可以将插入数据的代码放入php文件中的数据库中并从form标签中的action =“”调用它吗？ 2-或者我可以在c#函数中将插入数据的代码放入数据库中吗？在这种情况下，如何从我的 asp 文件中调用此函数以及如何将表单数据传递给此函数？ 3- 或者我可以使用js函数将数据插入数据库吗？

记住：我无法控制完成按钮

【问题讨论】：

document.getElementById("add_project_form").submit();

@Bimal Das 你的意思是把 action=" " 放在表单标签里吗？然后？将保存到数据库的代码放在哪里？在 php 文件或 c# 文件或 javascript 中？

【参考方案1】：

好的，我假设这个问题已经得到解决，但对于其他有问题的人，我会尝试对解决方案或至少部分解决方案进行一些说明。

首先，您的意图是将数据从 html 表单插入数据库。 您的 HTML 表单如下所示：

     <form class="form-horizontal form-label-left" id="add_project_form" runat="server" onsubmit="">

如果您有一个处理此表单的 Web 应用程序，它应该像这样向后端发出“发布”请求：

    <form class="whatever-your-using" id="whatever-you-like" action="/handle-html-form" method="post">

这将使服务器/应用程序指向路由 /handle-html-form 的帖子，该路由应该具有从表单获取数据并将其保存到数据库的功能。

显然，您需要有一个提交按钮才能实际发送表单。我的方法是下载 smartWizard.js 并将其放到我自己的项目中

然后我编辑了文件以适合我的目的。例如这里是代码更改的小sn-p。

原始 smartWizard.js：

    function SmartWizard(target, options) 
    this.buttons = 
       next : $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext"),
       previous : $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious"),
       finish  : $('<a>'+options.labelFinish+'</a>').attr("href","#").addClass("buttonFinish")
    ;

我的 smartWizard.js：

    function SmartWizard(target, options) 
    this.buttons = 
      next : $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext"),
      previous : $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious"),
      finish: $('<a>' + options.labelFinish + '</a>').attr(
        type: 'submit',
        name: 'buttonFinish',
        value: 'Submit'
    ).addClass('buttonFinish')
;

我已经将提交按钮的属性直接添加到了finishButton。这是我找到解决问题的第一个解决方案。

值得一提的是，smartWizard 的整个 HTML 必须嵌套在一个表单元素中。否则，将保存向导每个步骤中的所有元素。 这是一个 HTML 示例，用于阐明我想说的内容：

    <form class="whatever" id="whatever" action="/handle-html-form" method="post">
      <div class="form_wizard wizard_horizontal" id="wizard">
      // Then all the steps below but still inside the form

希望对你有帮助