Submit и Ajax

1
2
Следующая
Показаны 1-15 из 17

#1 9 февраля 2016 в 09:56

Здравствуйте.Подскажите, плиз, как на submit повесить аякс? Есть форма

<form name="form" action="" method="POST" >
............................................................................
<input type="submit" value="button" id="abc" name="abc" onclick="function.myfunction('{$id}');"/>

Так не работает.Сам аякс работает, т.е. по ссылке страница в окне открывается, а по кнопке нет. Как избавиться от перезагрузки при submit, наверное так надо вопрос ставить?

#2 9 февраля 2016 в 10:04

Как вариант

<input type="submit" value="button" id="abc" name="abc" onclick="function.myfunction('{$id}');return false;"/>

#3 9 февраля 2016 в 10:10

Большое, сенькью smile

, но так сабмит уже не сабмит, форма не отправляется.

Сегодня в 19:50

#4 9 февраля 2016 в 10:56

<input type="button" value="Надпись на кнопке" id="abc" name="abc" onclick="myfunction('{$id}');"/>
<script>
   function myfunction(id){
      $ajax(........);
}
</script>

NOP

#5 9 февраля 2016 в 11:32

Нет, Странник, так не будет работать.Так данные формы не попадут на обработку? Дело в том, что в форме две кнопки и обработчик в зависимости от того какая кнопка нажата или выводит данные или посылает на аякс обработчик, результат которого и надо вывести.

#6 9 февраля 2016 в 11:41

Lora, Loadырь вам показал как надо сделать, что значит:

сабмит уже не сабмит, форма не отправляется.
Lora

#7 9 февраля 2016 в 11:43

Lora, тогда в самой функции надо добавить event.preventDefault();

<script>
  $( "form" ).submit(function( event ) {
  event.preventDefault();
........
});
</script>

#8 9 февраля 2016 в 12:27

Val, То и значит, что при return:false, данные формы не отправляются. smile

Loadырь, При event.preventDefault(); та же ситуация, что и при false.К тому же, если так

$( "form" ).submit(function( event ) {
event.preventDefault();
........
});
</script>
Loadырь

то это дело надо на клик повесить

    <script>
	$('#abc').on('click',function(e){
      e.preventDefault();
      $( "form" ).submit()
 
 });
    });
    </script>

И e.preventDefault(); получается для клика.К тому же нужно в .submit() указать какую кнопку слушать, сейчас курю маны на эту тему.

#9 9 февраля 2016 в 13:01

но так сабмит уже не сабмит, форма не отправляется.
Lora

Для этого надо их выдрать из нужной формы и отправить на указанный урл. Чего в вашей функции видимо нет.

#10 9 февраля 2016 в 13:05

Val, То и значит, что при return:false, данные формы не отправляются.
Lora

и не должны. Для этого и делается return false. А отправлять данные формы вы должны уже в своей функции. Вам уже собственно все ответили.
А в целом, гугл же прекрасно отвечает на ваш вопрос.
Если же принципиально самому получать данные из формы и отправлять их, то вероятно нужно сделать как то так:

форма

<form id="myform" action="УРЛ САБМИТА" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<textarea name="message"></textarea>
<input type="submit" name="dosubmit" value="Отправить">
</form>

обработка

<script type="text/javascript">
function toJSON (form) {
    var o = {};
    var a = form.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
}
    $(function (){
        $('#myform').on('submit', function (){
 
            form_data = toJSON($(this));
            url = $(this).attr('action');
 
            $.post(url, form_data, function(result){
                 // тут что-то делаете с полученными данными
                 // ответ должен быть в формате json
                 // если json не нужен, то последний параметр ниже нужно убрать
            }, 'json');
            return false;
        });
    });
</script>

К тому же нужно в .submit() указать какую кнопку слушать
Lora

Ничего не надо указывать. Это действие для формы.

курю маны на эту тему.
Lora

Это самое верное. Здесь наиболее понятно по-русски.

🛠 docs.instantcms.ru

#11 9 февраля 2016 в 16:05

Для этого надо их выдрать из нужной формы и отправить на указанный урл. Чего в вашей функции видимо нет.
Loadырь

Я это не понимаю.Если можете приведите пример, как сабмит выдрать из формы и оставить его рабочим.
Fuze,
Я понимаю, что вы человек занятой и читать весь пост нет время, поэтому напишу ещё раз в чём проблема. Всё вами написанное это хорошо и красиво, но с этим я вроде разобрался и не вижу отличия от стандартных методов. Поэтому делаю так.
Вот форма

    <form name="form" action="" method="POST" >
    ............................................................................
    <input type="submit" value="button" id="1" name="ОДИН" onclick="$('#form').submit();function.myfunction('{$id}');"/>
  <input type="submit" value="button" id="2" name="ДВА"/>

Вот frontend.php

if($do == '1'){
if(cmsCore::inRequest('ДВА')){
.............................................
}
if(cmsCore::inRequest('ОДИН')){
.............................................
$do == '2'
}
}
if($do == '2'){
if($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') { cmsCore::halt(); }
............................................
cmsCore::jsonOutput(array('error' => false, 'html' => ob_get_clean()));
}

Ну и стандартная аякс ф-ция
Всё это работает, но дело в том, что после сабмита результат аякса показывается на мгновение и сразу происходит перезагрузка и как следствие белая страница. И дело не в аяксе. Без него тоже самое.Результат-перезагрузка.Может мне и разъяснили как решить эту проблему, но что то я проглядел.Прошу носом тыкнуть ещё раз.

#12 9 февраля 2016 в 16:50

Lora,

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

<form name="form" action="" method="POST" >
    ............................................................................
    <input type="submit" value="button" id="1" name="ОДИН" onclick="$('#form').submit();function.myfunction('{$id}');"/>
  <input type="submit" value="button" id="2" name="ДВА"/>

<form name="form" action="" method="POST" >
    ............................................................................
    <input type="submit" value="button" id="1" name="ОДИН" onclick="function.myfunction('{$id}');"/>
  <input type="submit" value="button" id="2" name="ДВА"/>

Web-студия Glitch Art - создание сайтов и дополнений. Дизайн сайтов

#13 9 февраля 2016 в 17:13

У меня так и есть, я в примере ошибся. Буду переписывать php.Не победить мне видно в этой битве. hoho

#14 9 февраля 2016 в 17:18

о с этим я вроде разобрался
Lora

<input type="submit" value="button" id="1" name="ОДИН" onclick="$('#form').submit();function.myfunction('{$id}');"/>
Lora

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

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

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

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

это не выполняется. Вернее начинает выполняться, но прерывается, т.к. страница перегружается после $('#form').submit();
Я вам дал рабочий пример, вам туда нужно подставить данные и все.

🛠 docs.instantcms.ru

#15 9 февраля 2016 в 22:09

Я с этим вопросом разбирался на примере работы в двойке личных сообщений. Там, вроде бы, все понятно.

Разработка виджетов, полей и компонентов для instantcms 2, сайты под ключ. site: www.zau4man.ru telegram: @zau4man

1
2
Следующая
Показаны 1-15 из 17

Настройка в htaccess

JSON

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Submit и Ajax

Похожие темы

Повесить событие на submit

AJAX фильтр без перезагрузки страницы

AJAX запрос чтобы получить ширину загруженного изображения

Отправка формы без перезагрузки страницы

Ajax обновления дива без перезагрузки страницы

Ajax подгрузка объявлений

InstantCMS Team

О проекте

Поддержка

Дополнения