JavaScript - проблем при вземане на данни от textarea

Здравейте! Моля за малко помощ!

Искам да взема целия HTML от div container, да го сложа като стойност в скрито инпут поле и да го покажа на потребителя със същия CSS, както е стилизиран преди събмита на информацията, като изключа само таговете textarea. Вместо таговете textarea искам да покажа на потребителя информацията която ще идва от тези полета (textarea). До тук добре всичко ми се получава, НО когато сменя стойноста на текстовите полета с друга javascript-а не ми хваща промените в textarea-та! Ето го и кода - моля кажете къде бъркам!

HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <?php
        if(isset($_POST['save'])){
            $scrita = $_POST['hid'];
            $scritaInsert = strip_tags($scrita, '<p><n><nz><font><bl><br><r><chh>');
            echo $scritaInsert;
            exit; //just for the test
        }
        ?>
        <form method="POST">
            <input type="submit" name="save" class="btn-style" value="Save" id="submitContainer"/>
            <input type="hidden" name="hid" id="hid"/>
        </form>
        <div id="container">
            <p style="text-align: center;font-weight: bold;font-size: 23px;color: black;">CocaCola</p>
            <p style="text-align: center; color: black; font-size:16px; text-decoration: underline;">
                The address
            </p>

            <p style="font-weight: bold; color: black;">
                To: <textarea name="do" style="width: 920px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
            </p>

            <p style="font-weight: bold; color: black;">
                Attention: <textarea  name="vnimanieto" style="width: 830px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
            </p>

            <p style="text-align: center;font-weight: bold;font-size: 19px;color: black;">
                CONTRACT<br>
            <n style="text-align: center;font-size: 16px;color: black;">
                For transport
            </n><br>
            <nz style="text-align: center;">№<textarea name="nomer" style="width: 60px; max-width: 100%; height: 18px;">1737</textarea>
                Date:<textarea name="date" style="width: 90px; max-width: 100%; height: 18px;" id="date">25.05.2016</textarea>
            </nz>
        </p>
    </div>
    <script type="text/javascript">
            $('#submitContainer').click(function(){
            $('.picker').html('');
            var content = $('#container').html();
            $('#hid').val(content);
        });
   </script>
    </body>
</html>
 
Последно редактирано:
От: JavaScript - проблем при вземане на данни от textarea

Замени:
PHP:
<input type="hidden" name="hid" id="hid"/>
със
PHP:
<textarea style="display:none" name="hid" id="hid"></textarea>
 
От: От: JavaScript - проблем при вземане на данни от textarea

Същия проблем приятелю! Отново ми връща забитите стойности от текстовите полета, а не новите, които аз вкарвам!
 
От: JavaScript - проблем при вземане на данни от textarea

Да, не чета кво си писал.
По късно ще ти го оправя.
 
От: JavaScript - проблем при вземане на данни от textarea

Хмм, виждам какво имаш предвид. Странно. Явно хтмл кода не се променя при промяна на стойност в поле.
Ами можеш просто да го направиш по нормалния начин, без тези трикове и скриптове. Просто заобиколи слоя с формуляра, вземи стойностите с php и ги изпиши.
 
От: От: JavaScript - проблем при вземане на данни от textarea

Хмм, виждам какво имаш предвид. Странно. Явно хтмл кода не се променя при промяна на стойност в поле.
Ами можеш просто да го направиш по нормалния начин, без тези трикове и скриптове. Просто заобиколи слоя с формуляра, вземи стойностите с php и ги изпиши.

Да това наистина е вариант, но искам също да запазя и CSS-a на таговете. (стилизирането да остане същото, само да се премахнат textarea таговете и на тяхно място да се показва стойността идваща от textarea)
 
От: От: JavaScript - проблем при вземане на данни от textarea

Изнесъл си скрипта извън контента. Постави го преди затварящият се </body> елемент. Може и пред </div>.

Мерси - оправих си кода, но ефект няма!
 
От: JavaScript - проблем при вземане на данни от textarea

Опитай тук: https://jsfiddle.net/yhrmodnu/. Може да експериментираш. В момента не се виждат данните от textarea, но не съм сигурна това ли е резултатът, който целиш.
 
От: От: JavaScript - проблем при вземане на данни от textarea

Опитай тук: https://jsfiddle.net/yhrmodnu/. Може да експериментираш. В момента не се виждат данните от textarea, но не съм сигурна това ли е резултатът, който целиш.

Дано тук се разбира по-ясно проблема ми Виж файлът 13873
 
От: JavaScript - проблем при вземане на данни от textarea

Тук е показан един начин: http://stackoverflow.com/questions/...-changes-get-updated-upon-cloning-as-with-inp

$("textarea").change(function() { $(this).text($(this).val()); });

... или аналогично на това, но без да се слуша за "change", т.е. точно преди да се вземе html():

$("textarea").each(function() {$(this).text($(this).val());})

Проблема е нещо от сорта на това, че през погледа на #container всички textarea изглеждат по стария начин, въпреки че ако пробваш да им вземеш тяхното value, то ще е с най-новата си стойност. Не знам бъг ли е или какво, но и при <select> елементите е същото.
 
От: От: JavaScript - проблем при вземане на данни от textarea

Да това наистина е вариант, но искам също да запазя и CSS-a на таговете. (стилизирането да остане същото, само да се премахнат textarea таговете и на тяхно място да се показва стойността идваща от textarea)
Може и той да се изпише пак заедно с всичко останало. Аз лично така бих го направил. Колкото по-малко скриптове и jquery-та, по-добре.
Иначе явно има и скрипт решение, дето AseasRoa е казал.
 
От: От: JavaScript - проблем при вземане на данни от textarea

Може и той да се изпише пак заедно с всичко останало. Аз лично така бих го направил. Колкото по-малко скриптове и jquery-та, по-добре.
Иначе явно има и скрипт решение, дето AseasRoa е казал.

Най-малкото така няма как да валидира изпратените данни.
Последно с js или РНР ти трябва?
 
От: От: JavaScript - проблем при вземане на данни от textarea

Най-малкото така няма как да валидира изпратените данни.
Последно с js или РНР ти трябва?

Не разбрах. Защо не може да се валидира с php?
 
От: JavaScript - проблем при вземане на данни от textarea

Проблемът:https://bugs.jquery.com/ticket/3016

Това би трябвало да ти помогне :
$('#submitContainer').click(function(){
$('.picker').html('');
$('textarea').each(function() {
$(this).attr('value', $(this).val());
});

var content = $('#container').html();
$('#hid').val(content);
});
 
От: JavaScript - проблем при вземане на данни от textarea

Тествах го - няма ефект (не ми взема резултата от промените в textarea). Textarea полетата ги смених с input текстови полета. Тествах и пак няма ефект! Колко приятно :)
 
От: JavaScript - проблем при вземане на данни от textarea

Тествах го - няма ефект (не ми взема резултата от промените в textarea). Textarea полетата ги смених с input текстови полета. Тествах и пак няма ефект! Колко приятно :)
А как ще валидираш информацията изпратена от потребителите?
 
От: JavaScript - проблем при вземане на данни от textarea

А как ще валидираш информацията изпратена от потребителите?

Добър въпрос! Зная, че в кода, който съм показал textarea таговете ми са извън формата и по този начин с php няма как да валидирам информацията идваща ми от тези полета, но това е просто пример в който искам да разбера как с js да се случи тази магия - да взема HTML-a от div контейнера и.... останалото съм го описал по-горе!

На всички съм благодарен, които по някакъв начин се опитваха да ми помогнат!
 

Горе