【问题标题】:Failure on Sending Form by Bootstrap Modal (POST)通过引导模式 (POST) 发送表单失败
【发布时间】:2017-09-08 15:14:15
【问题描述】:

我正在使用 Bootstrap 模式对话框来根据用户的操作来显示一个表单。如果用户单击新建,表单假设允许用户添加新数据,如果编辑,则需要查询数据库并获取该特定条目的结果并允许用户编辑,如果查看,查询数据库仅显示结果。

我无法完成代码工作的第一部分。假设将 PHP 作为数据发送到 PHP 文件并返回一条消息,但它也没有这样做。当我单击保存时,没有任何反应。

如何确保当我点击提交时它会将数据发送到 test.php 并返回一条消息?

脚本

<script>
    // Form Text Correction
    function form(task) {
        var task = task;
        $("#task").text(task);
        $("#action").val(task);
    }
    $("#save").click(function(){
        var company = $("#company").val();
     if(company=='')
     {
         alert("Please enter UserId");
     }
     else{
        $.post("test.php", //Required URL of the page on server
           { // Data Sending With Request To Server
              company:company,
           },
     function(response,status){ // Required Callback Function
         $("#result").html(response);//"response" receives - whatever written in echo of above PHP script.
         $("#form")[0].reset();
      });
    }
    });
</script>

表格

<a id="create-user" class="btn btn-primary add" data-toggle="modal" data-target="#ModalDialog" href="#" title="Add" onClick="form('Add')"></a>
<a data-toggle="modal" data-target="#ModalDialog" class="edit" href="#" title="Edit" onClick="form('Edit')"></a>
<a data-toggle="modal" data-target="#ModalDialog" class="view" href="#" title="View" onClick="form('View')"></a>
<div class="modal" id="ModalDialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h5 class="modal-title" id="Label"><span id="task"></span> a Vendor</h5>
      </div>
      <div class="modal-body">
          <form name="VendorForm" id="VendorForm" action="/functions/updateVendor.php" method="post">
            <input type="hidden" name="action" id="action" value="">
            <fieldset>
                <div id="modalLeft" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <div class="form-group row">
                        <label for="company" class="col-2 col-form-label">Company</label>
                        <div class="col-10">
                            <input type="text" name="company" class="form-control" id="company">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="contact" class="col-2 col-form-label">Contact</label>
                        <div class="col-10">
                            <input type="text" name="contact" class="form-control" id="contact">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="contactTitle" class="col-2 col-form-label">Contact Title</label>
                        <div class="col-10">
                            <input type="text" name="contactTitle" class="form-control" id="contactTitle">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="notes">Brief Description</label>
                        <textarea class="form-control" rows="2" cols="25" id="briefDescription"></textarea>
                    </div>
                </div>
                <div id="modalRight" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <div class="form-group row">
                      <label for="workNumber" class="col-2 col-form-label">Work Number</label>
                      <div class="col-10">
                        <input class="form-control" type="number" placeholder="(xxx) xxx-xxxx" id="workNumber">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="mobileNumber" class="col-2 col-form-label">Mobile Number</label>
                      <div class="col-10">
                        <input class="form-control" type="number" placeholder="(xxx) xxx-xxxx" id="mobileNumber">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="email" class="col-2 col-form-label">Email</label>
                        <div class="col-10">
                            <input type="email" class="form-control" placeholder="you@example.com" id="email">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="notes">Notes</label>
                        <textarea class="form-control" rows="2" cols="25" id="notes"></textarea>
                    </div>
                </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="save" type="button" class="btn btn-primary">Save</button>
      </div>
      <div id="result"></div>
            </fieldset>
          </form>
    </div>
  </div>
</div>

Test.php

<?php
   if($_POST["company"])
   {
        $user = $_POST["company"];
       // Here, you can also perform some database query operations with above values.
       echo "Your user id is: ". $company;
  }

?>

【问题讨论】:

  • 它究竟是如何“失败”的?错误信息? HTTP 代码?数据不正确?我们需要一些调试信息来为我们提供线索。 “不工作”并不能真正解释问题的确切性质。
  • 当我点击保存时,没有任何反应。我写了一个表单提交功能也没有帮助,仍然没有发生。
  • 您的保存按钮应该被赋予 type="submit" 或赋予它 onClick 事件以调用任何函数。这会有所帮助
  • 提交没有用,因为 PHP 函数挡住了路,把表格带到别处。我保留了按钮,但添加了 onClick="save()" 并将其更改为功能。

标签: php jquery twitter-bootstrap forms bootstrap-modal


【解决方案1】:

这是我想出的答案

PHP

<?php
   if($_POST["company"])
   {
        $company = $_POST["company"];
       // Here, you can also perform some database query operations with above values.
       echo "Your user id is: ". $company;
  }

?>

HTML & jQuery

<script>
    // Form Text Correction
    function form(task) {
        var task = task;
        $("#task").text(task);
        $("#action").val(task);
    }
    function save(){
        var company = $("#company").val();
     if(company=='')
     {
         alert("Please enter UserId");
     }
     else{
        $.post("test.php", //Required URL of the page on server
           { // Data Sending With Request To Server
              company:company,
           },
     function(response,status){ // Required Callback Function
         $("#result").html(response);//"response" receives - whatever written in echo of above PHP script.
         // $("#form")[0].reset();
      });
    }
    };

</script>
<button type="button" onClick="save()" class="btn btn-primary">Save</button>

【讨论】:

  • $("#save").click(function(){ 应该已经这样做了,而不需要复古的内联事件处理程序。它不会的唯一原因是,如果模态仅在声明 $("#save").click(function(){` 后才呈现到页面。在这种情况下,$(document).on("click", "#save", function(event) { 会解决它,使用委托事件。比内联事件处理程序更简洁。有关详细信息,请参阅“直接和委托事件”部分下的api.jquery.com/on
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-03-11
  • 2015-03-30
  • 2015-07-29
  • 2016-04-06
  • 2015-08-04
  • 1970-01-01
相关资源
最近更新 更多