通过带有ajax的模态提交表单

I had created website that has modal through which i can submit form using ajax. I am not very good with jquery and javascript so i need some help cause things are not working so well.

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

This is my form code in modal body. Here everything works fine as i can see.

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

<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>

This is javascript code:

这是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;

});

and last, code that manipulates given variables and inserts into database.

最后,代码操纵给定的变量并插入数据库。

<?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();

}

What is the problem, problem is when i open modal and enter data. I press submit and it takes me on query.php page witch is empty, in another words it isn't working properly. Data from form are stored in DB but something is wrong and i don't know what.

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

2 个解决方案

#1

You have type: type, which is an error.

你有type:type,这是一个错误。

Change to:

$('.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;
});

#2

You need to prevent the default action of the submit event -

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

$('.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

#1