Geek Answers Handbook

How to treat <div> as a form of <input>

What I've done:

HTML

<form> <div id="textBox" contenteditable="true" name="textBox"><?php echo $storyText; ?> </div> <textarea id="hiddeninput" name="hiddeninput"></textarea> <input type="submit" id="save" name="save" value="Submit"/> </form>

Javascript

 $('#save').click(function () { var mysave = $('#textBox').html(); $('#hiddeninput').val(mysave); $("form:first").submit(); $('#hiddeninput').append(mysave); alert($('#hiddeninput').val()); });

Thus, both the warning and the application display the correct information, but when sending I will not save #hiddeninput as a php variable. I initially had this as a hidden input method, but I'm trying to show that it will not publish no matter what I do,

+6
source share
5 answers

Your code works almost as it is. But I would prefer to use the usual <input type="hidden"> , and you do not need to run submit for your form in your case, just put the value in a hidden field.

Given your markup with slight changes

 <form action="showrequest.php"> <div id="textBox" contenteditable="true" name="textBox" style="width:300px;height:100px;"> </div> <textarea id="hiddeninput" name="hiddeninput"></textarea> <input type="submit" id="save" name="save" value="Submit"/> </form>

Js

 $(function(){ $('#save').click(function () { var mysave = $('#textBox').html(); $('#hiddeninput').val(mysave); }); });

var_dump($_REQUEST) on the php side gives

 array(2) { ["hiddeninput"]=> string(4) "test" ["save"]=> string(6) "Submit" }
+14
source

Try attaching a send event instead of a click event. What can happen, the form is submitted before the value of your text field is set.

 $('form').submit(function(){ var mysave = $('#textBox').html(); $('#hiddeninput').val(mysave); });

I checked this example with the = "get" method and got the html from the div so that it appears in the url.

+4
source

I believe your form is submitted before your js code can run. Since you are sending manually from jQuery, try to prevent the default event of the button (which also sends the form):

 $('#save').click(function(e) { e.preventDefault(); var mysave = $('#textBox').html(); $('#hiddeninput').val(mysave); $("form:first").submit(); });
+2
source

Speaking only from experience, you cannot send a div value in POST form.

You can change it to a text field, and if you want to restrict users from editing it, set it to disabled .

Alternatively, you can use javascript to submit the form and infer the value from #hiddeninput this way.

+1
source

Here is a general way to post any div content elements you want (see notes below):

 <form method="post" id="f"> <div id="txt" addToForm="f" contenteditable spellcheck="true" style="height:100px;width:300px;font-family:arial,sans serif;border:1px solid black;font-weight:normal;overflow-y:auto;" ></div><br /> <input type="button" value="Go" id="btnGo"> </form> <script type="text/javascript"> $(document).ready(function(){ $("#btnGo").click(function(){ $("div[addToForm]").each(function(){ var tId=$(this).prop("id"); $(this).after("<input type='hidden' name='"+tId+"' id='hdn"+tId+"'>"); $("#hdn"+tId).val($(this).html()); }); ("#f").submit(); }); }); </script>

Note 1), using <input type="hidden"> , saves any formatting (IE11 allows more than FF). If you want to remove all formatting, including CFLF (i.e. <br> ), from users who press Enter / Return, use <textarea style="display:none;"></textarea> instead. Note 2) make sure that the check is completed successfully first, or you will get several inputs with the same name.

0
source

More articles:


All Articles