Question

我创建了具有模态的网站，我可以使用ajax提交表单。我对jquery和javascript不是很好，所以我需要一些帮助，因为事情不能很好地工作。

这是我在模态体中的表单代码。在这里，我能看到一切正常。

<form action="inc/queries.php" method="post" class="insert-movie">

      <div class="form-group">
        <label for="title">Title</label>
        <input type="text" class="form-control" name="InputTitle" id="InputTitle" placeholder="Enter title">
      </div>
      <div class="form-group">
        <label for="year">Year</label>
        <input type="date" class="form-control" name="InputYear" id="InputYear" placeholder="Year">
      </div>
      <div class="form-group">
        <label for="year">Duration</label>
        <input type="time" class="form-control" name="InputDuration" id="InputDuration" placeholder="Duration">
      </div>
      <div class="form-group">
        <label for="year">Gender</label></br>
        <select name="InputGender">

            <?php
            $pdo = connect();
            // display the list of all members in table view
            $sql = "SELECT * FROM zanr";
            $query = $pdo->prepare($sql);
            $query->execute();
            $list = $query->fetchAll();      

            foreach ($list as $rs) {
            ?>  
            echo'   
            <option name="InputGender" value="<?php echo $rs['id'] ?>"><?php echo $rs['naziv'] ?> </option>'

            <?php } ?>
        echo'   
        </select>
      </div>
      <div class="form-group">
        <label for="year">Description</label>
        <textarea class="form-control" name="InputDescription" placeholder="Description" rows="3"></textarea>
      </div>
      <div class="form-group">
        <label for="image">Image upload</label>
        <input type="file" id="InputImage">
        <p class="help-block">Select image of movie.</p>
      </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <input type="submit" class="btn btn-success" value="Submit">
  </div>

  </form>

这是javascript代码：

$('.insert-movie').on('submit', function() {
var that = $(this),
    url = that.attr('action'),
    method = that.attr('method'),
    data = {};

that.find('[name]').each(function(index, value) {
    var that = $(this),
        name = that.attr('name'),
        value = that.val();

    data[name] = value;
}); 

$.ajax({
    url: url,
    type: type,
    data: data,
    success: function(response) {
        console.log(response);
    }
});
return false;

}）;

以及最后一个操纵给定变量并插入数据库的代码。

<?php
 include 'config.php';
  if(isset($_POST['InputTitle'], $_POST['InputYear'],      $_POST['InputDuration'], $_POST['InputDescription'], $_POST['InputGender'])) {   
$pdo = connect();
$InputTitle       = $_POST['InputTitle'];
$InputYear        = $_POST['InputYear'];
$InputDuration    = $_POST['InputDuration'];
$InputDescription = $_POST['InputDescription'];
$InputGender      = $_POST['InputGender'];

$sql = $pdo->prepare("INSERT INTO filmovi(naslov,godina,trajanje,opis,id_zanr) VALUES(:field1,:field2,:field3,:field4,:field5)");
$sql->execute(array(':field1' => $InputTitle, ':field2' => $InputYear, ':field3' => $InputDuration, ':field4' => $InputDescription, ':field5' => $InputGender));
$affected_rows = $sql->rowCount();

}

问题是什么，问题是当我打开模态并输入数据时。我按提交，它将我带到query.php页面，女巫是空的，换句话说它不能正常工作。来自表单的数据存储在DB中，但有些错误，我不知道是什么。

Answer 1

您需要阻止提交事件的默认操作 -

$('.insert-movie').on('submit', function(event) { // pass the event to the function
    event.preventDefault(); // prevents the default action, keeping the browser on the same page

Answer 2

你有type：type，这是一个错误。

更改为：

$('.insert-movie').on('submit', function(e) {
e.preventDefault();
var that = $(this),
    url = that.attr('action'),
    method = that.attr('method'),
    data = {};

that.find('[name]').each(function(index, value) {
    var that = $(this),
        name = that.attr('name'),
        value = that.val();

    data[name] = value;
}); 

$.ajax({
    url: url,
    type: 'POST',
    data: data,
    success: function(response) {
        console.log(response);
    }
});
return false;
});

使用ajax

2 个答案: