Categories > TinyButStrong general >

How to display form with fixed # of rows and select from drop-down boxes

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
By: RobN
Date: 2008-02-28
Time: 12:20

How to display form with fixed # of rows and select from drop-down boxes

Hello,

I am kind of lost as I think the solution to my problem is easy but I cannot figure it out. Please help with the following.

I have a form in which it is possible to input information on 5 rows that are the same, i.e.
row1, number of items, kind of item from dropdown list
row2, number of items, kind of item from dropdown list with same info as 1
row3, number of items, kind of item from dropdown list with same info as 1
etc. for 5 rows.
The dropdown list functions properly on one row.
Normally you display a number of rows coming from the database but now this number is fixed to 5. When I make 5 rows in my HTML code only 1 row is displayed as a result. Is this the way to go or should I make 1 row on the HTML-side and let it fill 5 times. If the last: How do I do that.

Any suggestions are greatly appreciated.
Thanks,
Rob
By: ege
Date: 2008-02-28
Time: 12:54

Re: How to display form with fixed # of rows and select from drop-down boxes

If combos have the fixed data as well, I would just hardcode them in the template file. That is, I would just copy/paste the each line, changing the names of inputs or use name='kindOfItem[]' kind of naming.

If this is now what you want, you can easily use an array like $rows=array(1,2,3,4,5); $tbs->MergeBlock('rows',$rows); but for 5 fixed lines I wouldn't consider this solution would be the way to go.
By: RobN
Date: 2008-02-28
Time: 13:27

Re: How to display form with fixed # of rows and select from drop-down boxes

Hi Ege,

Thanks. The first solution I tried but only 1 row is showing as a result.
In the meantime I stripped my files to the bare minimum. This is used to make the form (now with 3 rows to shorten it a bit).

The PHP-side
<?php
include_once('tbs_class.php') ;
include_once('tbs_plugin_html.php'); // Plug-in for selecting HTML items.
include_once('db.php');

$db_id = mysql_connect($db_srv,$db_usr,$db_pwd) ;
$db_ok = mysql_select_db($db_dbase,$db_id) ;

$TBS = new clsTinyButStrong ;
$TBS->LoadTemplate('test_form.htm') ;
$TBS->MergeBlock("emballage",$db_id,"SELECT * FROM soort_emballage ORDER BY emb_volgnummer") ;
$TBS->MergeBlock("pallet",$db_id,"SELECT * FROM soort_pallet") ;

$TBS->Show() ;
?>
The HTML-side
<form name="opdrachtformulier" id="opdrachtformulier" action="opdracht_add.php" method="post" >
  <land>
    <p>
    <table width="319" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td width="315"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td colspan="4" ><table border="0" cellpadding="1" cellspacing="0" width="100%">
                  <tbody>
                    <tr>
                      <td width="9%"  class="td_header"><div align="center">&nbsp;Aantal</div></td>
                      <td width="16%"  class="td_header"><div align="center">&nbsp;Soort
                          Colli</div></td>
                      <td width="75%"  class="td_header">&nbsp;&nbsp;
                        <div align="center">Soort</div></td>
                    </tr>
                    <tr>
                      <td ><div align="center">
                          <input name="colli_aantal_1" type="text" size="3" maxlength="3" />
                        </div></td>
                      <td ><div align="center">
                          <select name="emballage_1" class="normal" id="emballage_1" style="width:100px">
                            <option value="[emballage.emb_index]">[emballage.emb_omschrijving;block=option]</option>
                            <option>[emballage.emb_index;ope=html;select]</option>
                          </select>
                        </div></td>
                      <td ><div align="center">
                          <select name="pallet_1" class="normal" id="pallet_1" style="width:100px">
                            <option value="[pallet.plt_index]">[pallet.plt_omschrijving;block=option]</option>
                            <option>[pallet.plt_index;ope=html;select]</option>
                          </select>
                        </div></td>
                    </tr>
                    <tr>
                      <td ><div align="center">
                          <input name="colli_aantal_2" type="text" size="3" maxlength="3" />
                        </div></td>
                      <td ><div align="center">
                          <select name="emballage" class="normal" id="emballage_2" style="width:100px">
                            <option value="[emballage.emb_index]">[emballage.emb_omschrijving;block=option]</option>
                            <option>[emballage.emb_index;ope=html;select]</option>
                          </select>
                        </div></td>
                      <td ><div align="center">
                          <select name="pallet_2" class="normal" id="pallet_2" style="width:100px">
                            <option value="[pallet.plt_index]">[pallet.plt_omschrijving;block=option]</option>
                            <option>[pallet.plt_index;ope=html;select]</option>
                          </select>
                        </div></td>
                    </tr>
                    <tr>
                      <td><div align="center">
                          <input name="colli_aantal_3" type="text" size="3" maxlength="3" />
                        </div></td>
                      <td><div align="center">
                          <select name="emballage_3" class="normal" id="emballage_3" style="width:100px">
                            <option value="[emballage.emb_index]">[emballage.emb_omschrijving;block=option]</option>
                            <option>[emballage.emb_index;ope=html;select]</option>
                          </select>
                        </div></td>
                      <td ><div align="center">
                          <select name="pallet_3" class="normal" id="pallet_3" style="width:100px">
                            <option value="[pallet.plt_index]">[pallet.plt_omschrijving;block=option]</option>
                            <option>[pallet.plt_index;ope=html;select]</option>
                          </select>
                        </div></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr>
              <td colspan="4" ><table border="0" cellpadding="0" cellspacing="0" width="100%">
                </table></td>
            </tr>
            <tr>
              <td colspan="4" ><table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tbody>
                    <tr>
                      <td colspan="2"  class="kopjes">&nbsp;OPSLAAN:</td>
                      <td width="66%" align="left" ><!--                    <input type="submit" name="Submit" value="Opslaan" tabindex=90 >-->
                        <input type="submit" name="btnAction" id="btnAction" value=" Toevoegen ">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <input value="Wissen" onClick="reset()" class="button" tabindex="90" type="button"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </table></td>
      </tr>
    </table>
  </land>
</form>

Thanks again for looking into it,
Rob
By: ege
Date: 2008-02-28
Time: 15:12

Re: How to display form with fixed # of rows and select from drop-down boxes

hi there,
I have copied the html and simulated what you needed to do.

This is how your template's tbody part should look like.
Note: (I had to add ;noerr after ope=html;select; since I don't know how to use that plugin).
<tbody>
                    <tr>
                      <td width="9%"  class="td_header"><div align="center">&nbsp;Aantal</div></td>
                      <td width="16%"  class="td_header"><div align="center">&nbsp;Soort
                          Colli</div></td>
                      <td width="75%"  class="td_header">&nbsp;&nbsp;
                        <div align="center">Soort</div></td>
                    </tr>
                    <tr>
                      <td ><div align="center">
                          <input name="colli_aantal_[rows.#;block=tr]" type="text" size="3" maxlength="3" />
                        </div></td>
                      <td ><div align="center">
                          <select name="emballage_[rows.#]" class="normal" id="emballage_[rows.#]" style="width:100px">
                            <option value="[emballage.emb_index]">[emballage.emb_omschrijving;block=option]</option>
                            <option>[emballage.emb_index;ope=html;select;noerr]</option>
                          </select>
                        </div></td>
                      <td ><div align="center">
                          <select name="pallet_[rows.#]" class="normal" id="pallet_[rows.#]" style="width:100px">
                            <option value="[pallet.plt_index]">[pallet.plt_omschrijving;block=option]</option>
                            <option>[pallet.plt_index;ope=html;select;noerr]</option>
                          </select>
                        </div></td>
                    </tr>
                  </tbody>

This is how my php side looks like. I had to use arrays and for loops to create fake data since I didn't have your database. I hope you can figure how to do it yourself on your project.

<?php
include_once('tbs_class.php') ;
$TBS = new clsTinyButStrong();

$TBS->LoadTemplate('test_form.htm') ;

$rows=array(1,2,3,4,5);
$em=array();
$pa=array();

for($q=1; $q<20; $q++)
{
  $em[]=array('emb_index'=>10+$q,'emb_omschrijving'=>'emb : '.($q+10));
  $pa[]=array('plt_index'=>50+$q,'plt_omschrijving'=>'plt :'.($q+50));
}

$TBS->MergeBlock("emballage",$em) ;
$TBS->MergeBlock("pallet",$pa) ;
$TBS->MergeBlock("rows",$rows) ;

$TBS->Show() ;

The tricky part is that you have to merge $rows at the very end. That way, you can repeat the already prepared forms.

Hope that helped.

ps. what the heck is that land tag you used within table? It might break in some browsers as I'm pretty sure that there is no such tag in html.

ege
By: RobN
Date: 2008-02-28
Time: 15:25

Re: How to display form with fixed # of rows and select from drop-down boxes

Woooww! That is fast. Thanks very much, I will check it out with the database.
This is part of a form that I use on an Intranet with IE. That works fine with <land> (which means country in Dutch).

Thanks again,
Rob
By: RobN
Date: 2008-03-02
Time: 11:28

Re: How to display form with fixed # of rows and select from drop-down boxes

Hi Ege,

Sorry, but I still get only 1 row and not the 5 that are supposed to be shown. Any suggestions?

Thanks,
Rob
By: RobN
Date: 2008-03-04
Time: 17:20

Re: How to display form with fixed # of rows and select from drop-down boxes

My fault: typo.
Thanks for your help,
Rob