Jump to content
woodmonster

Javascript dont take changing from textarea

Recommended Posts

Hello guys! I want a little help! I want to take all HTML form div container, to put it in a value in hidden field and then to show it to the users with the same CSS style but without textareas tags. Instead of textareas, I want to show the value which came from the text fields (textarea)! So far so good! But when a change the information in textareas my javascript code do not take the new information from that field. What is wrong with my code?

<!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>
    </body>
</html>
<script type="text/javascript">
    $('#submitContainer').click(function(){
         $('.picker').html('');
        var content = $('#container').html();
        $('#hid').val(content);
    });
</script>

Share this post


Link to post
Share on other sites

The container never get a chance to transfer its content to hidden input, the form is submitted instantly on the click of submit button. You need to prevent default submission on click of submit button, transfer content to hidden input, then submit form using JavaScript.

 

You should be using onsubmit event of form instead of click of submit button event.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

I have change my javascript to



<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
$("textarea").each(function() {$(this).text($(this).val());});
var content = $('#container').html();
$('#hid').val(content);
});
</script>

and now my code is working


Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...