My website is separated into two parts - a large (CodeMirror) <textarea> and a drop-down menu which has a <form> (that contains "From", "To", "Subject" inputs) in it linked to a send.php file.
The text area and the form itself are located inside different <div>s so I'm not able to link it to the rest of the inputs I'm transferring to the send.php file.
How can I link / connect the submit button to the <textarea> input along with the other inputs it's associated with ("From", "To", "Subject") when transferring the data to the send.php file?
<div id="container">
<div id="sidebar" class="twenty"> //the form div
<li class="menu">
<li class="dropdown">
<form method="post" action="send.php">
<input type=... />
<input type=... />
<input type=... />
<input type="image" src=... alt="Submit Form" />
</form>
</li>
</li>
</div>
<div class="seventy"> //the textarea div
<textarea id="code" name="code">
</textarea>
</div>
</div>
Technically, you could use the form attribute to associate a textarea with a form:
<form ... id="foobar">
...
</form>
...
<textarea form="foobar" ...>
This is an HTML5 feature supported by Chrome and Firefox, for example, but not IE 9.
So check out other options, primarily reorganizing the page as suggested by #niomaster or using JavaScript as suggested by #Fluffeh. However, it’s not a good idea to rely on JavaScript being enabled, in matters of basic functionality. In reorganizing the page, care should be taken to avoid messing up any styling (or scripting) that might rely on the current markup. Also note that the current markup is invalid, since li elements are allowed only as children of ol or ul, so restructuring (if feasible) would be recommendable anyway.
At the simplest, it might suffice to move the <form ...> start tag to the very start of the body element and the </form> end tag right before the end of the body element. Then all form field elements on the page would be fields of this form.
You can make form the outermost tag. It changes nothing to the flow of the document.
You can't directly - if it's not in a form, it can't be submitted.
The best you can do is to write a custom javascript function that replaces your 'submit (image type)' action and copies the data from the textform into a hidden field within the form then submits the form as the last action. This will get the results you want without the user really knowing what you are doing behind the scenes.
Edit: As niomaster correctly points out, forms can span more than just a single <div> or <li> attribute. You can extend it easily without changing your code structure.
use jquery
//Get the text from text area
var textareadata = $("#code").val();
//dynamically append a hidden feild to your form
$('form').append('<input type="hidden" name="myfieldname" value="myvalue" id='myvalue'/>');
// dynamically write your text adtea data to the hidden field append to the form
$('#myvalue').val(textareadata);
amiregelz,
You can just add one id to form tag. using jquery get the value of the text area [$("#text-areaID").val();]and add hidden field using jquery/ javascript, pass the value to hidden field which you created dynamically then after validation of the form submit the form. You can get the value of the textarea as well in your php page.
Hope It will help you. Please mark it answer if it helps.
Related
This might be a basic question of HTML but I'd like to know if it is possible in PHP. Usually when building a form submission page, the form tag is set per one form group. So the submit button is assigned per one form tag. The elements of form fields have to be close as enclosed in the form tag. If I want more complicated layouts, then is it possible to separate form tags to divide form fields?
For example,
<?php
print_r($_POST);
?>
<form name="test" action="" method="post">
First name: <input type="text" name="firstname" value="" /><br />
<input type="submit" value="submit" />
</form>
<p>some other contents</p>
<form name="test" action="" method="post">
Last name: <input type="text" name="lastname" value="" />
</form>
In this case, even if the second field is filled, the value won't be sent. If possible, I'd like to have just one submit button and control multiple forms.
Wrap your entire page into a single form and use some kind of deliminator for your elements (for instance "form2_field1"). I have never found having multiple forms useful (even if there are hide/unhide values) and my guess is that the submit button will probably only submit the form it is wrapped in. As one of the comments has mentioned, use JQuery if you want more complex forms. However, my recommendation is just to send over the entire form, whether it is complex or not and process it according to what you want.
I have a rather strange problem. I know forms within forms are not valid HTML. But i need a solution that allows me to do something simular.
I use 'tabifier' javascript library, to create tabs. Different tabs are created by using divs with special id for each tab.
I have a main form that is around all tabs like this:
<form id=......>
<div id=...>
</div>
<div id=...>
</div>
</form>
In one of the tabs i need to create a fileupload systems, which makes use of a form. If i place this form outside of the 'main form' it is not displayed in the tab layout, but seperatly.
<form id=......>
<div id=...>
</div>
<div id=...>
</div>
<div id='fileuploads'>
<form id=......>
</form>
</div>
</form>
Is there any way to make this work?
I tried moving the fileupload as the last subtab and then ending the main form before the last subtab, but this way the form ends inside the tab div. Which is also not valid html.
I'm guessing that document.getelementbyid(div).innerhtml and inserting the form like that would not work aswell.
UPDATE:
Thanks for the given answers, although i dont quite understand how to fully implement them. I came up with an other idea.
If i just create the fileupload input fields, but not surrounded with a form, and then add a button which calls a js function. This functions places the values of the fileuploads in the 'invisible form' outside the div, and sumbits.
Would that be a good solution?
Place your file upload controls in the outer form:
<form id=...>
<!-- other tabs go here -->
<div id="fileuploads">
<!-- your file upload controls and markup go here -->
</div>
<!-- other tabs go here -->
</form>
You can use a trick here.
First leave the original wrapper form inact.
Then if you put a submit button inside the fileupload form, set an onsubmit event and before sending the form create a new form just around the fileuploads tab, and delete the outside form. If you send the form after that with your new form id ($(form_id).submit in Prototype or document.getElementById(form_id).submit in normal javascript) the new form will be send without the outside form elements.
You could use the HTML 5 <input> form attribute
<form id="fileuploads" action="http://yo.ur/target/" method="POST"></form>
<form id="mainform">
<div id="first_tab">
</div>
<div id="second_tab">
</div>
<div id="fileuploads">
<input type="text" name="desc" form="fileuploads">
<input type="file" name="file" form="fileuploads">
<input type="submit" value="Submit" form="fileuploads">
</div>
</form>
The only problem is that you'll have to provide a JS fallback (like Opi suggested) for Internet Explorer, as it does not support this attribute at all.
How to remove all div tags, but not content, which it have? (Working with conteneditable="true", HTML5)
I have a not real textarea - just <div> with contenteditable="true". When I'm pressing 'submit' button, code is reading innerHTML of this element. It's not good.
So, I want to use it as textarea, I need to:
Remove <div> tags without content (when I'm starting new line, browser closing previous <div> (if exist) and starting new <div>.
Remove all other tags, different from <br /> (but if <br> tags more than 2 on a row, delete it).
How to realize it? On server side and on user side (because it sends by xhr).
I have used content editable divs in the past, the best way to use them is indirectly;
rather than having them throw the content at php, have a hidden textarea somewhere, with the submit button in that (the submit not hidden obviously) and then the content editable div elsewhere. You can then use jQuery to grab the content of your div and then use some funky regex to parse it for your <br /> and <div> and </div> tags.
<div contenteditable="true" style="width:200px; height:100px;" id="InputDiv">
...
</div>
<form action="something.php">
<textarea id="InputArea" style="visibility:hidden;">
<input onclick="getData()"type="submit" value="submit" >
</form>
With the corresponding jQuery:
function getData(){
var rawDiv = $("#InputArea").text();
var parsedStr = /*some funky regex*/;
$("#InputArea").text(parsedStr);
}
I seem to have misplaced my previous work with jquery and contenteditable divs, but something along this line should work.
An alternative:
Rather than using content editable divs, why not use markdown? There would be less need to sort out this kind of problem.
get your parent <div>, clone the node, and traverse the cloned Tree: remove the <div> Nodes, which have no content, and the other disallowed tags.
When you finished Traversing, you the can submit what is left of your Dom-Element.
This does the trick:
document.getElementById(/*your_div_to_be_removed*/).removeNode(false);
If i use
<div contentEditable="true" name="content"></div>
instead of Textarea in the form i'm not able to submit the input taken in above editable division.
I'm using editable division because i want to add images at run time in the input editable division.
so is there any way to submit an input taken in editable division??
I'm using PHP as server side language.
Only the values of input elements get submitted with a form.
Use a script on the client to put the contents of the div into a hidden field when the form is submitted.
For example:
<form action="/blah.php" method="post" onsubmit="prepForm()">
<div contentEditable="true" id="editor"></div>
<input type="hidden" name="content" id="content">
</form>
...
<script>
function prepForm() {
document.getElementById('content').value = document.getElementById('editor').innerHTML;
}
</script>
You have to use JavaScript to store the .innerHTML of your div in a hidden field when submitting the form.
I have a structure like :
<form id="first_form">
<fieldset>something</fieldset>
<fieldset>
<iframe><html> ...
<form id="second_form">
<input type="hidden" value="**some_value**" name="hidden_data" />
</form>
</html></iframe>
</fieldset>
</form>
What i need from this structure is to take the value from "hidden_data" in main form, and then to go post in database. I tried to prin_t($_POST); die; (after submitting first form) but i don't receive any input from second_form. Does somebody have an idea? Regards
Note : It's about wordpress plugin tdo mini forms
Note 2 : I want to get an url from an uploaded file (url which i get after i submit second_form) and then add as post meta, using first_form.
You can't just dump HTML inside of an iframe element. Any children of iframe are simply there to be displayed if the browser can't handle iframes.
Also, nested form elements doesn't validate (in HTML 4.01 Strict anyway, and I doubt in any others).
Why are you using an iframe with a form in it? Seems strange. And having HTML inside of that isn't what it is <iframe> tag is used for. Would be best to just have 1 form id="first_form" with the hidden element from the form id="second_form" in it. You can't put a form inside of another form, there can only be one at any given time.