form submit ajax
Добрый день,
есть html файл с 2мя стандартными формами типа <body> <form id='form_seach'> <input...> </form> <div id='info'></div> </body> также, есть <script>
$(document).ready(function() {
$("#form_seach").submit(function(event){
event.preventDefault();
});
$('#submit_btn').click(...
$.post...
});
тут всё работает. Т.е. происходит какой-то запрос на поиск информации и ответ возвращается ввиде формы сзаполенными полями, которые я могу отредактировать и нажав кнопку "обновить" отправить обновленный данные в БД например. post запрос в ajax возвращает данные в виде другой формы с заполненными полями и своей кнопкой submit. Я не захотел возвращать данные в виде массива в JS, а заморочился в php и передал уже готовую html-форму $.post("update_data.php", {}, function(data){
$('#info')html(data);
});
так вот проблема в том, что не могу никак отвязать дефолтное поведение сабмита этой формы :( добавил уже $("#new_form").submit(function(event){
event.preventDefault();
});
но это не действует. как быть? |
arty,
А в новой форме есть id="new_form"? |
Dilettante_Pro,
да, конечно. |
А это зачем?
$('#submit_btn').click(...
$.post...
});
От того что форма принята асинхронным запросом, отмена действия по умолчанию не является проблемой. <?php
session_start();
define(FORMS, 'forms_keys');
define('SRV', isset($_SESSION[FORMS]) ? key($_SESSION[FORMS]) : fields_name('_srv', 1));
$forms = [
'_frm1' => [
'name'=>'Форма 1',
'fields'=>['name', 'email']
],
'_frm2' => [
'name'=>'Форма 2',
'fields'=>['city', 'address', 'house']
],
'_frm3' => [
'name'=>'Форма 3',
'fields'=>['working', 'hobby']
]
];
if($_POST && array_key_exists(key($_POST), $_SESSION[FORMS])) {
$k = key($_POST);
$val = $_POST[$k];
if(is_array($val)) ksort($val);
switch($k = $_SESSION[FORMS][$k]) {
case '_srv' : if(array_key_exists($val, $forms)) {
$f = fields_name($val);
$out = '<form>';
foreach($forms[$val]['fields'] as $k=>$v) $out .= '<input name="'.$f.'['.$k.']" />';
$out .= '<div><button>Отправить</button></div></form>';
}
break;
case '_frm1' : if(array_key_exists($k, $forms)) {
$out = '<p>Данные формы ' . $forms[$k]['name'] . '</p><pre>' . print_r(array_combine($forms[$k]['fields'], $val), 1) . '</pre>';
}
break;
case '_frm2' : if(array_key_exists($k, $forms)) {
$out = '<p>Данные формы ' . $forms[$k]['name'] . '</p><pre>' . print_r(array_combine($forms[$k]['fields'], $val), 1) . '</pre>';
}
break;
case '_frm3' : if(array_key_exists($k, $forms)) {
$out = '<p>Данные формы ' . $forms[$k]['name'] . '</p><pre>' . print_r(array_combine($forms[$k]['fields'], $val), 1) . '</pre>';
}
break;
}
header('Content-type: text/html; charset=utf-8');
exit($out);
}
function fields_name($form, $dst=null) {
$f = md5(uniqid(rand(),1));
if(!$dst && count($_SESSION[FORMS])>1) array_pop($_SESSION[FORMS]);
$_SESSION[FORMS][$f] = $form;
return $f;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('body').on('submit', 'form', function(e) {
e.preventDefault();
$.post(location, $(this).serialize(), function(d) {
$('#forms').html(d)
})
});
});
</script>
</head>
<body>
<div>Servis: <form method="post"><select name="<?=SRV?>"><?=implode(array_map(function($k, $v) {
return '<option value="'.$k.'">'.$v['name'].'</option>';
}, array_keys($forms), $forms))?></select> <button>Искать</button></form></div>
<div id="forms" style="margin-top:40px;"></div>
</body>
</html>
|
laimas,
спасибо, я почему-то для себя уяснил, что события к кнопке привязываются и далее что должно произойти($.post...). Переделал. Заработало так как ожидается. $('body').on('submit', '#update_data', function(e){
e.preventDefault();
var fullname = $("#fullname").val();
var model = $("#model").val();
...
$.post("update_data.php", {fullname,model}, function(data){
alert(data);
});
});
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:07. |