HTML+CSS+JavaScript

Здравствуйте!
Такая проблема.
На странице три почти идентичные формы. Соответственно им имеются три спана вне этих форм:

* * * <span class="but_post_write_check" onclick="submit_img_form();">Публикуем</span> * * *

(то есть, для простого текстового поста свои отдельные форма и спан, для графики - свои, и для видео - тоже свои)

Функции-обработчики различаются нюансами валидации содержимого этих форм:

* * * <script> function submit_img_form(){          var val = $('#post_img_form').find('.nicEdit-main').html();     if(!/<img[^\\\/<>]+src=('|")http:\/\/[^<>\\\s'";]+('|")/gi.test(val)){                  some code for alert и тд и пр...          return false;     }     else{                  document.forms['post_img_form'].submit(); //разумеется, 'post_img_form' - это id этой конкретной формы         //console.log('WTF???');     }      } </script> * * *

Собственно непонятка: в Firefox'e работает только первый и третий сабмит, в остальных браузерах (O, Cr, IE) все OK.
Молчит и консоль, если не выводить в ней текст вручную после или до сабмита. Усли в блоке else прописать alert, он послушно выскакивает. Если прописать document.forms['post_img_form'].submit(); непосредственно в onclick, все равно ничего не происходит, передача данных и переход на файл-приемник не происходят.

И, что поражает воображение, это тот факт, что все три формы на странице идентичные. Ну, почти.
HTML-ошибок, вроде незакрытых тегов или скобок тоже нет.
Я, было, грешил на какой-нибудь экстеншин файафокса, даже снес свой и поставил заово "с нуля" - и бестолку...

Подскажите возможную траблу!
Спасибо.

Начнём с того, что событию onclick тега <SPAN> ничего возвращать НЕ НУЖНО.

Это же не ссылка, у которой по клику происходит переход на страницу, адрес которой указан в атрибуте HREF- вот именно этот переход мы можем отменить или разрешить, для чего возвращаем ссылке false или true.

По событию onclick тега <SPAN> можно лишь чего-то сделать (если какое-то условие выполняется) или - НЕ сделать, если условие не выполняется.

Значит, ПО-ЛЮБОМУ, структура всех трёх функций проста до безобразия:

function ABCDE () { if (условие == истина) {делаем то, что нужно} }

Никаких return'ов не должно быть в принципе.

Ну а далее я бы вам посоветовал сделать простой тест:
все три функции привести к виду

function ABCDE_1_2_3 () { if (true) {alert ('Функция ABCDE_1 говорит - ИСТИНА')} else alert ('Функция ABCDE_1 говорит - ЛОЖЬ') // эта строка нужна только для тестирования }

и проверить работу onclick на всех трёх <SPAN>.

Если всё ОК, то начинайте добавлять реальные условия.
По одной функции за раз.
Добавили в функцию _1 - проверили... пошли добавлять далее, в функцию _2...

PS. И научитесь, в конце-концов писать скрипт в нормальном формате.
Ваши пробелы/отступы/переводы строк не несут никакой доп/информации, а только затрудняют чтение кода.
А должно быть как раз наоборот - всякий пробел/отступ/новая строка должны помогать понимать код.
Сравните ниженаписанное с тем "мусором", который выложили вы:

function submit_img_form () { var val = $ ('#post_img_form').find ('.nicEdit-main').html (); if (!/<img[^\\\/<>]+src=('|")http:\/\/[^<>\\\s'";]+('|")/gi.test (val))    {    //some code for alert и тд и пр...    return false;    } else    {    document.forms ['post_img_form'].submit (); //разумеется, 'post_img_form' - это id этой конкретной формы    //console.log ('WTF???');    } }

Здравствуйте, ЯСА!
Да, насчет return'a в спанах Вы абсолютно правы! Спасибо, намотал на ус.
Но это конкретную проблему не решает.
Вот, к примеру, нормально работающая ф-ция беглой проверки и отправки данных "текстовой" формы (не вдаюсь в детали - все работает!):

function submit_polit_form(){     var simply_text = my_trim($('#post_simple_form').find('.nicEdit-main').html()); //У меня на текстареях сидит nicEditor             simply_text = my_trim_br(simply_text);             var post_text = simply_text.replace(/<br>[^\wа-яёА-ЯЁ!?:;)-]*<br>/g,'<br>');             post_text = post_text.toString().replace(/<br>[^\wа-яёА-ЯЁ!?:;)-]*<br>/g,'<br>');             var ch_txt = my_trim(post_text);             ch_txt = strip_tags(ch_txt,'<a>');         //Замечательная ф-ция! Могу поделиться )             if(ch_txt==''){                                        //типа, ЯСА, если после вырезки ВСЕХ тегов, в т.ч. <br>, текста не осталось, то...                 delete window.ch_yu_link;                 alert('Не надо спешить, '+username+'.\nКогда появятся идеи, тогда и напишете.');                 $('#post_simple_form').find('.nicEdit-main').html('').focus();                 $('#button_polit_check').html('').text('Попробуйте еще');                // return false;             }             else{                 $('#simle_txt').html(post_text); //загружаем писанину в текстарею                 document.forms['post_simple_form'].submit();             }      }

Все работает как часы.

И вот упрощенная дальше некуда проблемная ф-ция:

function submit_img_form(){          var val = $('#post_img_form').find('.nicEdit-main').html();     if(!/<img[^\\\/<>]+src=('|")http:\/\/[^<>\\\s'";]+('|")/gi.test(val)){          alert("Вы долго будете морочить голову, "+username+"?\nГде картинка?!");          $('#button_img_check').html('').text('Попробуйте еще раз');     }     else{         $('#img_txt').html(val);         document.forms['post_img_form'].submit();         console.log('Where is my fucking error????');     }      }

Подчеркну снова: вставка document.forms['post_img_form'].submit(); в onclick кнопки-спана тоже ничего не дает!
А в самой форме никаких ошибок нет.

Если уж jquery используете, то зачем такая смесь? Отправляйте $('#post_img_form').submit().
А проблема с лисой может быть в том, что он "не видит" функцию. Например, эта функция объявлена внутри вызываемой, и объявлена не в том месте.

Здравствуйте, confirm!
Спасибо, что отозвались!!
A я пробовал $('#post_img_form').submit().
И, тем более, вставка в "else" алерта, к примеру, или консол-лога говорит о том, что лиса ф-цию все-таки видит.

Приведите структуру кода, включая форму вашу, и как говорил ЯСА, без излишеств. Кстати, а если я выкину ваш код со страницы, тогда "Пользователь... не морочте голову..." будет false?

Я понял, мне больше не обращаться сюда за помощью?
Если вам что-то не нравится, игнорируйте мои вопросы.

Что непонятно, прошу показать структуру кода, то есть как у вас это на странице выглядит, например

function aaa() {  .... } function bbb() {    function ccc() {     ....   } }

и тут форма (или в чем-то форма)

Ведь я вам могу привести свой код примера, и он нормально будет работать в лисе, то есть, проблема не в лисе, а в вашем коде. О чем вам ЯСА и говорил.

Извините, я не правильно понял ваши слова.
Знаете, там столько всего нагромождено, что... Но ведь НЕ работает ТОЛЬКО в ЛИСЕ! И консоль пустая!

Хорошо, сейчас попробую.

У вас ошибка, не вешайте ее на Лису.
Не надо всякого нагромождения, просто структуру, то есть дерево функций и объектов, которые задействованы с этой злополучной формой. Включены должно быть и те элементы, в которые может быть помещена форма, и если эти элементы участвуют в цепочке вызовов/ссылок при обращении к этой форме.

Писал-писал и страница подвисла...
Извините, можно я отвечу завтра? Мне нужно идти.
Буду рад любой помощи!
Спасибо.

Я вот, что хотел бы добавить, ЯСА. Вставленный в эту проблемную форму "нормальный" <input type="submit".../> работает прекрасно.
То есть в FF почему-то не передается извне событие сабмит именно этой, блин, форме.

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

<div style="display: none;"><input type="submit" value="Submit" id="imgsubm" disabled="disabled"/></div>

И клик по спану:

<span class="but_post_write_check" onclick="submit_img_form();">Публикуем</span>

перекинул на эту кнопку:

function submit_img_form(){          var val = $('#post_img_form').find('.nicEdit-main').html();     if(!/<img[^\\\/<>]+src=('|")http:\/\/[^<>\\\s'";]+('|")/gi.test(val)){          alert("Вы долго будете морочить голову, "+username+"?\nГде картинка?!");          $('#button_img_check').html('').text('Попробуйте еще раз');          delete window.ch_yu_link;          $('#img_insert_tool').html('').append(window.img_tool);          window.img_tool='<span style="top:5px; position:relative;">Шутим, '+username+'?</span>';          var position = $('#img_insert_tool').position();          $(document).scrollTop(position.top);          return false;     }     else{         $('#img_txt').html(val);         $('#imgsubm').removeAttr('disabled').click();         //$('#post_img_write').find('#post_img_form').submit();         //document.forms['post_img_form'].submit();         //console.log('Where is my fucking error????');     }      }

Работает все кроссбраузерно и беспроблемно, но радости нет. Я так и не понял причину возникшего трабла.

Спасибо! )

Вы так и не представили того, что я просил. Сейчас вы "подгоняете под ответ", вот чем вы занимаетесь.
Отправить форму можно по щелчку на любом элементе, и не важно какой при этом браузер будет.
Но вот что я не понимаю, так это вашу конструкцию, кучу строк кода в которых вы сами путаетесь.
Вы используете jquery, уж что, а она позволяет описывать задачу, пряча черновую работу за...
Не понятно зачем иметь три формы, если на сервер может быть отправлена только одна, не понятно зачем еще добавлять кучу функций, которые будут проверять нечто из каждой формы.

Если форма отправляется ajax-методом:

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  <script> $(function(){    $('button').click(function(){       var data = $(this).prev().find('input').serializeArray();       alert('Send param:\n'+$.param(data));       //ajax send       return false;    }); }); </script> </head> <body> <form> <fieldset> <legend>Block 1</legend> <input name="as1" value="1" /> <input name="as2" value="2" /> </fieldset> <button>Send</button> <fieldset> <legend>Block 2</legend> <input name="as3" value="3" /> <input name="as4" value="4" /> </fieldset> <button>Send</button> <fieldset> <legend>Block 3</legend> <input name="as5" value="5" /> <input name="as6" value="6" /> </fieldset> <button>Send</button> </form> </body> </html>

Обычная отправка формы:

<html> <head> <style> span {cursor: pointer;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  <script> $(function(){    $('span').click(function(){       var elm = $(this).prev().find('input');       $('form').children().remove();       $('form').append(elm).submit();    }); }); </script> </head> <body> <form action="url"> <fieldset> <legend>Block 1</legend> <input name="as1" value="1" /> <input name="as2" value="2" /> </fieldset> <span>Sender</span> <fieldset> <legend>Block 2</legend> <input name="as3" value="3" /> <input name="as4" value="4" /> </fieldset> <span>Sender</span> <fieldset> <legend>Block 3</legend> <input name="as5" value="5" /> <input name="as6" value="6" /> </fieldset> <span>Sender</span> </form> </body> </html>

В обеих случаях одна форма, и описать все проверки и if в обработчике кнопок/span вызвавших событие труда тоже не составляет.

Здравствуйте.
Все правильно, у меня три формы на одной странице, и в каждый момент времени видна только одна (см. аттач)
В Ваших примерах сабмит-кнопки находятся внутри своих форм... Ладно, я выложу сейчас исходники. Не хотел, просто, никого напрягать. Думал, ошибка типичная, мол, "событие поднимается из места клика по DOM'y вверх и ищет цель, куда передает команду..."
Я нашел аналогичный вопрос на Stackoverflow, но там у товарища просто были незакрытые теги в форме... Ща исходники выложу... Один момент!

>В Ваших примерах сабмит-кнопки находятся внутри своих форм...
Кнопка отправки формы и не может находиться вне формы, а если вы о span, то думаете, если я их помещу вне формы работать не будет? Как бы не так. Вынесите из формы все span, и поместите их, например, в такой блок:

<div>This as block button<br />  <span>Sender 1</span> <span>Sender 2</span> <span>Sender 3</span> </div>

А код обработки замените на этот:

$(function(){    $('div span').click(function(){       var elm = $('form fieldset').eq($(this).index()-1).find('input');       $('form').children().remove();       $('form').append(elm).submit();    }); });

Работает?
Да и куда оно денется. Куда угодно помещайте эти span и во что угодно, главное знать в каком месте стаи находится волк, и как правильно обратиться к вожаку. Все, это главное.

Я посмотрю ваши прикрепления, и если в представленном именно то, что позволит обнаружить причину, то...

Ваша картинка, еще не повод вставлять в страницу форму на каждую кнопку .- элементы формы можно разделить на блоки, и показывать в нужный момент один/несколько из них. Так что ваши кнопки, это еще не довод.

Спасибо, хорошая идея с фрагментарной видимостью формы! Нужно будет реализовать.
А о том, что сабмит должен сработать, я и не сомневаюсь. Вот только, что ему мешает в моем случае?...

Я посмотрю.

Вот.
new.js грузится, когда открывают страницу new.php, silent.js - в любом случае после jquery.

Ужас, ей богу.

Прав был ЯСА, говоря о том, что проблема в условиях, то есть не обязательно, что они не выполняются, а сам синтаксис. Прав был я, говоря о том, что у вас куча лишнего, и первое что бросается в глаза, это дубли.

Я думал, что вы все-таки структуру кода предъявите, а вы вывалили все. Ну тогда надо было не .php файл прикреплять, а результирующий html-код этой страницы. Тогда можно было запустить и реально проверить, иначе...

А иначе разбираться в этой каше сложно. Как вы вообще читаете свой код? Он ведь неудобен, не структурирован, да и много необдуманного, от того и лишнего писать приходится. К примеру - у вас отправка ajax методом на один и тот же url, тем не менее формы имеют имя, action указаны, и т.д., и т.п... К чему это?

Я взял и выбросил все, оставил только формы с элементами span. Функции только отправляют, а сервер дает ответ.

<script> $(function(){    function success(recievData){       alert(recievData);    }         $('#button_video_check').bind('click', function(){          var dates = {sec:1};          $.post('src.php',dates,success,'text');     });          $('#button_polit_check').click(function(){          var dates = {sec:2};          $.post('src.php',dates,success,'text');     });           $('#button_img_check').click(function(){          var dates = {sec:3};          $.post('src.php',dates,success,'text');     }); });     </script> <form id="post_simple_form">    <input type="hidden" name="polits" value="1" />    <input type="hidden" name="genre" value="simple" />    <textarea name="text"></textarea>    <input type="hidden" name="sec" value="sess" /> </form>          <div><span id="button_polit_check">Что у нас получилось?</span></div>          <form id="post_img_form">     <input type="hidden" name="genre" value="img" />     <textarea name="img_text"></textarea>     <input type="hidden" name="sec" value="sess" /><br /> </form> <div><span id="button_img_check">Что у нас получилось?</span></div>          <form id="post_video_form">     <input type="hidden" name="genre" value="video" />     <textarea name="text"></textarea>     <input type="hidden" name="sec" value="sess" /> </form> <div><span id="button_video_check">Что у нас получилось?</span></div> <?php if(isset($_POST['sec'])) echo $_POST['sec']; ?>

Заметьте, что вашу функцию success я вынес из функций, так как она у вас делает одно и тоже, а вы ее добросовестно прописываете трижды.

Работает в лисе, не ругается?

А если по уму, то:

<script> $(function(){    $('li').click(function(){       var src = $('#'+$(this).attr('send'));       var data = $(src).find('input, textarea')                        .serializeArray();       $.post('src.php',data,function(rqst){          $(src).children(".request").html(rqst);       },'html');    }); });     </script>      <ul>  <li send="poli">Send fragment 1</li>  <li send="img">Send fragment 2</li>  <li send="video">Send fragment 3</li> </ul> <form>   <div id="poli">     <input type="hidden" name="polits" value="1" />    <input type="hidden" name="genre" value="simple" />    <textarea name="text"></textarea>    <input type="hidden" name="sec" value="1" />    <div class="request"></div>   </div>   <div id="img">     <input type="hidden" name="genre" value="img" />     <textarea name="img_text"></textarea>     <input type="hidden" name="sec" value="2" /><br />     <div class="request"></div>   </div>   <div id="video">       <input type="hidden" name="genre" value="video" />     <textarea name="text"></textarea>     <input type="hidden" name="sec" value="3" />     <div class="request"></div>    </div> </form> <?php if(isset($_POST['sec'])) echo 'Request for fragment '.$_POST['sec']; ?>

И совсем не нужны три функции, трижды вызывать метод $.post, выносить куда-то обработчик success, как и не сложно понять кто инициатор вызова $('li').click(), чтобы определится с проверками. Да и вообще выбросить тег FORM, он в данном случае никакой роли не играет. Вполне достаточно в div-блоках элементов формы вам необходимых, а то и вообще не прописывать их на странице, а вставлять нужные динамически. В общем определитесь сперва с html-структурой, чтобы оптимизировать скрипт. А писать так как вы это делаете, это кошмар.

Стоп!
Итоговая цель - не проверка, а отправка написанного обработчику

<form name="simple_form" action="../news_edit.php" method="post" id="post_simple_form">

для дополнительной обработки и занесения в базу.
Обработчик же success всего лишь позволяет увидеть респонденту, как будет выглядеть его пост на странице.
Вот html:

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

Нет, код ваш тяжел и не продуман, не продуман, как я говорил ранее, начиная от html-элементов, их наименования. К примеру, у вас формы имеют практически одни и те же элементы, но не известно по каким соображениям текстовая область для img имеет имя img_text, в отличии от других имеющих имя text.

Если формы отправляются раздельно, то ведь и на сервере, при такой схожести полей форм, при одинаковом именовании их, было бы проще проводить проверку, не так ли? Ведь что на клиенте, что на сервере удобно будет знать только источник, чтобы определиться, а далее работать со "стандартным набором", который может и включать некие индивидуальности в зависимости от источника.

А если не мурыжить пользователя, иметь одну форму и выдавать ее порциями? Значит имена полей формы должны отличаться только префиксами идентифицирующими блок владельца. Или имена владельцев, это ключи в массиве однотипных полей, и опять таки на сервере будет легко идентифицировать принадлежность таковых полей.

А что у вас делает getXmlHttp(), что ajax запросы jquery не работают в некоторых браузерах? Я знаю, что ajax jquery не работает из под hta, как не крути с политикой безопасности, но чтобы со страницы... Хотя я и не проверял на всех браузерах исключительно.

Одна, и пожалуй лучшая, из прелестей jquery, это цепочка вызова методов, в которой можно перемещаться по иерархии, что делает код проще, избавляет от написания лишнего, неизбежного при отдельных вызовах. Такая цепочка вызова методов легко читается, позволяет видеть "дерево действий". У вас этого нет, у вас все кусками, некоторое вообще не понятно зачем на клиенте (даже в контексте вашей проверки "для посмотреть"), а не на сервере...

Есть сложный код, разобраться в котором нужно время. Ваш код не сложен, а тяжел, не потому, что его много, а именно по восприятию.

Ну почему же нет предварительной проверки? Есть она. И обработка перед показом итога тоже есть (файл прикреплен). И суть ее - показать пользователю, как будет выглядеть его пост на странице, были ли ссылки на его новость ранее (иначе - это уже обсуждалось и интерес вряд ли представляет), а также исправить возможные ошибки в посте до его окончательной публикации.

Да, getXmlHttp() здесь лишняя. Это я хотел реализовать в IE ajax-отправку картинки на imgur.com с получением в ответе адреса загруженного изображения. (Потом дошло, что это невозможно из-за кривого восприятия эксплорером события onchange). Я помню об этом и в итоговом скрипте ее бы не было.

А для того, чтобы строить цепочки вызовов в jquery, нужно его выучить как можно полнее, чем я сейчас и занимаюсь. И как дилетанту, пока только изучающему js вообще и jquery в частности, мне легче было организовать работу именно с тремя формами по отдельности, чтобы самому не запутаться что к чему )) И это все - не коммерческий проект, не "шабашка", так, делаю сайт для себя в качестве хобби.

По поводу "тяжести" и избыточности кода ваши замечания абсолютно справедливы! Есть такой грех. Исправлюсь.

Но что, все-таки, по нашей проблеме? В чем особенность именно второй формы? Я уже убирал в ней превращение блока с кнопками в текстовое поле ввода названия картинки, но итог тот же. Я уже переносил сабмит по клику на спане в $(document).ready() - все равно сабмит не работает. Только в FF и при пустой консоли. То есть, ошибки js вроде как нет, иначе firebug тут же оповестил об этом... В то же время, если в форму встроить кнопку, данные отправляются. Значит, с самой формой все ОК ( тегами, атрибутами...), и стало быть просто внешний сабмит до нее не доходит. Почему???
Вопрос стал уже чисто риторическим, но проблема интересна.

Я только что убрал все остальные формы со страницы - результата нет.

>Итоговая цель - не проверка, а отправка написанного обработчику

И как это соотнести с этим:

>Ну почему же нет предварительной проверки? Есть она.

Я ведь о чем речь веду. Вы используете ajax, при этом я вижу тип данных от сервера - html. Можно конечно вернуть и html, в котором будет сообщаться, что поле N имеет такую-то ошибку, но ведь по вашим же словам возврат, это только результат "дизайна". Я пользователь ваш, если я делаю ошибки, то я могу ожидать видеть их где либо в месте удобном, а для этого клиентский скрипт должен знать, что вернули именно ошибку, а не ОК. У вас же, тогда, получается все в одном месте, и ошибки, и Ок, так? Я например, вероятнее ожидал бы "как выглядит" в отдельном слое поверх всего.

А вырезание тегов А на клиенте, это для чего? А если я выкину это из вашего скрипта и отправлю, все будет нормально? А если вы проверяете это на сервере, и вырезаете, то зачем оно вообще нужно на клиенте? И почему только А, а где забота об IFRAME и т.п., фишинге и прочих гадостях? А если есть, и север это контролирует, то чем таким выдающимся отличается тег А, что он у вас упомянут и на клиенте?

Вот этого всего в вашем коде я не понимаю. Я не понимаю смысла этих операций на клиенте - для них клиент, это не надежное место. В вашем коде смешаны понятия сервиса и безопасности.

Используя ajax можно было бы убить трех зайцев сразу - проверить ввод, сохранить на сервере (включая и загрузку фото, для данной версии ajax в помощь iframe для этого), и показать результат (если ввод ОК).

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

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

Если нужно обратиться к одной области в коде, которая должна выполнять три задачи, во многом схожие, и должна знать при этом кто источник задачи, то как будет удобнее обратиться к этой области? Так:

$("#id_1,#id_2,...").event(function(){select src}) ?

Можно и так, но есть одно небольшое но. Я говорил, что именование ваших элементов от наития, а не от разумного. В CSS существует селектор вида E[attr|=val], указывающий на любой элемент E, атрибут которого "attr" содержит список разделенных дефисами значений, начинающийся (слева) с "val". jQuery имеет подобный селектор. То есть, такое именование будет определять и стили элементов, и источник вызова обработки событий, а также может содержать и параметры для вызываемых методов. А извлечь такие параметры из атрибута не сложно.

То есть - именование элементов, которые так или иначе участвуют в обработке, в каждом из блоков по одним правилам, различающихся только некоторой частью, позволит обращаться к ним "анонимно". А одинаковая иерархия элементов, участвующих в обработке, в каждом блоке, позволит обращаться к ним по иерархии (родитель/потомок/нумерованный).

Серверу тоже будет легче - имена ключей пришедших те же, только источник разный. При этом зачем отправлять еще и физически саму форму? Приняли ajax-часть, запомнили, ждем пока пользователь не даст команды сохранить, которую он может дать на любом этапе, просмотрев результаты своей красоты.

Вот когда вы разложите все свое по полочкам, определитесь с html-структурой и необходимыми действиями над этой структурой, тогда и появится цепочка действий.

Вот просто пример (немного в свете вашей задачи). Нет тут, конечно, запоминания на сервере, проверок, как и команды сохранить. Просто при каждом выборе закладки создаются поля для ввода данных, отправляются, и если ОК, то удаление их, иначе ошибка ввода (простая проверка на пустоту текстовой области). Определено - кто, что от него, какими элементами... вот вам и цепочка вызовов, вместо отдельных функций и отдельного описания каждого метода.

<html> <head>     <meta http-equiv="content-type" content="text/html; charset=windows-1251" />     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style> [id|=frm] {     display: none;      border: 1px solid #898989; } ul {list-style: none;} li {display: inline;     float: left;      margin-right: 1em;     background: #E6E6E6;     cursor: pointer; } #error {color: red;} </style> <script> $(function(){    $('li').click(function(){       $('div[id^=frm]').hide().children('div.request').html('');       $('#form-box').remove();       var src_name = $(this).attr('send');        var src = $('#frm-'+src_name).show();               $('<div id=form-box><div id=error></div>'+         '<input type=hidden name=genre '+         'value=simple /><textarea name=text>text</textarea><input type=hidden '+         'name=src value='+src_name+' /><br><span class=send>Send</span></div>')           .insertAfter($(src).children('div.content'))           .children('span.send')           .bind('click', function() {              //проверка              var a = 1;                           if(a) { //результат проверки                 var data = $(this).parent()                                   .find('input, textarea')                                   .serializeArray();                 $.post('src.php', data, function(d) {                      if(typeof d.err == 'undefined') {                         $(src).find('div.request').html(d.rqs);                         $('#form-box').remove();                                        } else $('#error').html(d.err);                       }, 'json'                 );              } else alert('Error input');                             });    });        $('li:first').trigger('click'); });     </script>      </head> <body> <div> <ul>  <li send="poli">Tab 1</li>  <li send="img">Tab 2</li>  <li send="video">Tab 3</li> </ul> </div> <div style="clear:both;"></div>   <div id="frm-poli">     <div class="content">content poli</div>    <div class=request></div>   </div>   <div id="frm-img">     <div class="content">content img</div>     <div class=request></div>   </div>   <div id="frm-video">     <div class="content">content video</div>     <div class=request></div>     </div> </body> </html> src.php <?php if(isset($_POST['src'])) {    echo json_encode(!trim($_POST['text'])                          ? array('err'=>'Error '.$_POST['src'].'!')                         : array('rqs'=>'Send '.$_POST['src'].' OK!')                    );      } ?>

И заметьте, я вам в каждом примере прописывал откуда берется jquery, и этот способ подключения лучше вашего тем, что очень большая вероятность того, что у вашего пользователя она уже есть в кеше - все мы Гуглим, так или иначе. )

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

Доброе утро, confirm!

Спасибо вам большое!

Я уехал на работу, и вечером попытаюсь осмыслить ваш труд.

Хорошего вам дня!

А я по вашему сейчас на танцах? :)

Э-э-э... А, ну, да. Я так и думал.
Эх, вершины мастерства.... Мне теперь, чтобы понять ВСЕ, придется вникать в Ваши ответы долго.

Уважаемый confirm! Не возражаете, если мы вернемся к поиску причины потери сабмита в данном случае попозже? Я боюсь потерять энтузиазм :) Тем более, что проблема, хоть и дилетантски, но как бы решена :)

Дело в том, что у меня в голове с непривычки сейчас буквально смесь из первого, второго и третьего блюд, но нужно разлить это все по отдельным тарелкам :)

У меня новый вопрос. К сожалению.

Да мне то, можно об этом и вообще забыть, вернее лучше забыть. )


Я же ниже написал, что нужно сделать, чтобы была возможность увидеть проблему - заремировать вызов метода $.post. Просто запомните, если в коде есть методы $.get, $.post, $ajax, и при выполнении кода нет реакции, и ничего просмотреть нельзя, то ремируйте эти вызовы , обнаружите место и источник проблемы.
Вы не решили проблему, вы подогнали под ответ. Я предполагаю, что у вас ошибка в синтаксисе.

А насчет вершин, если это относится к примерам, то какие к черту вершины, просто я вижу так вашу задачу, и соответствующее ее решение. Я, конечно, не все могу знать из нее, но процентов на шестьдесят угадал, что вы делаете.

А делаете вы что-то не логичное. Вы же не будете пить воду так - из комнаты в кухню, наливаете стакан воды, ставите его на стол, возвращаетесь в комнату. И только после этого ритуала идете опять на кухню и пьете эту воду. Ну, глупо это, так ведь? И понимая это, вы, в тоже время, с данными пользователя поступаете именно так - получаете их, так, для проформы, а потом требуете их еще раз, уже для формы. Так как же вы пьете воду?

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

Тоже самое о наименовании элементов. Не надо вершин и совершенства, достаточно поступать так, как вы поступаете, вполне естественно, в других ситуациях. Вы на компьютере стараетесь же размещать или однотипные данные, или данные относящиеся к одной тематике, в папках соответствующих, в одном месте. И все правильно, так удобнее обращаться к ним, чем в раскиданным по всем местам и дискам папки. Все просто до банального. У вас есть, к примеру, 15 элементов span, которые будут вызывать три метода: просмотр, добавление, редактирование (по 5 элементов на функцию). При этом они должны менять стиль свой, одинаковый для всех, при наведении на них мыши. Значит надо поступать так же, как и с папками на компьютере – группировать их. Вот и получается три класса: hover-show, hover-add, hover-edit, с добавлением через дефис некоего id, который им нужно передавать в функцию. При этом, как я говорил ранее, по селектору [class|=hover] все эти элементы будут изменять стиль методом hover(), а по селекторам hover-show, hover-add, hover-edit вызывать методы обработки. А зная, что к элементам лучше обращаться не по их стилю, а по id, нет проблемы так прописать им этот атрибут.

А учитывая то, что обратиться к элементу по имени не всегда возможно, или удобнее обратиться к нему по DOM-дереву, нужно стараться писать такую структуру кода, которая бы позволяла определять однозначно, таким образом, элемент. Тем более, если группа таких элементов обращается к одной и той же функции. Вот и вся премудрость, без всяких вершин.

А "я вроде бы как решил", это хуже всего. Нельзя быть до понедельника плохим мальчиком, а вот с понедельника обязательно стать хорошим. Либо плохой, либо хороший, так как первое входит в привычку, а далее в норму, а второе, это всегда заставлять себя, пока не будет результата. )

Не доводите меня до слез, уважаемый confirm!
Что такое "ремировать"?
Я, ведь, "не волшебник, я только учусь" ©
Про стакан на кухне вы написали потому, что, э-э-э, трудно объяснить словами суть идеи, э-э-э, проекта. Но это очень здорово! Так мне сказали на stackoverflow :)
Я распечатал наш диалог и буду брать его с собой для детального изучения в свободную минуту. Каждую строчку приведенного вами кода попытаюсь понять.

Ремировать строчки кода, это значит превратить их в строку комментария, вот так:

//$.post(....)... или блок: /* code code ... code */

PS. Про стакан воды я сказал потому, что вы такой ерундой вряд ли будете заниматься, а программируя вы описываете по сути логику действий человека. Так вот, воду вы пьете правильно, а в программировании почему-то логика хромает. Можно было бы сравнить ваш код взаимодействия клиент-сервер и с другим примером, но суть от этого бы не поменялась - у вас много лишнего, и не свойственного для задач на клиенте.

А-а-а, да исправно работают все ajax'ы, проблем никаких.
Я, наверное, залью этот весь полуфабрикат на хостинг и дам вам, если не возражаете, ссылку на сайт, чтобы вы увидели все непосредственно.
Можно так сделать?

Ну если работает то и тьфу-тьфу, чего еще смотреть? )

Как?? А восторги?! А эстетическое наслаждение???
:)
Ладно, не будем флудить.
Спасибо, confirm!

Вот когда вы покажете код, в котором будут отсутствовать излишества, код будет оптимизирован, и оптимизация его, это и заслуга оптимизации и в html-коде, когда сценарии на клиенте будут выполнять только свои задачи: работа с интерфейсом страницы, проверка "грамматики", и т.л., а не бесполезные на клиенте, вот тогда можно будет и оценить труд.

Просмотрел. В самих отправлениях post-запросов проблем нет, то есть если выбросить все проверки, то естественно сработает.
Я не стал разбираться с переменными вашими из которых формируются данные для отправления, так как, к примеру, $('#post_img_form').find('.nicEdit-main') не находит такого элемента, тоже самое и в #post_video_form. Когда он присутствует я не знаю, и время для разбора этого тратить не стал. А из этих данных у вас формируется текст, который затем многочисленными replace...

В общем у вас проблемы, как вам неоднократно говорили, это в данных, от которых зависят условия. Ошибка, может быть в синтаксисе рег. выражений, за которым FF следит строго, в отличие от других.

А чтобы увидеть ошибку, заремируйте вызов метода $.post, иначе у вас даже alert не сработает - ошибка в формировании данных не отдает валидный объект для этого метода, и все затыкается.
А вместо этого метода выводите сам объект на экран таким образом:
alert($.param(dates))
Увидите где проблема скрывается.

После "правильного" клика по "Введите адрес из Сети" или "--//-- из Компьютера", кнопки удаляем и на их месте - поле ввода названия картинки (для того, чтобы запостить можно было только одну).

Eckb все в порядке, то по нажатию на кнопку "Что у нас получилось?" интерфейс паги становится таким (см.)
То есть, пользователь увидит, как его пост будет выглядеть на сайте.


Это чтобы Вам стала понятной идея ))