时间戳

首页 > 解决方案 > 如何通过 fullcalendar 使用 AJAX 将 boostrap 模式输入插入到 SQL 表中

javascript - 如何通过 fullcalendar 使用 AJAX 将 boostrap 模式输入插入到 SQL 表中

问题描述

我已经尝试了一段时间来让这个工作。我正在努力从模式中获取用户输入并将其插入到我在 phpmyadmin 中的数据库中。任何帮助将不胜感激。

1）使用选择回调我提出了一个模式：

    select: function(start, end, allDay)
{
    $('#myModal').modal('show');
},

2) HTML 中的模态本身：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Event</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <form>
               <div class="form-group">
                  <label for="FormControlInput1">Task Title</label>
                  <input type="text" class="form-control" id="title" placeholder="Enter Task Title">
               </div>
               <div class="form-group">
                  <label for="FormControlInput2">Task Number</label>
                  <input type="text" class="form-control" id="number" placeholder="Enter Task Number>
               </div>
               <div class="form-group">
                  <label for="FormControlInput3">Location</label>
                  <input type="text" class="form-control" id="location" placeholder="Enter Location">
               </div>
               <div class="form-group">
                  <label for="FormControlTextarea1">Tooling Required</label>
                  <textarea class="form-control" id="tooling" placeholder="Enter the tools required for the task here" rows="3"></textarea>
               </div>
               <div class="form-group">
                  <label for="FormControlTextarea2">Consumables</label>
                  <textarea class="form-control" id="consumables" placeholder="Enter the consumables required for the task here" rows="3"></textarea>
               </div>
               <div class="form-group">
                  <label for="FormControlSelect1">Safety Condition</label>
                  <select class="form-control" id="safety">
                     <option>0</option>
                     <option>1</option>
                     <option>2</option>
                     <option>3</option>
                     <option>4</option>
                  </select>
               </div>
            </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="buttonAddEvent">Add Event</button>
         </div>
      </div>
   </div>
</div>

3）此时我想使用我制作的 insert.php 文件，该文件适用于代码中的其他函数：

<?php

//insert.php

$connect = new PDO('mysql:host=hostname;dbname=dbname', 'username', 'password');

if(isset($_POST["title"]))
{
 $query = "
 INSERT INTO events
 (title, number, location, tooling, consumables, safety, start_event, end_event)
 VALUES (:title, :number, :location, :tooling, :consumables, :safety, :start_event, :end_event)
 ";
 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':title' => $_POST['title'],
   ':number' => $_POST['number'],
   ':location' => $_POST['location'],
   ':tooling' => $_POST['tooling'],
   ':consumables' => $_POST['consumables'],
   ':safety' => $_POST['safety'],
   ':start_event' => $_POST['start'],
   ':end_event' => $_POST['end']
  )
 );
}


?>

我通常使用以下代码插入数据，但是这使用了我想用模态输入替换的 prompts() ：

select: function(start, end, allDay)
{
 var title = prompt("Enter Task Title");
 if(title)
 {
  var number = prompt("Enter Task Number");
  var location = prompt("Enter Train Location");
  var tooling = prompt("Enter Tooling Required");
  var consumables = prompt("Enter Consumables Required");
  var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
  var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
  $.ajax({
   url:"insert.php",
   type:"POST",
   data:{title:title, number:number, location:location, tooling:tooling, consumables:consumables, start:start, end:end},
   success:function()
   {
    calendar.fullCalendar('refetchEvents');
   }
  })
 }
},

标签： javascriptphpsqlajaxfullcalendar

解决方案

需要使用 .on() 将数据从模态输入传递到变量

select: function(start, end, allDay)
{
  var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
  var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
  $('#myModal').modal('show')
  $('#buttonAddEvent').on('click', function (){
    var title = $("#myModal #title").val().trim();
    var number = $("#myModal #number").val().trim();
    var location = $("#myModal #location").val().trim();
    var tooling = $("#myModal #tooling").val().trim();
    var consumables = $("#myModal #consumables").val().trim();
    var safety = $("#myModal #safety").val().trim();
    var mockEvent = {title:title, number:number, location:location, tooling:tooling, consumables:consumables, safety:safety, start:start, end:end};
    $('#calendar').fullCalendar('renderEvent', mockEvent);
    $('#buttonAddEvent').unbind('click');
    $('#myModal').modal('hide');
    $.ajax({
     url:"insert.php",
     type:"POST",
     data:{title:title, number:number, location:location, tooling:tooling, consumables:consumables, safety:safety, start:start, end:end},
     success:function()
     {
        calendar.fullCalendar('refetchEvents');
     }
   });
  });
},

感谢@ADyson 指出正确的方向。

推荐阅读