woodmonster Posted July 9, 2016 Share Posted July 9, 2016 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 9, 2016 Share Posted July 9, 2016 (edited) 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 July 9, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
woodmonster Posted July 10, 2016 Author Share Posted July 10, 2016 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now