thara Posted January 12, 2013 Share Posted January 12, 2013 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 More sharing options...
margaux Posted January 12, 2013 Share Posted January 12, 2013 How is it not working? What debugging have you done? Does the sql query return the values you expect? Is this a standalone script or being included by another? Have you started the session? where? 1 Link to comment Share on other sites More sharing options...
thara Posted January 12, 2013 Author Share Posted January 12, 2013 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 More sharing options...
HartleySan Posted January 12, 2013 Share Posted January 12, 2013 Could you please make a drawing/sketch of what you want and post it? Thank you. 1 Link to comment Share on other sites More sharing options...
thara Posted January 12, 2013 Author Share Posted January 12, 2013 this is a screan shot showing actually what I am tring to do is... Each category has its own subjects and those subjects need to display in a table with 2 columns. Link to comment Share on other sites More sharing options...
thara Posted January 12, 2013 Author Share Posted January 12, 2013 Oops.... My image is not displaying wiht my post.. can you please tell me how can I attach an image with this post...? I tried to find an option but fail to find. Link to comment Share on other sites More sharing options...
HartleySan Posted January 12, 2013 Share Posted January 12, 2013 There's an Image button next to the code-marking button, but in order to post an image, you have to first post it somewhere else with a valid URL. I'd use some free image-uploading site, and then link from there. Link to comment Share on other sites More sharing options...
thara Posted January 12, 2013 Author Share Posted January 12, 2013 Thank you HartleySan... this is a link for a image.. http://www.freeimagehosting.net/6sfhz I think you will get an idea actually what I am going to do whit this.. thanks again... Link to comment Share on other sites More sharing options...
HartleySan Posted January 12, 2013 Share Posted January 12, 2013 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 More sharing options...
thara Posted January 13, 2013 Author Share Posted January 13, 2013 Thanks for your sugestion. But can you tell me..How can I get <li> items into 2 columns? Link to comment Share on other sites More sharing options...
HartleySan Posted January 13, 2013 Share Posted January 13, 2013 Float them left and then make the width of the li elements comparable to the total width of the master ul so that only two can fit per row. Link to comment Share on other sites More sharing options...
thara Posted January 13, 2013 Author Share Posted January 13, 2013 ok.. thanks you. also I would like to know is there another way to get the same result using HTML table format like I posted above? Link to comment Share on other sites More sharing options...
HartleySan Posted January 13, 2013 Share Posted January 13, 2013 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 More sharing options...
Recommended Posts