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.
Related
I have a page ( index.html ) with a form. On submit the data is posted to a php-file which then stores said data in a (temporary) xml-file, however, I also have a number of iframes which also contain forms.
At first, I was planning on simply posting the input-data from the iframes to a seperate php file but I encountered several problems:
-I have several iframes, but I don't have a fixed amount since the user is supposed to be able to delete/ add iframes. Therefore I can't just tell iframe 1 to send its data to php-file no. 1, iframe 2 to send its data to php-file no.2 etc.., I need a flexible solution.
-I tried to submit all iframe inputs to ONE php file and was hoping it'd work since the xml-file this php-file sends the data to is only updated and not completely overwritten. As you might guess, this did not work.
-Another problem I encountered is that the user may go back and edit whatever he entered into the iframe. The data should only be saved once he clicks on the save button in the html-file to prevent that.
I also tried submitting the data via JavaScript, as people in similar questions suggested, but that did not work out for me. So I guess what I would like, is a suggestion as to how I should go about this. How can I send all the data once the "main" save button is clicked, it doesn't matter if the data goes to several php files. The solution shouldn't depend on a fixed amount of elements as that amount is not always the same.
Here's the iframe-html:
<form method="POST" action="php/iframe.php">
<label>Your thoughts:</label>
<input type="text" name="header">
<label>Suggestions:</label>
<textarea type="text" name="textbox"></textarea>
<input type="button" value="submit">
</form>
(It's basically the same for all Iframes).
Please let me know if you need any additional information.
Edit: I read that submitting forms at the same time may cause interference, I know that much
Edit:
Relevant index.html:
<form method="post" action="main.php">
<div id="firstSection"
<label>First input</label>
<input type="text" name="input[]">
<button type="button" onclick="openIframe1()">Read more</button>
</div>
<div id="secondSection"
<label>Second input</label>
<input type="text" name="input[]">
<button type="button" onclick="openIframe2()">Read more</button>
</div>
<button type="submit" value="submit"></button>
</form>
<div class="iframe">
<button type="button" class="close">Close</button>
<iframe src="iframe1.html"></iframe>
</div>
<div class="iframe">
<button type="button" class="close">Close</button>
<iframe src="iframe2.html"></iframe>
</div>
Define an array of your iframe inputs in the main page as hidden element, on click submit in the main page loop through the iframe by getting the datas and append to your hidden element from where you can now post that to your back end.. try this: Access jQuery data from iframe element
I have a page that has multiple php forms that send me different informations depending on the user and the form. How do I make php differentiat these? I saw something about the actions and I thought maybe it was like having a separate file, but when I created a "questions.php" and copied and pasted my php code into that and then added "action="questions.php"" to the tag, and ran it just as I had before it didn't work. So what is the correct way to do this?
My code is extremely long and filled with words which is why it would be nice to have separate files for it depending on the form instead of all in the top of my main page.
You could build one page as a standard page. in this page you could include the different forms. See the example below:
<!-- These are just example names -->
<div class="form-1">
<?php include "forms/form-1.php"; ?>
</div>
<div class="form-2">
<?php include "forms/form-2.php"; ?>
</div>
<div class="form-1">
<?php include "forms/form-3.php"; ?>
</div>
If you would like to save data that a user puts in a form in lets say a database you should use the <form method="post"> by adding an action to it. You're asking the form to send the user to another page when the submit button is clicked. an example of a form down below.
<form class="form-1" method="post" action="second_page.php">
<label>Name:
<input type="text" class="input" name="name">
</label>
<label>Email:
<input type="email" class="input" name="email">
</label>
<button type="submit">Send!</button>
</form>
Hope this helps!
I just added a / before the questions.php. apparently it had to do with file path? I don't understand it but it works now.
<form action="questions.php" method="post">
<!-- text boxes to get user inputs-->
<button type="submit" value="submit_btn">click here to go to page in action tag
</button>
</form>
If questions.php file is in same folder action="questions.php" is enough. If its inside 'x' folder, correct path should be given as action="x/questions.php"
I am trying to pass a variable (maybe the name of the div), to create an dynamic page without using javascript.
I try to avoid javascript as much as possible, as you could imagine from the first sentence.
My script looks kinda like this:
<?php $topbar = $_GET['topbar']; ?>
<form action="" method="get">
<div id="navigationTopContent" name="start" onclick="window.location=''">
1. entry
</div>
<div id="navigationTopContent" name="group" onclick="window.location=''">
2. entry
</div>
</form>
but it is absolutely not working.
you are already using form to post/get values, just use input type hidden if you want to sent data anonymously.
<input type="hidden" name="abc" value="data">
when using form you must use submit button to post data.
or you can use anchor tag to post data as :
echo 'Entry';
If you are trying to pass a post / get variable, apprently you have to use buttons and correct the css so that the button is looking like your div was. You them the same name and different values. It looks kinds like this:
<form action="" method="get">
<div id="navigationTop" class="text">
<button class="navigationTopContent" name="topnav" value="start">Start</button>
<button class="navigationTopContent" name="topnav" value="group">Groups</button>
</div>
</form>
<?php $topnav = $_GET['topnav']; echo $topnav; ?>
this is not perfect, since the buttons is, due to some magic always a bit darker, but ok.
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.
I have a php page with a form on it for adding people to a small group.
For each person being added, there is a with multiple form elements, each named according to the person's number. For example:
<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>
For each person in the database, the php page populates a form sections.
To add additional people, the user can click on a "+" icon, at which time the page uses jQuery to dynamically populate a new . To do this I am simply appending the new div html to the existing form. This means that the javascript page contains all the same html markup (to be appended), as the php page.
This seems like an unnecessary duplication of code. Whenever I change something in the php page, I also have to change it in the javascript code.
Is there any general method for avoiding such code duplication? The only thing I can think of is to use jQuery to grab the html from an already existing div. But in this case, the values of the form fields for user n will appear in the new code for user n+1.
Thanks.
Capisci :)?
<div class="user" id="user_1">
<input type="hidden" name="uid[0]" value="1"/>
<input type="text" name="lastname[0]" value="user480029"/>
...
</div>
<div class="user" id="user_2">
<input type="hidden" name="uid[1]" value="2"/>
<input type="text" name="lastname[1]" value="arto"/>
...
</div>
Now when adding another field just...
<div class="user" id="user_3943094103945">
<input type="hidden" name="uid[]" value=""/>
<input type="text" name="lastname[]" value=""/>
...
</div>
Then you iterate trough $_POST[] a do what you want.
You have user ID on .user, so I you delete user you can remove that part of HTML (this is more for UX), more importantly, you don't have hundreds of variables but just a few array which you can iterate in one loop. Hope you get the point. Cheers.
The php code should give the javascript a "prototype", which could be modified using javascript. That way, even if there aren't any users, the javascript would still work. This example is obviously missing lots of code (like forms), but it should give you an idea. I haven't tested it because I assume you have to make lots of modification anyways.
<script type="application/x-javascript">
addEventListener("load",function(){
document.getElementById("add-user").addEventListener("click",function(){
var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
document.getElementById("user-list").appendChild(node);
node.id="users_"+(n+1);
for(var i=0;i<list.length;++i)
list[i].name&&(list[i].name+="["+n+"]");
},false);
},false);
</script>
</head>
<body>
<div id="prototype-container">
<? /* print out a div without any information in it */ ?>
</div>
<div id="user-list">
<? /* print out divs with some infomation in them */ ?>
</div>
<button id="add-user">add a user</button>