Adding select box ,text box and date multiple times dynamically on button click and inserting those values into database

Question

I would like to know how do I display my "adddiv" multiple times and insert these values to database when clicking on "Add " button.

 <div id="adddiv" style=""> 
       <table cellpadding="2" style="width:5`enter code here`5%;" bgcolor=""  
cellspacing="4" align="left">

    <tbody align="left">               

            <tr>
<td  ><h4>Select1</h4></td>
            <td>
               <select name=sel1  id="sel" style="width:285px;">
                    <?php
                                 mysql_set_charset("utf8"); 
                                  $selauf="SELECT * FROM `table1`";
                                  $resauf=  mysql_query($selauf);
                                    echo"<option value=0></option >";       
                                  while ($rowauf= mysql_fetch_array($resauf))
                                    {
                                       $auf_val=$rowauf['aufvalue'];

                                      $auf_arr[]=$auf_val;

                                    }

                             $arrlengthauf=count($auf_arr);
                                         for ($i=0;$i<$arrlengthauf;$i++)
                                         { 

                                              echo"<option >".$auf_arr[$i]."</option >";
                                           }


                                 ?> 
                </select>

            </td>

        </tr>

   <tr  >
        <td allign="left"><h4>date1</h4></td>
    <td > 

               <input type="text" name="datum1">
                <a href="javascript:void();" onClick="setYears(1947, 2020);showCalender(this, 'datum1');">
                        <img src="images/calender.png"></a>




            </td>
</tr>


 <tr  >
<td   > <h4>Select2</h4></td>
<td>
        <select name=sel2  id="sel2" style="width:295px;" >

                     <option value=" "> </option>       
                    <option value="Ja">Ja</option>
                     <option value="Nein">Nein</option>
                     <option value="Unbekannt">Unbekannt</option>

                   </select>

      </td>
        </tr>
        <tr  >
<td   > <h4>Select3</h4></td>
<td>
         <select name=sel3  id="sel3" style="width:295px;" >

                     <option value=" "> </option>       
                    <option value="Ja">Ja</option>
                     <option value="Nein">Nein</option>
                     <option value="Unbekannt">Unbekannt</option>

                   </select>

      </td>
        </tr>
        <tr >
    <td  ><h4>Date2</h4></td>
            <td>
                <input type="text" name="dat2">
                <a href="javascript:void();" onClick="setYears(1947, 2020);showCalender(this, 'dat2');">
                        <img src="images/calender.png"></a>      
            </td>
         </tr>







            </tbody>
    </table>

    <div id="result">

    </div>  


            <input type="button" name="addvalue" value="ADD"  >
               </div>

Realitätsverlust · Answer 1 · 2013-12-09T09:38:55.143

I needed that too once, i used append, e.g:

HTML:

<div class="button success radius small" id="addL" onclick="addL('#license_div');">Create New Div</div>

JS:

function addP(divName) {
    i++;
    $(divName).append('<div class="row_' + i + '"></div>');
    $("#menge_lcobj").val(i);
}

So you create with every click on the button a new div with the class row_ the number which is currently saved in i, e.g. row_1, row_2 ...

To save all the values, i added a hidden field and used it as a counter for a for-loop:

for($i = 1; $i < ($contractdata['menge_lcobj']); $i++){
     $sql = 'INSERT INTO table (row) VALUES (' .
     $db->qstr(filter_var($_POST['row_'.($i)]));
     $db->Execute($sql);
}

Im not sure if it works exactly like you want, you might have to adjust it. But it should be able to lead you into the right direction. Examples might contain syntax errors.

score 0 · Answer 2 · answered Dec 09 '13 at 09:36

0

I guess what you need is DOM (Document Object Model) trick

if you want to let the user be able to add this Data Dynamically to the web browser you need to append this data into table as soon as a user click at Add button

For Instance:

<html>
<input type="button" id="addbutton" value="Add Row" />
</hml>


 $(document).ready(function () {

                $('#addbutton').click(function () {

                    $('#tableId').append(<tr> Your code </tr>);
                });
            });

about adding value I guess you can do it asynchronously throw ajax by adding a button that will connect to another page where you sql query will be executed

answered Dec 09 '13 at 09:36

Yehia Awad

2,898
1
20
31

Hello,Thanks a lot.Can you please tell me how can append db values in to select box.I was trying this but not able to append to select box. – user3080971 Dec 09 '13 at 09:40
I guess you will need something more like that http://webcache.googleusercontent.com/search?q=cache:http://stackoverflow.com/questions/15530649/copy-options-of-a-select-and-insert-into-another-select-jquery – Yehia Awad Dec 09 '13 at 09:53
or even like that http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery – Yehia Awad Dec 09 '13 at 09:55
if you have any other question buddy don't hesitate to ask me – Yehia Awad Dec 09 '13 at 10:31

Adding select box ,text box and date multiple times dynamically on button click and inserting those values into database

2 Answers2