Форум

arty · #1 (**permalink**) 10.03.2016, 16:12

Добрый день,
есть 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();
});

но это не действует. как быть?

Dilettante_Pro · #2 (**permalink**) 10.03.2016, 18:13

arty,
А в новой форме есть id="new_form"?

arty · #3 (**permalink**) 10.03.2016, 18:52

Dilettante_Pro,
да, конечно.

laimas · #4 (**permalink**) 10.03.2016, 20:32

А это зачем?

$('#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>

arty · #5 (**permalink**) 11.03.2016, 12:16

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);
   });
});

laimas · #6 (**permalink**) 11.03.2016, 12:33

Сообщение от arty

я почему-то для себя уяснил, что события к кнопке привязываются

onsubmit, это событие формы, кнопка всего лишь запускает отправку формы.

Форум

Справочник

Discord чат

Курсы javascript