Отправка формы Javascript предотвращает дефолт по умолчанию, когда форма извлекается с помощью AJAX

Question

Отправка формы Javascript предотвращает дефолт по умолчанию, когда форма извлекается с помощью AJAX

У меня есть форма, которую я отправляю с помощью Javascript и предотвращение дефолта. Все отлично работает Тем не менее, когда я получаю форму с помощью вызова AJAX вместе с другими данными из БД, форма больше не будет отправляться с помощью Javascript, но пытается обновить всю страницу обычными action = «» и method = «post». Кажется, что из-за вызова AJAX предотвращение как-то отключено?

AJAX Позвоните, чтобы получить форму и другие данные из БД:

<a href="#" onClick="return false" onmousedown="javascript:loadnames('<?php echo $postid;?>');">Load Names</a>

<div id="form-container"></div>
<!-- is empty, but contains the form upon ajax call above-->

AJAX извлек HTML-форму для отправки с Javascript:

<div id="form-container">
<!--let user add a name to DB not contained in DB list below-->
<form method="post" action="" id="addnameform">
<input name="name" id="name" type="text" value=""/>
<input type="submit" name="add-name-submit" value="Add"/>
</form>
<!--get a list of names from DB-->
<?php
$sql = "SELECT * FROM names ORDER BY name ASC";
$query = mysqli_query($connection, $sql);
while ($row = mysqli_fetch_array($query)) {
$name = $row["name"];
echo ...
} // end while
?>
</div><!--end-container-->

Javascript для отправки HTML-формы выше:

$("#addnameform").submit(function(event) {
event.preventDefault();
var $form = $("#addnameform");
var name = $form.find( "input[name='name']" ).val();
$.ajax({
url: "ajax.php",
type: "POST",
...

Как уже говорилось, все отлично работает, когда форма отображается на странице при загрузке страницы. Но как только я обертываю его внутри контейнера, который сначала «пуст», но обнаруживается при вызове AJAX, предотвращение ошибок как-то отключается.

0

ajax form-submit javascript php preventdefault

Решение

Другие решения

Вам нужно иметь родительский объект dom, который вы загружаете в асинхронную форму. Можете ли вы попробовать свой код jQuery, как показано ниже;

$(function(){
$("#form-container").append("<form id=\"addnameform\" method=\"post\"><button type=\"submit\">Submit Me</button></form>");

$("#form-container").on("submit","#addnameform",function(event){
event.preventDefault();
alert("Submit fired!");
//Your business goes here...
return false;
});
});

Вот рабочий пример: https://jsfiddle.net/1fta504n/2/

PS: # form-container может быть любым видом элемента dom из документа, «body», «div», «.class» и т. Д.

Надеюсь это поможет

0

Источник

Accepted Answer

Вы должны привязать событие submit к своему телу (или любому другому родительскому DOM, существующему с самого начала)

$("body").on('submit', '#addnameform', function(event) {
//...
});

2