Отправка формы через модальный с ajax

Question

Я создал веб-сайт, который имеет modal, через который я могу отправить форму с помощью 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(); 

}

В чем проблема, проблема в том, когда я открыть модальное и вводить данные. Я нажимаю submit, и он берет меня на странице query.php, где пусто, другими словами, она не работает должным образом. Данные из формы хранятся в БД, но что-то не так, и я не знаю, что.

Answer 1

У вас есть тип: тип, который является ошибкой.

Изменить на:

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

Answer 2

Вы должны предотвратить действие по умолчанию представить событие -

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