ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автоматический обработчик html форм на JS
25 сообщений из 353, страница 12 из 15
  12  все
Автоматический обработчик html форм на JS
    #39341983
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
естественно, за 11 страниц обсудили массу аспектов.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
<script>
'use strict';

$.extend(window,{foo:{g:{t:function () { this.querySelector('div.status').textContent='foo.g.t:'+this.name;}}}}); // foo.g.t с использованием namespace2 
function bar(){ this.querySelector('div.status').textContent='bar:'+this.name;}; 

$(function(){
/* "Локальных"  функций(методов объекта Form)  у топикстартера  не было 
$('form[name="f1"]').each(function(){ $.extend(this,{foo : {g:{t:function () { this.querySelector('div.status').textContent='foo.g.t:'+this.name;}}}});});
$('form[name="f2"]').each(function(){ $.extend(this,{bar : function (){ this.querySelector('div.status').textContent='bar:'+this.name;}     });})
*/

$('form.ajax').each( function() { 
	$(this).submit ( function(event){
                event.preventDefault();
                $.ajax({
                   url: '',  
                   data: {   }, 
                   success: function(data) { 
                     /* обсуждается замена eval, разве нет? */
                     var ctx = window ;      /* если хочется искать в "локальных" -   var ctx=this; */
                     $(this).data('onsubmit').split('.').forEach(function(val){ctx=ctx[val];});
                     ctx.apply(this);                     
                   },
                   context: this
                 }); 
        });
   });
});
</script>


<form class="ajax"  name="f1" data-onsubmit="foo.g.t" data-module="user" data-handler="register">
<input name="bt" type="submit" value="Send" />
<div class="status"></div>
</form>
<form class="ajax"  name="f2"  data-onsubmit="bar"    data-module="user" data-handler="register">
<input name="bt" type="submit" value="Send" />
<div class="status"></div>
</form>



Хотя битва была изначально за/против eval, apply здесь(для установки this на обрабатываемую форму)
Код: javascript
1.
2.
3.
4.
                     /* обсуждается замена eval, разве нет? */
                     var ctx = window ;      /* если хочется искать в "локальных" -   var ctx=this; */
                     $(this).data('onsubmit').split('.').forEach(function(val){ctx=ctx[val];});
                     ctx.apply(this);
...
Рейтинг: 0 / 0
06.11.2016, 00:47
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39341988
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Изопропилестественно, за 11 страниц обсудили массу аспектов.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
<script>
'use strict';

$.extend(window,{foo:{g:{t:function () { this.querySelector('div.status').textContent='foo.g.t:'+this.name;}}}}); // foo.g.t с использованием namespace2 
function bar(){ this.querySelector('div.status').textContent='bar:'+this.name;}; 

$(function(){
/* "Локальных"  функций(методов объекта Form)  у топикстартера  не было 
$('form[name="f1"]').each(function(){ $.extend(this,{foo : {g:{t:function () { this.querySelector('div.status').textContent='foo.g.t:'+this.name;}}}});});
$('form[name="f2"]').each(function(){ $.extend(this,{bar : function (){ this.querySelector('div.status').textContent='bar:'+this.name;}     });})
*/

$('form.ajax').each( function() { 
	$(this).submit ( function(event){
                event.preventDefault();
                $.ajax({
                   url: '',  
                   data: {   }, 
                   success: function(data) { 
                     /* обсуждается замена eval, разве нет? */
                     var ctx = window ;      /* если хочется искать в "локальных" -   var ctx=this; */
                     $(this).data('onsubmit').split('.').forEach(function(val){ctx=ctx[val];});
                     ctx.apply(this);                     
                   },
                   context: this
                 }); 
        });
   });
});
</script>


<form class="ajax"  name="f1" data-onsubmit="foo.g.t" data-module="user" data-handler="register">
<input name="bt" type="submit" value="Send" />
<div class="status"></div>
</form>
<form class="ajax"  name="f2"  data-onsubmit="bar"    data-module="user" data-handler="register">
<input name="bt" type="submit" value="Send" />
<div class="status"></div>
</form>



Хотя битва была изначально за/против eval, apply здесь(для установки this на обрабатываемую форму)
Код: javascript
1.
2.
3.
4.
                     /* обсуждается замена eval, разве нет? */
                     var ctx = window ;      /* если хочется искать в "локальных" -   var ctx=this; */
                     $(this).data('onsubmit').split('.').forEach(function(val){ctx=ctx[val];});
                     ctx.apply(this);



Браво. Даже не знаю с чего начать

1.
Код: javascript
1.
$.extend(window,{foo:{g:{t:function () { this.querySelector('div.status').textContent='foo.g.t:'+this.name;}}}}); // foo.g.t с использованием namespace2


Вадя хотя бы расширял сам объект формы, а ты вообще на расширение window в чистом виде замахнулся :) Если модульную систему будешь писать, будешь называть функции jasdhflkjsdfjsadfhsakdfksgadfgsdfgsjh_myFunction ? Что бы со другими/сторонними модулями не пересекаться? :)

2.
Изопропил"Локальных" функций(методов объекта Form) у топикстартера не было
зато были у меня... у топикстартера вообще подход другой, и обсуждали мы изначально не его подход, а мой

3.
Код: javascript
1.
$('form.ajax').each(/*...*/)


Прекрасно... И все новые формы добавляемые на страницу (например подгружаемые аяксом) в пролёте...

4. Изопропилобсуждается замена eval, разве нет?
Именно... так замени же этот "минус" таким образом, что бы твоя замена не породила ещё 3 новых, более значимых, чем некое иллюзорное предупреждение в интернете "eval is evil", которое не все даже понять правильно могут, не говоря о том, что бы в суть вникнуть.
...
Рейтинг: 0 / 0
06.11.2016, 01:17
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39341992
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
Програмёр,

1 - function bar(){} - уже расширяет window
что по твоему собственно есть $.extend ?
как ещё проиллюстировать возможность вызова функции с именем "foo.g.t" , чтоб пример был рабочим?

2 - локальные или глобальные - похер
авторvar ctx = window ; /* если хочется искать в "локальных" - var ctx=this; */


по хорошему нужно поиск сначала делать локальный, потом глобальный со всеми сопутствующими проверками

3. да, согласен

4. this передать таки нужно в эти постсубмит обработчики как и составные имена обработать.
окружающий код только для того нужен , чтоб этот фрагмент реально работоспособным был (п 1 включая)
...
Рейтинг: 0 / 0
06.11.2016, 01:43
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39341998
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
ИзопропилПрограмёр,

1 - function bar(){} - уже расширяет window
что по твоему собственно есть $.extend ?
как ещё проиллюстировать возможность вызова функции с именем "foo.g.t" , чтоб пример был рабочим?

2 - локальные или глобальные - похер
авторvar ctx = window ; /* если хочется искать в "локальных" - var ctx=this; */


по хорошему нужно поиск сначала делать локальный, потом глобальный со всеми сопутствующими проверками

3. да, согласен

4. this передать таки нужно в эти постсубмит обработчики как и составные имена обработать.
окружающий код только для того нужен , чтоб этот фрагмент реально работоспособным был (п 1 включая)

1. Так и я о том же.... не должно быть никакой функции bar в глобальной области видимости... они все в локальных контекстах закрываются. В глобальной оставляются только те, которые не получилось "спрятать". И то зачастую это причина плохой архитектуры.

2. Сделай код с локальными, пожалуйста, что бы можно было его в файл залить и проверить работоспособность не внося разные правки. То есть он должен изначально выполнять предъявленные к нему требования, а уже потом всё остальное. А у тебя получается наоборот... ты закладываешь в код "няшки", а основную задачу он не выполняет... Типа "хотите - поменяйте и будет выполнять"!

3. ОК. Но предполагается что для продолжения беседы надо исправить. Иначе твой код получается изначально хуже моего :)

4. Я не хочу вносить правки в твой код, что бы беседа оставалась чистой и не распылялась. То есть на мой рабочий код в ответе должен содержаться другой такой же рабочий код, только лучше моего. (то есть он может то же что и мой, только делает это лучше/чище/быстрее или может что-то ещё, чего не может мой)
...
Рейтинг: 0 / 0
06.11.2016, 01:56
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342002
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
Програмёр,

хорошо
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
<script>
'use strict';

$(function(){

$('form[name="f1"]').each(function(){ $.extend(this,{foo : {g:{t:function () { this.querySelector('div.status').textContent='foo.g.t:'+this.name;}}}});});
$('form[name="f2"]').each(function(){ $.extend(this,{bar : function (){ this.querySelector('div.status').textContent='bar:'+this.name;}     });})

$('body').on('submit', 'form.ajax',       
	  function(event){
                event.preventDefault();
                $.ajax({
                   url: '',    
                   data: {   },  
                   success: function(data) { 
                     /************************/
                     var ctx = this;
                     $(this).data('success').split('.').forEach(function(val){ctx=ctx[val];});
                     ctx.apply(this);                 
                     /************************/
                 },
                   context: this
                 }); 
         });
});
</script>


<form class="ajax"  name="f1" data-success="foo.g.t" data-module="user" data-handler="register">
<input name="bt" type="submit" value="Send" />
<div class="status"></div>
</form>
<form class="ajax"  name="f2"  data-success="bar"    data-module="user" data-handler="register">
<input name="bt" type="submit" value="Send" />
<div class="status"></div>
</form>
...
Рейтинг: 0 / 0
06.11.2016, 02:30
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342003
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
Програмёр,

а где ты размещаешь локальные функции (методы форм) ?
...
Рейтинг: 0 / 0
06.11.2016, 02:33
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342006
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
ИзопропилПрограмёр,

а где ты размещаешь локальные функции (методы форм) ?

Странный вопрос... вот тут

Код: javascript
1.
2.
3.
4.
5.
6.
7.
$(document).on('ready', function(){
...
        var errorHandler = function (error){
            alert('got special error');
        };
...
});
...
Рейтинг: 0 / 0
06.11.2016, 02:36
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342008
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
ИзопропилПрограмёр,

хорошо
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
<script>
'use strict';

$(function(){

$('form[name="f1"]').each(function(){ $.extend(this,{foo : {g:{t:function () { this.querySelector('div.status').textContent='foo.g.t:'+this.name;}}}});});
$('form[name="f2"]').each(function(){ $.extend(this,{bar : function (){ this.querySelector('div.status').textContent='bar:'+this.name;}     });})

$('body').on('submit', 'form.ajax',       
	  function(event){
                event.preventDefault();
                $.ajax({
                   url: '',    
                   data: {   },  
                   success: function(data) { 
                     /************************/
                     var ctx = this;
                     $(this).data('success').split('.').forEach(function(val){ctx=ctx[val];});
                     ctx.apply(this);                 
                     /************************/
                 },
                   context: this
                 }); 
         });
});
</script>


<form class="ajax"  name="f1" data-success="foo.g.t" data-module="user" data-handler="register">
<input name="bt" type="submit" value="Send" />
<div class="status"></div>
</form>
<form class="ajax"  name="f2"  data-success="bar"    data-module="user" data-handler="register">
<input name="bt" type="submit" value="Send" />
<div class="status"></div>
</form>



уже лучше, но твой код ещё кое чего не может. Зачем ты делегируешь событие, если любая новая форма вставленная в код в любом случае будет в пролёте. Я не смогу загрузить с сервера html новой формы, вставить его в документ, и получить форму работающую по указанному принципу :))

Обработчик ответа ты ведь к объекту формы цепляешь...


Ну смотри... мой код может так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
<?php if(!empty($_POST['test'])): ?>
    <form action="" method="post" data-success="successHandle" data-error="errorHandler" class="ajax">
        <input type="hidden" name="test" value="1" />
        <input type="submit" value="Протестировать" />
    </form>
<?php exit; endif; ?>
<!doctype html>
<html lang="en">

<head>
    <title>test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    $(document).on('ready', function(){
        
        $('body').on('submit', 'form.ajax', function(e){
            e.preventDefault();
            var frm = $(this);

            $.ajax({
                url: frm.attr('action'),
                type: frm.attr('method'),
                data: frm.serialize(),
                success: eval(frm.data('success')) || function(data){
                  //дефолтный обработчик, если у формы не определён success метод
                },
                error: eval(frm.data('error')) || function(error){
                  //дефолтный обработчик, если у формы не определён success метод
                  alert('got error');
                }
            });
        });
        
        var errorHandler = function (error){
            alert('got special error');
        };
        
        var successHandle = function (data){
            $('body').append(data);
        };
    });
    
    </script>
</head>

<body>
    <form action="" method="post" data-success="successHandle" data-error="errorHandler" class="ajax">
        <input type="hidden" name="test" value="1" />
        <input type="submit" value="Протестировать" />
    </form>
    <form action="" method="post" data-success="successHandle" data-error="errorHandler" class="ajax">
        <input type="hidden" name="test" value="1" />
        <input type="submit" value="Протестировать" />
    </form>
</body>
</html>



А твой код такое может? :)
...
Рейтинг: 0 / 0
06.11.2016, 02:56
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342009
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Изопропил,

кстати, ты к 100500-ому сообщение предложил то же, что вадя предлагал на второй странице этой же темы (ту же идею). Просто он предлагал завязываться на id, а ты - на имя. Не вижу особой разницы.. ну да, у тебя не будет коллизии айди элементов, но это не многое меняет :)
...
Рейтинг: 0 / 0
06.11.2016, 03:10
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342029
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Програмёр,
по вопросу id - за этим надо также следить, как и за уникальностью имен любых переменных.
...
Рейтинг: 0 / 0
06.11.2016, 08:01
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342030
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Програмёр,
завязываются на имена, классы стоит тогда, когда нужно присвоить что-то нескольким dom элементам . в любом другом случае обращение по id. система считает , что id уникально, и прекращает просмотр дерева при нахождение первого. в других случаях ищет все , т.е. просматривает дерево до конца.
...
Рейтинг: 0 / 0
06.11.2016, 08:08
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342033
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Изопропил,
такое
Код: javascript
1.
$('form[name="f1"]').each(function(){ $.extend(this,{foo : {g:{t:function () { this.querySelector('div.status').textContent='foo.g.t:'+this.name;}}}});});


лучше заменить на такое
Код: javascript
1.
2.
3.
4.
5.
6.
            $('form[name="f1"]').each(function () {
                $.extend(this, {foo: {g: {t: function () {
                                this.querySelector('div.status').textContent = 'foo.g.t:' + this.name;
                            }
                        }}});
            });



таке
Код: javascript
1.
 $('body').on('submit', 'form.ajax', function(e){....



лучше заменить на такое
Код: javascript
1.
 $(document).on('submit', 'form.ajax', function(e){


в таком случае замена элемента form.ajax не вызовет пропадание его обработчика
это и Я не смогу загрузить с сервера html новой формы, вставить его в документ, и получить форму работающую по указанному принципу :))
 исправляет
...
Рейтинг: 0 / 0
06.11.2016, 08:37
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342036
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Програмёр,
с учётом всего, что было обсуждено, по поводу этого
автор "window[ this.id].cc = ..." вот это и есть захламления глобального объекта!!! Эт овы не локальную переменную создали, а глобальную!!!
есть ли каки-либо изменения или добавление свйства всё ещё считаешь захламлением?
...
Рейтинг: 0 / 0
06.11.2016, 08:48
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342037
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
так наглядней будет, хотя это уже дело вкуса.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
            $('form[name="f1"]').each(function () {
                $.extend(this, {
                    foo: {
                        g: {
                            t: function () {
                                this.querySelector('div.status').textContent = 'foo.g.t:' + this.name;
                            }
                        }
                    }
                });
            });
...
Рейтинг: 0 / 0
06.11.2016, 08:52
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342040
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
ПрограмёрИзопропилПрограмёр,

а где ты размещаешь локальные функции (методы форм) ?

Странный вопрос... вот тут

Код: javascript
1.
2.
3.
4.
5.
6.
7.
$(document).on('ready', function(){
...
        var errorHandler = function (error){
            alert('got special error');
        };
...
});




и сюда же eval , иначе не увидит своих локальных функций
...
Рейтинг: 0 / 0
06.11.2016, 09:23
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342047
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Изопропил,
$(document).on'redy') по большей части является глобальным модулем, и в него такое засовывать неочень хортшо
...
Рейтинг: 0 / 0
06.11.2016, 10:10
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342056
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
хочу у Програмёр разрешения спросить на
Код: javascript
1.
window.isopropyl={};


можно я своё говно туда сложу или уже поздно - засрал глобальное пространство?
...
Рейтинг: 0 / 0
06.11.2016, 10:53
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342058
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
вадяИзопропил,
$(document).on'redy') по большей части является глобальным модулем, и в него такое засовывать неочень хортшо
это добавление функции во внутренний список jquery

jquery в глобальное пространство добавляет единственное имя $ ,
которое можно изменить на что угодно(можно вообще jquery не добавлять в глобальное постранкство) и восстановть $ в предшествующее загрузке состояние
см. jQuery.noConflict
...
Рейтинг: 0 / 0
06.11.2016, 11:05
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342063
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
вадяИзопропил,
$(document).on'redy') по большей части является глобальным модулем, и в него такое засовывать неочень хортшо
или ты о том, что Програмёр для локальных функций места не нашёл приличного?
так я о том же
...
Рейтинг: 0 / 0
06.11.2016, 11:21
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342071
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Изопропил,
1 туда добавляется, то что должно выполнится сразу по готовности документа,
то , что ты длбавляешь его можно выполнить и позже, до работы твоего основного кода. Это чисто условное разделение. но логически позволяет лучше понять код
...
Рейтинг: 0 / 0
06.11.2016, 12:18
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342075
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Изопропил,
2 $(document).on позволяет назначить обработчик один раз и в дальнейшем при замене элемента обработчик оказывается сохранённым.
...
Рейтинг: 0 / 0
06.11.2016, 12:29
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342106
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
вадяИзопропил,
1 туда добавляется, то что должно выполнится сразу по готовности документа,
то , что ты длбавляешь его можно выполнить и позже, до работы твоего основного кода. Это чисто условное разделение. но логически позволяет лучше понять код
спасибо кэп ))

то есть всё говно что есть нужно положить сюда, причём одной кучкой, иначе eval не увидит(eval естественно в эту кучу) За что боролись?

----------------------------------------------------------------------------------
...
Рейтинг: 0 / 0
06.11.2016, 14:56
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342116
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Изопропил,
у меня там только очень обязательное для инициализации при загрузки
...
Рейтинг: 0 / 0
06.11.2016, 15:32
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342122
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
<?php if(!empty($_POST['test'])): ?>
    <form action="" method="post" data-success="successHandler" data-error="errorHandler" class="ajax">
        <input type="hidden" name="test" value="1" />
        <input type="submit" value="Протестировать" />
    </form>
<?php exit; endif; ?>
<!doctype html>
<html lang="en">

<head>
    <title>test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $.fn.superAjax = function(handlersObject){
            var superAjaxFunction = function(e){
                e.preventDefault();
                var frm = $(this);

                $.ajax({
                    url: frm.attr('action'),
                    type: frm.attr('method'),
                    data: frm.serialize(),
                    success: handlersObject[frm.data('success') || 'defaultSuccess'] || function(data){
                        console.log(data);
                    },
                    error: handlersObject[frm.data('error') || 'defaultError'] || function(error){
                        console.log(error);
                    }
                });
            };
            
            if(this.selector){
                $('body').on('submit', this.selector, superAjaxFunction);
            }else{
                this.on('submit', superAjaxFunction);
            }
        };
    </script>
    <script>
    $(document).on('ready', function(){
        
        $('form.ajax').superAjax({
            errorHandler: function (error){
                alert('got special error');
            },
            successHandler: function (data){
                $('body').append(data);
            }
        });
        
        $('form.ajax').prev('.unique').superAjax({
            errorHandler: function (error){
            },
            successHandler: function (data){
                alert('clicked unique');
            }            
        });
    });
    </script>
</head>

<body>
    <form action="" method="post" data-success="successHandler" data-error="errorHandler" class="unique">
        <input type="hidden" name="test" value="1" />
        <input type="submit" value="Уникальная форма" />
    </form>
    <form action="" method="post" data-success="successHandler" data-error="errorHandler" class="ajax">
        <input type="hidden" name="test" value="1" />
        <input type="submit" value="Протестировать" />
    </form>
    <form action="" method="post" data-success="successHandler" data-error="errorHandler" class="ajax">
        <input type="hidden" name="test" value="1" />
        <input type="submit" value="Протестировать" />
    </form>
</body>
</html>



Вот без eval... В виде jquery плагина. Можно навешивать обработчик как на конкретную коллекцию, так и делегировать по селектору (что бы цеплялись новые добавляемые формы).

Считаю это решение лучше, чем моё предыдущее... и лучше, чем все другие тут озвученные. Потому с eval вопрос точно закрываем, а вот сравнение с другими решениями можем провести и обсудить, если у кого есть желание :)

P.S. Столько кода меня вынуждаете писать, что я даже на работе зачастую меньше напрягаюсь
...
Рейтинг: 0 / 0
06.11.2016, 15:59
| Ответить | Цитировать | Написать  
Автоматический обработчик html форм на JS
    #39342148
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
вадяИзопропил,
у меня там только очень обязательное для инициализации при загрузки

Это к Програмёр был вопрос
...
Рейтинг: 0 / 0
06.11.2016, 17:39
| Ответить | Цитировать | Написать  
25 сообщений из 353, страница 12 из 15
  12  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автоматический обработчик html форм на JS
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]