Как я могу отправить форму из модального с помощью ajax

Question

Я потратил дни на то, чтобы сделать это далеко, и я надеюсь, что кто-то может помочь мне на последнем этапе. У меня есть форма внутри модала, которую я хочу отправить в php-файл с помощью ajax. Я новичок с jquery, и я пытаюсь понять, как заставить эти два бита jquery работать вместе.

См fiddle

Форма и Modal

<a href="#my_modal" data-toggle="modal" data-review="submit this information to database">Open Modal</a> 

<div class="modal" id="my_modal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title">Modal header</h4> 
     </div> 
     <div class="modal-body"> 
     <form> 
     <p>some content</p> 
     <input type="text" name="review" value=""/> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="submit" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

Jquery

//Variable is passed to modal 
$('#my_modal').on('show.bs.modal', function(e) { 
    var review = $(e.relatedTarget).data('review'); 
    $(e.currentTarget).find('input[name="review"]').val(review); 
}); 

//Now post my form with the following ajax code when Modal Submit button is pressed. 
$.post('insert.php', {review: review}, 
function(data){ 
    $('#myModal').modal('hide'); 
    $("#message").html(data); 
    $("#message").fadeIn(500); 
    $("#message").fadeOut(2500); 
}); 

Answer 1

Изменить тип кнопку buttton вместо покориться и добавить идентификатор, так что вы можете контролировать щелчок, используя javascript click event, replace:

<button type="submit" class="btn btn-primary">Save changes</button> 

по:

<button type="button" class="btn btn-primary" id='submit-form'>Save changes</button> 

И добавить щелчок evetn к кнопке:

$('body').on('#submit-form', 'click', function(){ 
    var review = $('input[name="review"]').val(); 

    $.post('insert.php', {review: review}, 
     function(data){ 
      $('#myModal').modal('hide'); 
      $("#message").html(data); 
      $("#message").fadeIn(500); 
      $("#message").fadeOut(2500); 
    }); 
}) 

Answer 2

Держите модальный-колонтитуле и модальный-тело внутри тега формы. Добавьте идентификатор, чтобы отправить кнопку, а затем выполните вызов ajax.

$("#submitButtonId").on("click",function(){ 

    //Ajax call here 

    } 

Answer 3

, пожалуйста, используйте код js следующим образом.

$('.btn').click(function(e) { 
    var review = $(this).find("input[name=review]").val(); 

      var request = $.ajax({ 
      url: "insert.php", 
      method: "POST", 
      data: { review: review }, 
      dataType: "html" 
     }); 
})