Отправка формы с загруженными элементами формы

Question

У меня есть форма, которая сгенерирована с использованием функции jQuery's load(). Затем я пытаюсь отправить форму, используя функцию ajax() jQuery. Кажется, это не работает, и я думаю, что это из-за загруженного контента.

Вот что я работаю с:

Я использую три страниц для этой конкретной операции,

• Edit.php
• load-qstn-form.php
• edit-qstn.php

В edit.php это код, который отношение к этому вопросу,

Элемент:

<form class="form-edit-qstn clr mrg-btm-med" method="post" action="./edit-qstn.php"></form> 

.load() который из другого загруженного элемента:

$(document).on('click', '.trg-edit-qstn', function(event) { 
    var that = $(this); 
    var itemID = that.data("id"); 

    $('.form-edit-qstn').load('./load-qstn-form.php?id=' +itemID); 
    event.preventDefault(); 
}); 

$.ajax функции:

$('.form-edit-qstn').submit(function(event) { 
    if(confirm('Are you sure?')) { 
     var form = $(this); 
     var formid = form.find("input[name=formID]").val(); 
     var formname = form.find("input[name=formName]").val(); 
     var button = $('.form-edit-qstn button'); 

     $.ajax({ 
      method: form.attr("method"), 
      action: form.attr("action"), 
      data: { formID: formid, formName: formname } 
     }) 
     .done(function(data) { 
      if(data != 0) { 
       button 
        .removeClass('btn-default') 
        .addClass('btn-success') 
        .html('<i class="fa fa-fw fa-check"></i> Success'); 
      } else { 
       button 
        .removeClass('btn-default') 
        .addClass('btn-danger') 
        .html('<i class="fa fa-fw fa-close"></i> Failure'); 
      }; 
      setInterval(function() { 
       button 
        .removeClass('btn-success btn-danger') 
        .addClass('btn-default') 
        .html('<i class="fa fa-fw fa-pencil"></i> Submit'); 
      }, 5000); 
     }) 
     .fail(function(data) { 
      button 
       .removeClass('btn-default') 
       .addClass('btn-danger') 
       .html('<i class="fa fa-fw fa-close"></i> Failure'); 
      setInterval(function() { 
       button 
        .removeClass('btn-success btn-danger') 
        .addClass('btn-default') 
        .html('<i class="fa fa-fw fa-pencil"></i> Submit'); 
      }, 5000); 
     }) 
    }; 
    event.preventDefault(); 
}); 

Вот load-qstn-form.php:

<?php 
    include("./config.php"); 

    $itemID = $_GET['id']; 

    $getItem = $con->prepare("SELECT itemID,itemName FROM items WHERE itemID=?"); 
    $getItem->bind_param("i", $itemID); 
    $getItem->execute(); 
    $getItem->store_result(); 
    if($getItem->num_rows > 0) { 
    $getItem->bind_result($itemID,$itemName); 
    while($getItem->fetch()) { 
?> 
<input name="formID" type="hidden" value="<?php echo $itemID; ?>" required /> 
<table class="fixed full outline"> 
    <tr class="head"> 
    <td colspan="3"><p>Edit "<?php echo $itemName; ?>"</p></td> 
    </tr> 
    <tr> 
    <td><p>Edit Question</p></td> 
    <td><input name="formName" type="text" value="<?php echo $itemName; ?>" autocomplete="off" required /></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td><button class="btn-default"><i class="fa fa-fw fa-pencil"></i> Submit</button></td> 
    <td></td> 
    </tr> 
</table> 
<?php 
    }; 
    } else { 
?> 
<p class="alert">No Item Found</p> 
<?php 
    }; 
    $getItem->close(); 
?> 

Вот edit-qstn.php:

<?php 
    include("./config.php"); 

    $formID = $_POST['formID']; 
    $formName = $_POST['formName']; 

    $updateQstn = $con->prepare("UPDATE items SET itemName=? WHERE itemID=?"); 
    $updateQstn->bind_param("si", $formName,$formID); 
    if($updateQstn->execute()) { 
?> 
1 
<?php 
    } else { 
?> 
0 
<?php 
    print_r($updateQstn->error); 
    }; 
    $updateQstn->close(); 
?> 

Я думаю, что проблема исходит из элементов формы в процессе загрузки, так как это Ajax код работает с момента, когда я использую его на форме, не имеет загруженных элементов.

Как связать input s с document?

примечание: некоторый код состоит из 4 пробелов в закладке, другие 2 пространства на вкладке

Edit: Похоже, что код не дотягивает, когда он попадает в edit-qstn.php, как $_POST правильно принят, но база данных Безразлично Кажется, обновление.

Answer 1

Итак, я решил исправить проблему ... как ни странно ajax method post не работает, поэтому я попытался перейти на $.post, который, казалось, работал.

$('.form-edit-qstn').submit(function(event) { 
    if(confirm('Are you sure?')) { 
    var form = $(this); 
    var formid = form.find("input[name=formID]").val(); 
    var formname = form.find("input[name=formName]").val(); 
    var button = $('.form-edit-qstn button'); 

    $.post(
     form.attr("action"), 
     { formID: formid, formName: formname } 
    ) 
    .done(function(data) { 
     if(data != 0) { 
     button 
      .removeClass('btn-default') 
      .addClass('btn-success') 
      .html('<i class="fa fa-fw fa-check"></i> Success'); 
     } else { 
     button 
      .removeClass('btn-default') 
      .addClass('btn-danger') 
      .html('<i class="fa fa-fw fa-close"></i> Failure'); 
     }; 
     setInterval(function() { 
     button 
      .removeClass('btn-success btn-danger') 
      .addClass('btn-default') 
      .html('<i class="fa fa-fw fa-pencil"></i> Submit'); 
     formname = ""; 
     }, 5000); 
    }) 
    .fail(function(data) { 
     button 
     .removeClass('btn-default') 
     .addClass('btn-danger') 
     .html('<i class="fa fa-fw fa-close"></i> Failure'); 
     setInterval(function() { 
     button 
      .removeClass('btn-success btn-danger') 
      .addClass('btn-default') 
      .html('<i class="fa fa-fw fa-pencil"></i> Submit'); 
     formname = ""; 
     }, 5000); 
    }) 
    }; 
    event.preventDefault(); 
}); 

Answer 2

После просмотра вашего кода, вы ожидаете событие submit на вашем элементе формы; однако в запрошенном коде отсутствует кнопка отправки.

Чтобы сохранить свой код, как есть, вы можете изменить функцию слушателя:

$('.form-edit-qstn').on('click', '.btn-default', function (e) {

или изменить тип кнопки в отправке:

type='submit'

<button class="btn-default" type='submit'><i class="fa fa-fw fa-pencil"></i> Submit</button>