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

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>

Answers


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


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.


Need Your Help

dynamic proxy soap web service client in java?

java web-services soap

Is there any way to use soap-rpc web services such that the client is generated via a shared interface? Restful web services do it this way, but what about soap based? Do you always have to use a t...

Import Data from .CSV TO SQL using FileUpload?

c# asp.net sql

I have an .CSV file which contain reviews and I am to programatically transfer the contents over into SQL Database from an FileUpload control. The problem I have is that my control are working but ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.