Как отправить данные из динамически добавляемой формы на php с помощью ajax
Я создал динамическую форму с данными из базы данных MySQL, и она отлично работает. Проблема в том, что я не знаю, как заставить ajax читать форму.
Предполагая, что приведенный ниже код представляет собой единую форму:
<form>
<!-- input type content here -->
</form>
Эквивалентный код ajax будет:
$(document).ready(function(
$.ajax({
url: 'url',
data: $("#frm").serialize();
//insert more code...
});
))
Что, если бы моя форма была динамически добавлена следующим образом:
<?php while($row = $result->fetch_assoc()){
<!-- insert code for dynamic grid see sample link [here][1]
<form>
<input type = "radio" name = "rate" value = "1">
<input type = "radio" name = "rate" value = "2">
<input type = "radio" name = "rate" value = "3">
<input type = "text" name = "name" value = "<?php echo $row['p_name']?>"
<input type = "text" name = "price" value = "<?php echo $row['p_price']?>"
</form>
}?>
Как мне получить эти данные, если моя форма была создана динамически? Нужно ли мне вообще добавлять в форму символ массива, например <form name = "myFrm[]"?. Если это так, как бы я даже назвал его ajax?
То же самое независимо от того, построена ли форма динамически или статически. .serialize() принимает любой <input> с именем, которое существует в указанном <from>.
Последнее, что я помню, .serialize() не включает отправку типа ввода. Не знаю, правда ли это
@ frz3993 может, если вы укажете ему атрибут name.
Ах, на самом деле это кнопка типа submit api.jquery.com/serialize.
Ответы 2
В настоящее время ваш JavaScript говорит:
- когда документ готов:
- сделать что-нибудь с формой
Поэтому, прежде чем ваш пользователь даже ввел данные, вы выполнили эту команду $.ajax, вы, вероятно, захотите обернуть ее каким-то прослушивателем событий, например change, или, возможно, добавить кнопку отправки и отправить данные.
Это верный момент, но он не отвечает на фактический вопрос ОП. Если вы добавите что-то, что касается фактического вопроса, будет лучше, иначе это действительно просто комментарий
Пожалуйста, попробуйте решение ниже.
Установить идентификатор формы динамически с переменной автоинкремента.
<?php $i=1; while($row = $result->fetch_assoc()){
<!-- insert code for dynamic grid see sample link [here][1]
<form id = "frm<?php echo $i;?>">
<input type = "radio" name = "rate" value = "1">
<input type = "radio" name = "rate" value = "2">
<input type = "radio" name = "rate" value = "3">
<input type = "text" name = "name" value = "<?php echo $row['p_name']?>">
<input type = "text" name = "price" value = "<?php echo $row['p_price']?>">
<input type = "button" name = "button" value = "click" class = "common_submit_btn">
</form>
$i++;
}?>
Ниже код JavaScript для получения идентификатора динамических форм в ajax.
$(document).ready(function(
$(".common_submit_btn").click(function(){
//here you can get submitted form data in console.
console.info($('#'+$(this).closest('form').attr('id')).serialize());
$.ajax({
url: 'url',
data: $('#'+$(this).closest('form').attr('id')).serialize(),
//insert more code...
});
});
});
всегда есть такая ошибка., не уверен, что это такое, но всякий раз, когда я нажимаю переключатель, например, в приведенном выше коде, он остается ровно на значении 3, и я не могу щелкнуть другую группу переключатель, который был создан динамически.,
упс, nvm that., это действительно работает с кнопкой, но давайте пока удалим тип ввода., как мы будем обрабатывать это событие, используя только радиокнопку?