通过Bootstrap模式发送表单失败(POST)

时间:2017-09-08 15:14:16

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

我正在使用Bootstrap模式对话框来显示表单,具体取决于用户的操作。如果用户点击new,表单假设允许用户添加新数据,如果编辑,则需要查询DB并获取该特定条目的结果并允许用户编辑,如果查看,则查询DB只显示结果。

我无法获得代码工作的第一部分。假设将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;
  }

?>

1 个答案:

答案 0 :(得分:-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&amp; 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>