Не работает форма в с полями в скрытом div

Тема в разделе "Веб-дизайн", создана пользователем NewS, 4 июл 2011.

Модераторы: zek24
  1. NewS

    NewS

    Регистр.:
    15 авг 2008
    Сообщения:
    255
    Симпатии:
    84
    Есть форма:
    HTML:
    <form name='..' id='..' enctype='multipart/form-data' method='post' action='..'>
    <input name='..' type='hidden' value='..' />
    <input name='..' type='hidden' value='..' />
    <input type='text' name='..' value='..'>
    <input type='text' name='..' value='..'>
    <a href='#' onclick='..'>Открыть скрытый див</a>
    <div class='hidden-content'>
    <input type='text' name='..' value='..'>
    <input type='text' name='..' value='..'>
    </div>
    <input type='submit' value='Сохранить' />
    </form>
    Открываю скрытый див в всплывающем окне с помощью Highslide JS, вношу текст в поля, и закрываю всплывающее окно.
    Далее отправляю форму. Но текст не сохраняется (или не передается в форму).

    Если же вынести эти поля из скрытого див'а, то всё отлично работает.

    В чем может быть причина? Это в принципе не должно работать или какой-то глюк Highslide JS?
     
  2. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Если, всплывающее окно представляет собой новое окно браузера, а я подозреваю, что это так, то это тоже самое, что вырвать кусок из кода и разместить его на другой странице, которые конечно не будут взаимодействовать.

    Лучше так:

    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Без названия 1</title>
    </
    head>

    <
    body>

    <
    script type="text/javascript">
    <!--
    function 
    Spoiler(obj) {

    var 
    name1 obj.parentNode.getElementsByTagName("div")[0];
    if (
    name1.style.display == "none"name1.style.display ""
    else 
    name1.style.display "none"

    var 
    name1 obj.parentNode.getElementsByTagName("a")[0];
    if (
    name1.innerText == "Показать"name1.innerText "Скрыть";
    else 
    name1.innerText "Показать";

    if (
    name1.className == "spoil"name1.className "spoil-open";
    else 
    name1.className "spoil";


    //-->
    </script>



    <form name='..' id='..' enctype='multipart/form-data' method='post' action='..'>
    <input name='..' type='hidden' value='..' />
    <input name='..' type='hidden' value='..' />
    <input type='text' name='..' value='..' />
    <input type='text' name='..' value='..'>
    <!--  -->    
    <span class="spoiler">
    <a id="name1" href="javascript:void(0)" class="spoil" onclick="Spoiler(this);">Показать</a> <br />
    <div id="text" style="display:none;">
        
        <div class='hidden-content'>
        <input type='text' name='..' value='..' />
        <input type='text' name='..' value='..' />
        </div>

    </div></span>                
    <!-- /-->

    <input type='submit' value='Сохранить' />
    </form>
    </body>

    </html>


    Это скрытое поле можно сделать плавающее:

    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Без названия 1</title>
    </
    head>

    <
    body>

    <
    script type="text/javascript">
    <!--
    function 
    Spoiler(obj) {

    var 
    name1 obj.parentNode.getElementsByTagName("div")[0];
    if (
    name1.style.display == "none"name1.style.display ""
    else 
    name1.style.display "none"

    var 
    name1 obj.parentNode.getElementsByTagName("a")[0];
    if (
    name1.innerText == "Показать"name1.innerText "Скрыть";
    else 
    name1.innerText "Показать";

    if (
    name1.className == "spoil"name1.className "spoil-open";
    else 
    name1.className "spoil";


    //-->
    </script>



    <form name='..' id='..' enctype='multipart/form-data' method='post' action='..'>
    <input name='..' type='hidden' value='..' />
    <input name='..' type='hidden' value='..' />
    <input type='text' name='..' value='..' />
    <input type='text' name='..' value='..'>
    <!--  -->    
    <span class="spoiler">
    <a id="name1" href="javascript:void(0)" class="spoil" onclick="Spoiler(this);">Показать</a> <br />
    <div id="text" style="display:none;">
        
        <div class='hidden-content' style="background:  #FFFF66; padding:20px; position:absolute; top:30%; left:45%;">
        <input type='text' name='..' value='..' />
        <input type='text' name='..' value='..' />
        </div>

    </div></span>                
    <!-- /-->

    <input type='submit' value='Сохранить' />
    </form>
    </body>

    </html>
     
  3. Darkmind

    Darkmind SNMP maniac

    Регистр.:
    31 май 2006
    Сообщения:
    182
    Симпатии:
    74
    В непонимании DOM и xHTML вообще.
    Подключаем логику: открывается див, вписывается значение в форму, закрывается див. Какие основания предполагать, что форма должна сохранять в себе только что вписанное значение?

    Адский костыль:
    PHP:
    <div>
        <
    form name='f1' id='f1' enctype='multipart/form-data' method='post'>
            <
    input type="hidden" name='mirror_h1' id='mirror_h1' value='' />
            <
    a href="index.htm" onclick="return hs.htmlExpand(this)">Open</a>
            <
    div class="highslide-maincontent">
                <
    input type='text' name='h1' value='h1' onkeyup="document.getElementById('mirror_h1').value=this.value">
            </
    div>
            <
    br />
            <
    input type='submit' value='Сохранить' />
        </
    form>
    </
    div>
    Т.е. при onkeyup, содержимое input поля во всплывающем диве транслируется на новое hidden поле (в нашем случае mirror_h1) в форме.
    Если использовать jQuery, то можно использовать метод live().

    Но советую придумать более валидную идею. Если форма требует такого обращения - это не шибко хорошая форма.
     
    NewS нравится это.
  4. NewS

    NewS

    Регистр.:
    15 авг 2008
    Сообщения:
    255
    Симпатии:
    84
    bork75, спасибо, но такой вариант не для меня )

    Похоже, что Highslide создает как бы отдельную страницу, и на неё отображает инфу. Так как формы полность выводимые в всплывающем окне работают. А тут, действительно, как выдранный кусок кода получается. Жаль конечно, что в Highslide нет возможности открыть часть формы, заполнить её, закрыть окно, и продолжать заполнять остальное.
    Решил вообще отказаться скрывать часть формы. Просто хотелось сделать страницу более компактной. :confused:

    Добавлено через 6 минут
    Darkmind, вот такая мысль уже проскакивала в моей голове. Продублировать поля и из них уже передавать основным полям. Хорошо, если это сработает. Надо будет попробовать. :)

    Добавлено через 32 минуты
    Darkmind, попробовал... не хочет onkeyup ничего передавать нужному id.
     
  5. Darkmind

    Darkmind SNMP maniac

    Регистр.:
    31 май 2006
    Сообщения:
    182
    Симпатии:
    74
    Показывайте код. Мой пример работает, я проверял перед тем как постить. JQuery подключен?

    И если несложно, пожалуйста, сохраняйте названия полей и ID'шники, а то потом многоточия заменять - время теряется.
     
  6. NewS

    NewS

    Регистр.:
    15 авг 2008
    Сообщения:
    255
    Симпатии:
    84
    Подключен jquery-1.4.4.min.js, но я в нем не разбираюсь. :confused:
    Вот код:
    HTML:
    <form name='Form' id='Form' enctype='multipart/form-data' method='post' action='add.php'>
    <input type='hidden' name='Foto1' id='Foto1' />
    <input type='hidden' name='Foto2' id='Foto2' />
    <input type='hidden' name='Foto3' id='Foto3' />
    <a href='#' onclick='return hs.htmlExpand(this)'>Открыть</a>
    <div class='highslide-maincontent'>
    <input type='file' onkeyup="document.getElementById('Foto1').value=this.value" />
    <input type='file' onkeyup="document.getElementById('Foto2').value=this.value" />
    <input type='file' onkeyup="document.getElementById('Foto3').value=this.value" />
    </div>
    </form>
    Добавлено через 21 минуту
    Я пробовал с полями типа file. Сейчас попробовал с полями типа text - получилось!
    А как же быть с полями типа file? Я тут вычитал, что у type='file' нет атрибута value.
     
  7. Darkmind

    Darkmind SNMP maniac

    Регистр.:
    31 май 2006
    Сообщения:
    182
    Симпатии:
    74
    Для type=file не срабатывает onkeyup. Вешать надо не на onkeyup а на onchange. И тогда еще будут проблемы с IE, потому что он не реагирует на change для поля input=file из-за хитрожопой работы с диалоговым окном.

    Решение на JS:

    PHP:
    <script type="text/javascript">
    $(
    document).ready(function() {

        var 
    $input  = $('#f1'); // Откуда копировать
        
    var $target = $('#h1'); // Куда копировать

        // Непосредственно функция копирования
        
    var crutch = function() {
            
    $target.val$input.val() );
        };

        
    // Костыль для IE
        
    if ($.browser.msie) {
            
    $input.click(function(event) {
                
    // IE подавляет эвент, пока не будет закрыт диалог
                
    setTimeout(function() {
                    
    crutch();
                }, 
    0);
            });
        }

        
    // Для православных браузеров работает change()
        
    else {
            
    $input.change(crutch);
        }
    });
    </script>
    Полный проверенный файл со включенной отладкой выглядит так:
    http://pastebin.com/w5ucyCHA

    А теперь внимание, вопрос: "Зачем такие костыли?". Не факт, что это решение будет безглючно работать во всех ситуациях. Зачем так извращаться? Лучше подумайте над дизайном и вёрсткой.
     
    NewS нравится это.
  8. NewS

    NewS

    Регистр.:
    15 авг 2008
    Сообщения:
    255
    Симпатии:
    84
    Darkmind, учитывая что у меня таких полей 7 штук, и я так понимаю, что для каждого нужно этот костыль прописывать, то я все же откажусь от этой идеи. Но за предложенное решение спасибо!
    Скрою лучше поля типа "текст" :) с ними же проблем, при использовании onkeyup, в разных браузерах не будет?

    И еще вопросик по поводу Highslide JS:
    При использовании objectType:'ajax', Опера отдает страницу с кирилическими ссылками, а IE не хочет:
    Можно как-то это починить?
     
  9. Darkmind

    Darkmind SNMP maniac

    Регистр.:
    31 май 2006
    Сообщения:
    182
    Симпатии:
    74
    В качестве селектора у jQuery можно использовать выражения:
    http://api.jquery.com/category/selectors/
    Но в любом случае, как я уже говорил, это установка костылей. У формы проблемы с юзабилити и интерфейсом, если требуются такие механики.

    Ну как сказать. Сам эвент onkeyup срабатывает во всех приличных браузерах. Но если юзер вздумает вставить текст из буфера обмена мышкой или через меню - поле не протранслируется. Потому что onkeyup срабатывает на отпускание кнопки на клавиатуре, а мышь - это уже onclick, onmousemove, onmouseout и так далее. Забегая вперёд, скажу что есть onpaste, но этот эвент не везде работает.

    Кириллические ссылки - зло, корнями уходящее в различные кодировки. Если в URI надо засунуть кириллицу - делайте ей urlencode().

    • ñîãëàøåíèå
    • соглашение
    • urlencode() -> %F1%EE%E3%EB%E0%F8%E5%ED%E8%E5
     
  10. NewS

    NewS

    Регистр.:
    15 авг 2008
    Сообщения:
    255
    Симпатии:
    84
    Почитал про эту функцию, покрутил, но результата не получил...
    Вот код ссылки:
    HTML:
    <a href='/соглашение/' class='highslide' onclick='return hs.htmlExpand(this)'>соглашение</a>
    Как на этом примере реализовать функцию urlencode()?
    Хочу заметить, что весь сайт и БД в UTF-8. И если Опера отдает страницы, значит проблема в Осле?