Jump to content
Larry Ullman's Book Forums

How I Create This Dynamically Generated Form.


Recommended Posts

I am going to create a HTML form dynamically with php. Using that form users can select subjects under different category. A category and Its subjects have broken to one logical section and have applied jquery accordion. In my form I need to create more logical section like that.

 

this is the HTML structure of the form..(which need to create dynamically with php)

 

<form action="" method="post">
<div id="accordion">
<!-- logical section 1 -->
<div>
<h3>Category 01: <span>category name</span><span></span></h3>
<div class="container">
<table>
<tr>
 <td width="50%">
<input type="checkbox" value="1" name="subject[]">subject1
 </td>
 <td width="50%">
<input type="checkbox" value="2" name="subject[]">subject2
 </td>
</tr>		
</table>											
</div>
</div>

<!-- logical section 2 -->
<div>
<h3>Category 02: <span>category name</span><span></span></h3>
<div class="container">
<table>
<tr>
 <td width="50%">
<input type="checkbox" value="1" name="subject[]">subject1
 </td>
 <td width="50%">
<input type="checkbox" value="2" name="subject[]">subject2
 </td>
</tr>		
</table>											
</div>
</div>
</div>										
</form>

 

 

 

Can anybody tell my where I am going wrong? I troubled how to create inner table with 2 columns.

Link to comment
Share on other sites

thanks for reply.. SQL return the values properly...there are category_id, category_name, subject_id, subject_name. I have started the session properly in my configuration file and have included to this page. I am trying to display above return data into a list something like this..

 

Catagory 01
  subjects1   subjects4
  subjects2   subjects5
  subjects3   subjects6

Catagory 02
  subjects1   subjects4
  subjects2   subjects5
  subjects3   subjects6

Catagory 03
  subjects1   subjects4
  subjects2   subjects5
  subjects3   subjects6

 

I tried to do it like this. Its working as 50%. But I need to display subjects under each categories in a table with 2 columns.

 

    $catID = false;


   while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {

       echo '<div>';

       if ( $catID != $row['ci']) {

           echo '<h3>Category 01: <span>' . $row['cn'] . '</span><span></span></h3>';
       }

       echo '<div class="container">';

           echo '<p>' . $row['sn']. '</p>'; // This subjects I need to display in a table with 2 columns..

       $catID = $row['ci'];

           echo '</div>';

       echo '</div>';
   }

 

The problem I face is, when I am tring to add the subjects into a table..

 

This is my HTML design..

 

<div>
 <h3>Category 01: <span>Information Technology</span><span></span></h3>
 <div class="container">

   <table>
     <tr>
       <td width="50%">
           <input type="checkbox" value="1" name="category[]">Subject1
       </td>
       <td width="50%">
           <input type="checkbox" value="2" name="category[]">Subject4
       </td>
     </tr>                                    
     <tr>
       <td width="50%">
           <input type="checkbox" value="1" name="category[]">Subject2
       </td>
       <td width="50%">
           <input type="checkbox" value="2" name="category[]">Subject5
       </td>
     </tr>                                    
     <tr>
       <td width="50%">
           <input type="checkbox" value="1" name="category[]">Subject3
       </td>
       <td width="50%">
           <input type="checkbox" value="2" name="category[]">Subject6
       </td>
     </tr>                                                        
   </table>                        
 </div>
</div>

Link to comment
Share on other sites

Okay, that makes sense. Thanks for sharing that.

Instead of using a table though, it's a lot more semantic and logical to use an unordered list with list items. This will be a lot easier to style the way you want with CSS as well. The basic HTML would be the following:

 

<ul>

 <li>Category 01

   <ul>

     <li>Pre school</li>

     <li>Grade 1-4</li>

     <li>Grade 5</li>

     ...

   </ul>

 </li>

 <li>Category 02</li>

 <li>Category 03</li>

 <li>Category 04</li>

</ul>

 

Obviously, you could expand the other categories accordingly. You could then remove the list styles, float the elements and hide the sub-ul elements in order to get what you want.

Does that help at all?

Link to comment
Share on other sites

It's possible, but far trickier and more likely to have cross-browser issues.

My advice: Do it the semantically correct way, even if it takes a bit longer to learn how.

 

If done correctly, I think the ul/li way is actually much simpler and quicker than the table method.

Link to comment
Share on other sites

 Share

×
×
  • Create New...