Submit и Ajax

 
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Здравствуйте.Подскажите, плиз, как на submit повесить аякс? Есть форма
Код PHP:
  1. <form name="form" action="" method="POST" >
  2. ............................................................................
  3. <input type="submit" value="button" id="abc" name="abc" onclick="function.myfunction('{$id}');"/>
Так не работает.Сам аякс работает,т.е. по ссылке страница в окне открывается, а по кнопке нет. Как избавиться от перезагрузки при submit, наверное так надо вопрос ставить?
Редактировалось: 1 раз (Последний: 9 февраля 2016 в 09:56)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 3508
Как вариант
Код PHP:
  1. <input type="submit" value="button" id="abc" name="abc" onclick="function.myfunction('{$id}');return false;"/>
Реклама
cms
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Большое,сенькью smile ,но так сабмит уже не сабмит, форма не отправляется.
Редактировалось: 1 раз (Последний: 9 февраля 2016 в 10:12)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 1979
Код TPL:
  1. <input type="button" value="Надпись на кнопке" id="abc" name="abc" onclick="myfunction('{$id}');"/>
  2. <script>
  3. function myfunction(id){
  4. $ajax(........);
  5. }
  6. </script>
NOP
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Нет, Странник, так не будет работать.Так данные формы не попадут на обработку? Дело в том, что в форме две кнопки и обработчик в зависимости от того какая кнопка нажата или выводит данные или посылает на аякс обработчик, результат которого и надо вывести.
Редактировалось: 1 раз (Последний: 9 февраля 2016 в 11:33)
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
Lora, Loadырь вам показал как надо сделать, что значит:
Lora:
сабмит уже не сабмит, форма не отправляется.
?
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 3508
Lora, тогда в самой функции надо добавить event.preventDefault();
Код PHP:
  1. <script>
  2. $( "form" ).submit(function( event ) {
  3. event.preventDefault();
  4. ........
  5. });
  6. </script>
Редактировалось: 2 раз (Последний: 9 февраля 2016 в 11:50)
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Val, То и значит, что при return:false, данные формы не отправляются. smile
Loadырь, При event.preventDefault(); та же ситуация, что и при false.К тому же, если так
Loadырь:
$( "form" ).submit(function( event ) {
event.preventDefault();
........
});
</script>
то это дело надо на клик повесить
Код PHP:
  1. <script>
  2. $('#abc').on('click',function(e){
  3. e.preventDefault();
  4. $( "form" ).submit()
  5.  
  6. });
  7. });
  8. </script>
И e.preventDefault(); получается для клика.К тому же нужно в .submit() указать какую кнопку слушать,сейчас курю маны на эту тему.
Редактировалось: 1 раз (Последний: 9 февраля 2016 в 12:29)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 3508
Lora:
но так сабмит уже не сабмит, форма не отправляется.
Для этого надо их выдрать из нужной формы и отправить на указанный урл. Чего в вашей функции видимо нет.
InstantCMS Team
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 4336
Lora:
Val, То и значит, что при return:false, данные формы не отправляются.
и не должны. Для этого и делается return false. А отправлять данные формы вы должны уже в своей функции. Вам уже собственно все ответили.
А в целом, гугл же прекрасно отвечает на ваш вопрос.
Если же принципиально самому получать данные из формы и отправлять их, то вероятно нужно сделать как то так:

форма

Код HTML:
  1. <form id="myform" action="УРЛ САБМИТА" method="post" enctype="multipart/form-data" accept-charset="utf-8">
  2. <textarea name="message"></textarea>
  3. <input type="submit" name="dosubmit" value="Отправить">
  4. </form>
обработка

Код JAVASCRIPT:
  1. <script type="text/javascript">
  2. function toJSON (form) {
  3. var o = {};
  4. var a = form.serializeArray();
  5. $.each(a, function() {
  6. if (o[this.name] !== undefined) {
  7. if (!o[this.name].push) {
  8. o[this.name] = [o[this.name]];
  9. }
  10. o[this.name].push(this.value || '');
  11. } else {
  12. o[this.name] = this.value || '';
  13. }
  14. });
  15. return o;
  16. }
  17. $(function (){
  18. $('#myform').on('submit', function (){
  19.  
  20. form_data = toJSON($(this));
  21. url = $(this).attr('action');
  22.  
  23. $.post(url, form_data, function(result){
  24. // тут что-то делаете с полученными данными
  25. // ответ должен быть в формате json
  26. // если json не нужен, то последний параметр ниже нужно убрать
  27. }, 'json');
  28. return false;
  29. });
  30. });
  31. </script>
  32.  
  33.  
Lora:
К тому же нужно в .submit() указать какую кнопку слушать
Ничего не надо указывать. Это действие для формы.
Lora:
курю маны на эту тему.
Это самое верное. Здесь наиболее понятно по-русски.
Видео каталог для InstantCMS | Аудио каталог для InstantCMS | Мы Вконтакте | Предложение для спонсоров
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Loadырь:
Для этого надо их выдрать из нужной формы и отправить на указанный урл. Чего в вашей функции видимо нет.
Я это не понимаю.Если можете приведите пример, как сабмит выдрать из формы и оставить его рабочим.
Fuze,
Я понимаю, что вы человек занятой и читать весь пост нет время, поэтому напишу ещё раз в чём проблема. Всё вами написанное это хорошо и красиво, но с этим я вроде разобрался и не вижу отличия от стандартных методов. Поэтому делаю так.
Вот форма
Код PHP:
  1. <form name="form" action="" method="POST" >
  2. ............................................................................
  3. <input type="submit" value="button" id="1" name="ОДИН" onclick="$('#form').submit();function.myfunction('{$id}');"/>
  4. <input type="submit" value="button" id="2" name="ДВА"/>
Вот frontend.php

Код PHP:
  1. if($do == '1'){
  2. if(cmsCore::inRequest('ДВА')){
  3. .............................................
  4. }
  5. if(cmsCore::inRequest('ОДИН')){
  6. .............................................
  7. $do == '2'
  8. }
  9. }
  10. if($do == '2'){
  11. if($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') { cmsCore::halt(); }
  12. ............................................
  13. cmsCore::jsonOutput(array('error' => false, 'html' => ob_get_clean()));
  14. }
Ну и стандартная аякс ф-ция
Всё это работает, но дело в том, что после сабмита результат аякса показывается на мгновение и сразу происходит перезагрузка и как следствие белая страница. И дело не в аяксе. Без него тоже самое.Результат-перезагрузка.Может мне и разъяснили как решить эту проблему, но что то я проглядел.Прошу носом тыкнуть ещё раз.
Посетитель
no avatar
Сообщений: 51
Lora,

попробуте вместо

Код PHP:
  1. <form name="form" action="" method="POST" >
  2. ............................................................................
  3. <input type="submit" value="button" id="1" name="ОДИН" onclick="$('#form').submit();function.myfunction('{$id}');"/>
  4. <input type="submit" value="button" id="2" name="ДВА"/>
Код PHP:
  1. <form name="form" action="" method="POST" >
  2. ............................................................................
  3. <input type="submit" value="button" id="1" name="ОДИН" onclick="function.myfunction('{$id}');"/>
  4. <input type="submit" value="button" id="2" name="ДВА"/>
Web-студия Glitch Art - создание сайтов и дополнений. Дизайн сайтов
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
У меня так и есть, я в примере ошибся. Буду переписывать php.Не победить мне видно в этой битве. hoho
InstantCMS Team
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 4336
Lora:
о с этим я вроде разобрался
Lora:
<input type="submit" value="button" id="1" name="ОДИН" onclick="$('#form').submit();function.myfunction('{$id}');"/>

Вы точно прочитали, что я написал?)

$('#form').submit();

сразу сабмитит вашу форму. Кроме этого нет return false, поэтому у вас форма просто будет сабмититься ВСЕГДА.

function.myfunction('{$id}');

это не выполняется. Вернее начинает выполняться, но прерывается, т.к. страница перегружается после $('#form').submit();
Я вам дал рабочий пример, вам туда нужно подставить данные и все.
Видео каталог для InstantCMS | Аудио каталог для InstantCMS | Мы Вконтакте | Предложение для спонсоров
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2537
Я с этим вопросом разбирался на примере работы в двойке личных сообщений. Там, вроде бы, все понятно.
Виджеты, поля и компоненты для instantcms 2 http://www.zau4man.ru/
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.