Форум

tiundv · #1 (**permalink**) 22.04.2015, 16:59

Подскажите как отправить форму 'post' из подгружаемого контента.
Подгрузку делаю так
[spoiler]

$('#content').on('click','.mod2',function(){
                var url = $(this).attr('href');
                $.ajax({
                    type: 'GET',
                    url:  '?ajax=' + url,
                    success: function(data){
                        $('#content').html(data);
                    }
                });
                if(url != window.location){
                  window.history.pushState(null, null, url);
                }
                return false;
            });

Отправить пытаюсь так

$('#content').on('click','#post1',function(){
                var url = $(this).attr('href');
                var aform = $('#postform').serialize();
                $.ajax({
                    type: 'POST',
                    url:  '?ajax=' + url,
                    dataType: "html",
                    data: aform,
                    success: function(data){
                        $('#content').html(data);
                    },
                    error: function(xhr, str){
                        alert('Возникла ошибка: ' + xhr.responseCode);
                    }
                });
                return false;
            });

В подгружаемом контенте форма регистрации

<table border="2" width="100%" align="center">
<form id="postform" method="post">
         <tr>
         <td width="10%"><div><b>ЛОГИН</b></div></td><td width="30%" align="center">
         <input type="text" name="us-login" id="creLogin" value=""></td>
         <td width="10%">ОБЯЗАТЕЛЬНО</br>Заполнять</td>
         <td>Выбранный Вами ЛОГИН может состоять из букв латинского алфавита или
кириллицы различного регистра, цифр и знака минус (-), и должно быть длиной от 5
до 15 символов. Пример: (<em>Андрей Айдар</em>).
         </td></tr><tr></tr>
         <tr>
         <td width="10%"><div><b>ПОЛНОЕ ИМЯ</b></div></td><td width="30%" align="center">
         <input type="text" name="us-name" value=""></td><td width="10%"></td><td>
Здесь вы можете указать свое полное Ф.И.О (Фамилия, Имя, Отчество).
Указанное Вами Имя может состоять из букв латинского алфавита или кириллицы различного регистра,
и должно быть длиной не более 100 символов.
Пример: (<em>Иванов Иван Иванович</em>)
         </td></tr><tr></tr>
         <tr>
         <td width="10%"><div><b>ВАШ E-mail</b></div></td><td width="30%" align="center">
         <input type="email" name="us-email" id="creMail" value=""></td>
         <td width="10%">ОБЯЗАТЕЛЬНО</br>Заполнять</td>
         <td>На этот почтовый адрес будет выслан пароль, если Вы его забудете.
Рекомендую заполнить это поле действительным адресом электронной почты.
На сайте проходит активация аккаунта через e-mail.
         </td></tr><tr></tr>
         <td width="10%"><div><b>ПАРОЛЬ</b></div></td><td width="30%" align="center">
         <input type="password" name="us-pass" id="crePass" value=""></td>
         <td width="10%" rowspan="3">ОБЯЗАТЕЛЬНО</br>Заполнять</td>
         <td rowspan="3">Пароль может состоять из букв латинского алфавита или кириллицы различного регистра,
 цифр и любых специальных символов (<span>~</span>, <span>!</span>, <span>@</span>, <span>#</span>, <span>$</span>,
 <span>%</span>, <span>^</span>, <span>&</span>, <span>*</span>, <span>-</span>, <span>+</span>, <span>=</span> и др.),
 и должен быть длиной от 6 до 15 символов.
         </td></tr><tr></tr>
         <td width="10%"><div><b>ПОВТОР ПАРОЛЯ</b></div></td><td width="30%" align="center">
         <input type="password" name="us-pass2" id="crePass2" value=""></td>
         </tr><tr></tr>
         <td width="10%"><div><b>ДАТА РОЖДЕНИЯ</b></div></td><td width="30%" align="center">
         <input type="text" name="us-rod-date" value=""></td><td width="10%"></td><td>
Здесь вы можете указать доту своего рождения.
Дата может состоять только из цифр и точек !
Пример: (<em>29.05.1980</em>)
         </td></tr><tr></tr>
         <tr>
         <td><div><input id="post1" type="submit" value="СОЗДАТЬ"></div></td>
         </tr>
</form></table>

Прием просто так

if($_POST['ajax'] or $_POST['login'] or $_POST['us-login']){
         echo 'USER CREATE';
         exit();
      }

[/spoiler]
Но пост не приходит.В чем может быть моя ошибка?

laimas · #2 (**permalink**) 22.04.2015, 17:31

~~$('#content').on('click','#post1',function()~~

$('#content').on('submit','#postform',function()
//или тут установить обработчик
success: function(data){
    $('#content').html(data)
             .find('#postform')
             .submit(function() {
                  //отправка формы
             });
}

Ну и прием "просто так", это только для теста годится, но никак не для регистрации.

tiundv · #3 (**permalink**) 22.04.2015, 17:38

Оно и есть для теста...
А ваш код попробую и отпишусь..

tiundv · #4 (**permalink**) 22.04.2015, 17:44

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

~~$('#content').on('click','#post1',function()~~

$('#content').on('submit','#postform',function()
//или тут установить обработчик
success: function(data){
    $('#content').html(data)
             .find('#postform')
             .submit(function() {
                  //отправка формы
             });
}

Ну и прием "просто так", это только для теста годится, но никак не для регистрации.

Я в js нуб..По подробнее можно..Куда что вставлять?

tiundv · #5 (**permalink**) 22.04.2015, 18:11

Чето не догоняю...
Прошу помощи...
Что и куда всатить?

laimas · #6 (**permalink**) 22.04.2015, 18:55

1 способ - это не вставить, а заменить
$('#content').on('click','#post1',function()
на
$('#content').on('submit','#postform',function()
то есть в итоге должно быть:

$(function() { //код должен быть помещен в эту секцию - это исполнение после загрузки страницы 
    $('#content').on('submit','#postform',function(){
        //var url = $(this).attr('href'); - это вообще выбросить, ибо описан щелчок по кнопке у которой нет свойства href
        //var aform = $('#postform').serialize(); - тоже выбросить, промежуточные перменные в данном случае совсем не нужны
        $.ajax({
            type: 'POST',
            url:  this.action, //'?ajax=' + url, - а вот здесь, если используется url как переменная, то это может быть свойства action формы
            dataType: "html", //тип html не лучший тип ответа сервера, так как могут быть ошибки, лучше JSON 
            data: $(this).serialize(),
            success: function(data){
                //ответ сервера о результате принятых данных
            },
            error: function(xhr, str){
                alert('Возникла ошибка: ' + xhr.responseCode);
            }
        });
        return false;
    });
});

2 способ - это сразу при загрузке установить обработчик форме, которая загружается динамически в '#content'.

Используйте первый, если не догоняете. )

tiundv · #7 (**permalink**) 22.04.2015, 19:26

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

1 способ - это не вставить, а заменить
$('#content').on('click','#post1',function()
на
$('#content').on('submit','#postform',function()
то есть в итоге должно быть:

$(function() { //код должен быть помещен в эту секцию - это исполнение после загрузки страницы 
    $('#content').on('submit','#postform',function(){
        //var url = $(this).attr('href'); - это вообще выбросить, ибо описан щелчок по кнопке у которой нет свойства href
        //var aform = $('#postform').serialize(); - тоже выбросить, промежуточные перменные в данном случае совсем не нужны
        $.ajax({
            type: 'POST',
            url:  this.action, //'?ajax=' + url, - а вот здесь, если используется url как переменная, то это может быть свойства action формы
            dataType: "html", //тип html не лучший тип ответа сервера, так как могут быть ошибки, лучше JSON 
            data: $(this).serialize(),
            success: function(data){
                //ответ сервера о результате принятых данных
            },
            error: function(xhr, str){
                alert('Возникла ошибка: ' + xhr.responseCode);
            }
        });
        return false;
    });
});

2 способ - это сразу при загрузке установить обработчик форме, которая загружается динамически в '#content'.

Используйте первый, если не догоняете. )

При нажатии ничего непроисходит..
Даже незнаю что делать...

laimas · #8 (**permalink**) 22.04.2015, 20:17

Ну значит в чем-то допускаете ошибку.
1) Судя по коду, ближайший родитель формы '#content' на странице присутствует.
2) Метод POST позволяет предавать и GET параметры, правда в вашем случае, что при запросе формы, что при ее отправке указывается один и тот же url - ?ajax=' + url, который во втором случае ошибочен, поэтому он из кода удален.
3) Если надо передавать в метод ajax url php-скрипта принимающего форму, то этот url должен быть прописан в атрибуте action формы. То есть:
<form id="postform" action="url обработчика формы">
method="post" - это указывать в форме нет необходимости, если только не получать в отправке и метод передачи, и планируется отправка и обычным способом при отключенном JS, но в последнем случае и РНР-сценарий должен такой случай обрабатывать. Иначе url можно и в методе прописать.
А у вас добавлен action="url обработчика формы"? Он ведь здесь получается - url: this.action

tiundv · #9 (**permalink**) 22.04.2015, 20:30

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

Ну значит в чем-то допускаете ошибку.
1) Судя по коду, ближайший родитель формы '#content' на странице присутствует.
2) Метод POST позволяет предавать и GET параметры, правда в вашем случае, что при запросе формы, что при ее отправке указывается один и тот же url - ?ajax=' + url, который во втором случае ошибочен, поэтому он из кода удален.
3) Если надо передавать в метод ajax url php-скрипта принимающего форму, то этот url должен быть прописан в атрибуте action формы. То есть:
<form id="postform" action="url обработчика формы">
method="post" - это указывать в форме нет необходимости, если только не получать в отправке и метод передачи, и планируется отправка и обычным способом при отключенном JS, но в последнем случае и РНР-сценарий должен такой случай обрабатывать. Иначе url можно и в методе прописать.
А у вас добавлен action="url обработчика формы"? Он ведь здесь получается - url: this.action

Я все поправил и в форме и в скрипте..
Но все равно не приходит пост..
Что странно если страницу просто перегрузить и отправить то пост приходит а
если сменилось несколько страниц перед этой то при нажатии вообще ничего непроисходит..
У меня если приходит не из аякса все и страница и контент записывается в одну переменную а потом выводится через ехо..
Если через ява то меняется только контент...
Отсюда вывод..Он не считывает инфу из формы вновь подгруженного контента..
Как быть?

laimas · #10 (**permalink**) 22.04.2015, 20:44

Ну не знаю почему при смене нескольких... Есть ошибки значит, на клиенте, как то не присутствует объект родитель, то есть он возможно тоже добавляется динамически (по коду этого не скажешь), что-то еще...

Получение и отправку формы можно было бы и в одном месте прописать:

$('#content').on('click','.mod2',function(){
    var url = $(this).attr('href');
    $.ajax({
        type: 'GET',
        url:  '?ajax=' + url,
        success: function(data){
            $('#content').html(data)
                         .find('form')
                         .submit(function() {
                             $.ajax({
                                type: 'POST',
                                url:  this.action,
                                dataType: "html",
                                data: $(this).serialize(),
                                success: function(data){
                                    //ответ сервера о результате принятых данных
                                },
                                error: function(xhr, str){
                                    alert('Возникла ошибка: ' + xhr.responseCode);
                                }
                            });
                            return false;
                         })
        }
    });
    if(url != window.location){
        window.history.pushState(null, null, url); //с какой целью не понятно
    }
    return false;
});

Что еще у вас не так, сказать трудно, не представляя всего.

Форум

Справочник

Discord чат

Курсы javascript