How can I “spread” a form to two areas of a Bootstrap panel? (Browser “fixing” unclosed form tag)

Question

For layout major reasons I want to have two parts of a form in different parts of the page.

At the top I have:

<form  name="formXYZ" method="post" action="client-edit-transmission.php">
    <textarea  class="form-control input-sm" name="content" id="textarea" rows="4" cols="50"><?php echo "$content"?></textarea>
    <input name="userName" type="hidden" value="<?php echo "$userName"; ?>">

etc. This is in the top part of a Bootstrap panel. It is the message that will be sent out at various times

In the panel body I have all the possible times the messages can be sent. Sun - Sat, week of the month 1-5. IE 35 <input type="text fields generated by a php foreach loop pulling down the individual times and ids from a DB. Viz five times:

<tr>
<?php echo ("<td> $localDay  </td>"); // $dayScheduleId
//For each time schedule get time
                foreach ($timeSchedule as $timeItem) { 
echo "<td>";
                    $localTime = $mySchedule->retrieveTime ($timeItem);
                    debug($localTime,"hola");
                    $localTime = $mySchedule->dirtyTime ($localTime);
                  ///////////////////////////////////    NB 5 TIMES A WEEK TIME TAB   ?>
<input name="time_id<?php echo"$timeItem"?>" id="time_id_id<?php echo"$timeItem"?>" class="form-control input-sm" style="width:55px; height:20px; margin:0; padding:2px;  text-align: center;" type="text" value="<?php echo"$localTime"?>">
<?php echo "</td>";
         } 
 echo "</tr>"; 

Originally I had two separate forms but when a user sees the page it is all too tempting to edit the text and then go down the page and edit the times. If you hit the top submit button the message is updated and not the times and the bottom button vice versa. Very unhelpful.

I cleaned everything out and made one big form BUT did not realise that Chrome (and I presume other browsers) inset a </form> tag if you try and push the form past a </div> . I presume they are kindly fixing unclosed tags.

I have tried naming the forms the same but that does not work. The top part of the form is very simple - just a text area whose value is populated by a php echo . My JS is rudimentary and jQuery just about non existent. If there is not a straight HTML way through this is there a SIMPLE JS solution (and/or PHP)?

Grateful for any ideas.

Answer 1

通过简单地传递隐藏字段即可解决此问题。