How can I put my form inside another form and use one submit button?

Question

  <form action="<?php $self ?>" method="post"> 
            <h2>LundaBlogg</h2>
            <div class="fname"><label for="name"><p>Namn:</p></label><input name="name" type="text" cols="20" onkeyup="EnforceMaximumLength(this,12)"/></div>
            <div class="femail"><label for="email"><p>Epost:</p></label><input name="email" type="text" cols="20"/></div>
            <div class="where"><label for="lund"><p>Skriv ditt blogg ämne:</p></label><input name="lund" type="text" cols="20" onkeyup="EnforceMaximumLength(this,40)"/></div>
            <p>Starta tråden med att posta något:</p><textarea name="post" rows="5" cols="40" onkeyup="EnforceMaximumLength(this,110)"></textarea>
            </br>
                <!-- <form action="uploadImage/upload_file.php" method="post" enctype="multipart/form-data"> -->  
                <label for="file">Ladda upp en bild med ditt inlägg:</label>
                <input type="file" name="file" id="file" />
                <!-- <input type="submit" name="submit" value="Submit"/> -->
                <!-- </form> --> 
            </select><br/>
                <p>Välj kategori som du vill lägga din post i:</p>
                <!-- Skapar en dropdown meny med tre värden/value. --> 
                <select name="LundaBlogg" size="1"> <!--  Namnet på dropdown menyn + size = hur många rader som ska visas. -->
                <option value="Lund">Lund</option>
                <option value="Cyklar">Cyklar</option>
                <option value="Kultur">Kultur</option>
            </select>
            <input name="send" type="hidden"/>
            <p><input type="submit" value="skicka"/></p> 
        </form>

I want to be able to use one submit button input type="submit" value="skicka" and I want to have my (code)

form action="uploadImage/upload_file.php" method="post" enctype="multipart/form-data" 
label for="file"Ladda upp en bild med ditt inlägg:/label 
input type="file" name="file" id="file"

form

inside my other form like the example above.

See the discussion here: http://stackoverflow.com/questions/597596/how-do-you-overcome-the-html-form-nesting-limitation — vladko, Oct 14 '12 at 16:29
Toni , Let me explain myself , Instead of using 2 nested forms , why not using one form and one submit button? — Ofir Baruch, Oct 14 '12 at 16:43
Because thats the point of using one form is that im sending all my data include my images when Im using one submit button ... — Toni, Oct 14 '12 at 17:36

score 2 · Accepted Answer · answered Oct 14 '12 at 16:23

2

You cannot. Forms cannot be nested in HTML documents.

You need to either submit all the data to a single URI (this is the simplest option), or:

have the first form submit to one URI
return an HTML document containing a new form from that URI
have the user submit the second form manually after entering data into it

or, use JavaScript (with the XMLHttpRequest object) to submit your form data (this is the last reliable option).

answered Oct 14 '12 at 16:23

Quentin

914,110
126
1,211
1,335

$Quentin Can you maybe give me one example on how to use URI the simplest way? – Toni Oct 14 '12 at 16:41
`
– Quentin Oct 14 '12 at 16:42
Can you explain what to do with your code. Should the code be inside my another form, or? – Toni Oct 14 '12 at 17:37
No. You have one form. You put all the fields in that form. You submit it to a URL. You have your server side script process *all* the fields at that URL. – Quentin Oct 14 '12 at 17:50
Ok, I did what you wrote, and now Its working. Many thanks Quentin. – Toni Oct 14 '12 at 18:23

How can I put my form inside another form and use one submit button?

1 Answers1