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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...