Нужна помощь с отправкой формы
Подскажите как отправить форму '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]Но пост не приходит.В чем может быть моя ошибка? |
$('#content').on('submit','#postform',function()
//или тут установить обработчик
success: function(data){
$('#content').html(data)
.find('#postform')
.submit(function() {
//отправка формы
});
}
Ну и прием "просто так", это только для теста годится, но никак не для регистрации. |
Оно и есть для теста...
А ваш код попробую и отпишусь.. |
Цитата:
|
Чето не догоняю...
Прошу помощи... Что и куда всатить? |
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'. Используйте первый, если не догоняете. ) |
Цитата:
Даже незнаю что делать... |
Ну значит в чем-то допускаете ошибку.
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 |
Цитата:
Но все равно не приходит пост.. Что странно если страницу просто перегрузить и отправить то пост приходит а если сменилось несколько страниц перед этой то при нажатии вообще ничего непроисходит.. У меня если приходит не из аякса все и страница и контент записывается в одну переменную а потом выводится через ехо.. Если через ява то меняется только контент... Отсюда вывод..Он не считывает инфу из формы вновь подгруженного контента.. Как быть? |
Ну не знаю почему при смене нескольких... Есть ошибки значит, на клиенте, как то не присутствует объект родитель, то есть он возможно тоже добавляется динамически (по коду этого не скажешь), что-то еще...
Получение и отправку формы можно было бы и в одном месте прописать:
$('#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;
});
Что еще у вас не так, сказать трудно, не представляя всего. |
window.history.pushState(null, null, url); //с какой целью не понятно
Это смена адреса поле адреса браузера.. |
Это смена адреса поле адреса браузера..
Зачем это при отправке формы методом POST и асинхронным способом? |
Та функция которую вы изменили отвечает за подгрузку контента из меню по url-ам.
А это window.history.pushState(null, null, url); записывает в память браузера урлы страниц чтоб можно было туда обратно гулять по страницам.. у меня статичная только одна страница ...шаблон с меню...остальное все подгружается динамически... Самое прикольно что гет отрабатывает отлично а вот пост никак немогу освоить...Может есть другие варианты отправки форм из подгруженного контента? |
Вот мой весь код
$(document).ready(function() {
[COLOR="red"]//здесь отслеживаею кнопки меню и отправляю методом гет url[/COLOR]
$('.mod1').click(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;
});
[COLOR="red"]//здесь то что обсуждаем[/COLOR]
$('#content').on('submit','#crform',function(){
$.ajax({
type: 'POST',
url: this.action,
dataType: "html",
data: $(this).serialize(),
success: function(data){
$('#content').html(data);
}
});
return false;
});
[COLOR="red"]//здесь отслеживаем кнопки из подгр. Контента и отпр. Гетом[/COLOR]
$('#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;
});
[COLOR="red"]//это отдельная история нестоит внимания...[/COLOR]
$('#content').on('click','.rem1',function(){
var url = $(this).attr('href');
$.ajax({
type: 'GET',
url: '?ajax=' + url,
success: function(data){
$('#content').html(data);
}
});
return false;
});
$(window).bind('popstate', function() {
$.ajax({
url: '?ajax=' + location.search,
success: function(data) {
$('#content').html(data);
}
});
});
});
|
Понятно, то есть однострочник, а форма вызывается в каком-то разделе ее.
Вариант второй, который я показал, в любом случае будет работать, так как форме "навешивается" обработчик сразу при ее добавлении на страницу. То есть отправка будет гарантировано, это можно в отладчике проследить. А если не получается с ответом, то может быть только одна причина - сервер: а) неверный url запроса, б) неверный сценарий приема формы, и) и т.д... |
Попробую и отпишусь..
|
Пробуйте, только здесь:
$('#content').html(data)
.find('form')//заменить на .find('#postform')
ведь однострочник, и если '#content' общий родитель и форма не одна на странице, то этот обработчик будет установлен на все формы. |
Так как вы написали все работает но происходит перезагрузка всей страницы а не только контента..
|
Значит форма отправляется, а не должна - return false;
Чего то не то делается. |
Сори...Были ошибки...После исправления Нихрена не работает
Сейчас код такой...пробывал менять 'form' итог тот же
$(document).ready(function() {
$('.mod1').click(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','.mod2',function(){
var url = $(this).attr('href');
$.ajax({
type: 'GET',
url: '?ajax=' + url,
success: function(data){
$('#content').html(data).find('#postform').submit(function(){
$.ajax({
type: 'POST',
url: this.action,
dataType: "html",
data: $(this).serialize(),
success: function(data2){
$('#content').html(data2);
}
});
});
}
});
if(url != window.location){
window.history.pushState(null, null, url);
}
return false;
});
$('#content').on('click','.rem1',function(){
var url = $(this).attr('href');
$.ajax({
type: 'GET',
url: '?ajax=' + url,
success: function(data){
$('#content').html(data);
}
});
return false;
});
$(window).bind('popstate', function() {
$.ajax({
url: '?ajax=' + location.search,
success: function(data) {
$('#content').html(data);
}
});
});
});
..Если обновляю страницу то пост приходит..если через меню подгружаю страницу то пост не приходит |
Сверьте внимательно то, что я написал, с тем, что у вас - отсутствие return false; в обработчике submit, а это значит отправка формы естественным способом с перегрузкой страницы.
|
Все поправил итог тот же никакой реакции..Немогу понять..гет проходит из подгруженного крнтента а пост нет..
|
Слушайте если мы вставляем обработчик в подгружаемый контент его разве ненадо обернуть в какую нибудь функцию или <script></script> ???
|
<?
if($_GET['f']) exit('<form id="postform"><input name="as" value=15><button>Send</button></form>');
if($_POST) exit('Received: ' . http_build_query($_POST));
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$('#content').on('click','.mod2',function(e){
var url = this.href;
$.ajax({
type: 'GET',
url: url,
success: function(data){
$('#content').html(data)
.find('#postform')
.submit(function() {
$.ajax({
type: 'POST',
url: location,
dataType: "html",
data: $(this).serialize(),
success: function(data){
alert(data)
}
});
return false;
})
}
});
return false;
});
});
</script>
</head>
<body>
<div id="content">
<a class="mod2" href="?f=1">Get form</a>
</div>
</body>
</html>
Сохраните под любым именем как РНР файл и запустите. Три "в одном флаконе" - страница, получение формы, отправка формы. Код тот же самый, только убрано не влияющее на саму суть вопроса, и вместо url запросов используется текущий url (адрес ссылки и location при отправке формы). То есть, если все написано корректно, то проблем быть не должно. |
Ваш код работает.. Но он не подгруженный контент..
Статиком у меня тоже работает а вот из подгруженного контента формы гет работает а пост нет... В любом случае БОЛЬШОЕ СПАСИБО...Было очень позновательно... |
Странно...В отдельном файле работает а в моем никак...
Буду разбиратся в своих косяках.. Всем спасибо.. |
Статиком у меня тоже работает а вот из подгруженного контента формы гет работает а пост нет...
Значит обработчики событий делегируются элементам, которых нет на странице, других объяснений нет. |
Хоть раз за 3 страницы посоветовали ему консоль открыть?
|
Нашол решение...
Работает 100% Может кому пригодится... Можно динамически подменять все что угодно.. Передав масив с ключ - данные и через цикл вывести все что передали...
$('#content').on('submit','#postform',function(){
var form = $(this);
var error = false;
form.find('input, textarea').each( function(){
if ($(this).val() == '') {
alert('Заполните поле "'+$(this).attr('placeholder')+'"!');
error = true;
}
});
if(!error){
var data = form.serialize();
$.ajax({
type: 'POST',
url: 'ad.php',
dataType: 'json',
data: data,
beforeSend: function(data){
form.find('input[type="submit"]').attr('disabled', 'disabled');
},
success: function(data){
if(data['error']){
alert(data['error']);
}else{
$('#content').html(data['content']);
$('#title').html(data['title']);
}
},
error: function (xhr, ajaxOptions, thrownError){
alert(xhr.status);
alert(thrownError);
},
complete: function(data){
form.find('input[type="submit"]').prop('disabled', false);
}
});
}
return false;
});
|
Кстати ..не подскажете как вывести массив аяксом..типа как пхп foreach?
|
Помогите вывести масив
Приходит:
{"title":"что то","content":"контент","menu":"меню"}
Надо вывести через цикл: $(data['ключ']).html(data['значение..']); |
И что революционного в стандартном для jQ в вашем решении? Проверка пустых полей? Так зачем она да еще с placeholder, если есть атрибут required?
Массив как foreach в jQ, это метод each. |
Цитата:
Страница с динамическим контентом..При смене контента не меняется title... Я просто хочу с сервера отправлять массив данных.. Например такой :
{"#content":"сам контент","#title":"титл страницы" и т.д...}
Он приходит и чтоб не подменять так: $(#content).html(data['content']); $(#title).html(data['title']); Вывести все замены на странице циклом... А про революцию никто и не говорит... Просто ненашел для меня понятный пример работы с циклами... Напомню что js только начал изучать...знаю unity js но он очень отличается..знаю C# Пробовал выводить как в них но у меня ничего не получается..Поэтому прошу помоч..:help: |
Вопрос "вывести через цикл", и если each, это "я не понял", значит не понял.
|
Спасибо !!! Можно закрыть тему а я пошел копать в сторону each
|
Может кому пригодится.
Замена контента титла и что угодно...
$('#content').on('submit','#ajaxform',function(){
var form = $(this);
var error = false;
form.find('input, textarea').each( function(){
if ($(this).val() == '') {
alert('Заполните поле "'+$(this).attr('placeholder')+'"!');
error = true;
}
});
if(!error){
var data = form.serialize();
$.ajax({
type: 'POST',
url: 'ad.php',
dataType: 'json',
data: data,
beforeSend: function(data){
form.find('input[type="submit"]').attr('disabled', 'disabled');
},
success: function(data){
if(data['error']){
alert(data['error']);
}else{
$.each(data, function(key, val){
$(key).html(val);
});
}
},
error: function (xhr, ajaxOptions, thrownError){
alert(xhr.status);
alert(thrownError);
},
complete: function(data){
form.find('input[type="submit"]').prop('disabled', false);
}
});
}
return false;
});
Передаем массив..
$json['#content'] = 'OK Content !!!';
$json['#titl'] = 'title ok';
На главной странице.. <title id="title"></title> <body> <div id="content"></div> </body> |
Еще вопросик..
Вот форма <form method="post" name="cr-us" action="?mod=users&opt=create-user" id="ajaxform"> <br /> <input type="text" size="32" maxlength="36" name="name" placeholder="Ваше имя" val=""><br /> <input type="text" size="32" maxlength="36" name="email" placeholder="Ваш email" val=""><br /> <input type="text" size="32" maxlength="36" name="subject" placeholder="Тема" val=""> <br /> <textarea cols="25" rows="10" name="message" placeholder="Сообщение.." val=""></textarea> <br /> <input type="submit" name="cr-user" id="cr-user" value="GO GO GO"/> </form> Выше упамянутым скриптом отправляется пост..Все приходит кроме то что в субмите..На стороне сервера мне надо както индифицировать приходящие данные..чтоб знать какой модуль будет обробатывать..Например без js в посте приходит name="cr-user" из submita и в php запускается модуль с именем cr-user..Через js не приходит и как быть? |
Дело в том, что jQ не помещает кнопки отправки формы, а также поля типа file в результат методов serialize(), serializeArray().
Можно добавить самостоятельно кнопку: data: $(this).serialize()+'&cr-user='+что-то вразумительное //ибо GO GO GO, это не лучшее для инициализации Можно и скрытым полем передавать признак той или иной формы. А если выбросить все эти name="email", и работать по случайному ключу, который формирует и хранит сервер, то этот ключ и будет служить идентификатором и полей, и источника (формы). |
Цитата:
Что за ключь я знаю а вот как им пользоваться нет.. |
name, email, subject, ... это и есть ключи массива, под которыми значения соответствующих полей формы и будут переданы на север. Говоря о ключе, я имел ввиду не использовать таких явных имен у полей формы как name, email, pass и т.д.
Как бы работал бот изучая вашу страницу - уж точно бы нашел эти имена и понял, что они собой представляют. А есть еще и autocomplete, о котором вы может даже и не подозреваете, а это "удобство" может обернуться и сложностями. Сервер не может принять одновременно две формы. Если клиент имеет на страницах не более одной формы, то все упрощается. При каждом запросе формы и ее выводе пользователю сервер генерирует случайный хеш, который хранит или в сессии (сессионный ключ), или в базе (время работы ключа не зависит от жизни сессии), который является ключом для имени определяющего источник запроса. Источник запроса в свою очередь определяет что за форма пришла, как должны быть обработаны ее поля, с какой таблицей базы данных они связаны. Например, имена ваших полей выглядели бы так: <form method="post" name="cr-us" action="?mod=users&opt=create-user" id="ajaxform"> <br /> <input type="text" size="32" maxlength="36" name="612a15ca20bb91356d9433c9195d4d5f[0]" placeholder="Ваше имя" val=""><br /> <input type="text" size="32" maxlength="36" name="612a15ca20bb91356d9433c9195d4d5f[1]" placeholder="Ваш email" val=""><br /> <input type="text" size="32" maxlength="36" name="612a15ca20bb91356d9433c9195d4d5f[2]" placeholder="Тема" val=""> <br /> <textarea cols="25" rows="10" name="612a15ca20bb91356d9433c9195d4d5f[3]" placeholder="Сообщение.." val=""></textarea> <br /> <input type="submit" value="GO GO GO"/> </form> Если такое именование преследует скрыть истинное назначение полей формы, то тексты типа "Ваш email" добавляются посредством сценария, отказываются от разных новых типов полей ну и т.д. Хотя бот боту рознь. Но в данном случае такую форму можно принять только в течении жизни сессии (при хранении ключа в сессии), после чего такой формы для сервера просто не будет существовать. При успешном приеме данных текущий ключ также удаляется. Сервер получая форму, по ключу узнает имя источника запроса, соответственно обрабатывая данные. Соответствие индексов полей формы именам полей SQL-таблицы хранится на сервере под именем источника запроса, как их ключом. |
| Часовой пояс GMT +3, время: 19:17. |