CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Java Man
Java Man

Reputation: 1860

How to append div in existing div?

Hello I am creating website using php.In that i have one form which is for add appointment. in that page user can fillup date, start Time and End time of appointment. but if user want to add extra date and time he/she can also add. for that i have write following code.

   <div id="date">
   <table>
   <tr>
   <td>
   Date<br>
   <input type="text" id="dateid">
   </td>
   <td>startTime:<select><option value="00:00">00:00</option></select></td>
   <td>EndTime:<select><option value="00:00">00:00</option></select></td>
   <td><input type="button" value="Extra Time" onClick="addTime()"></td>
   </tr>
   </table>
    </div>

for onlick event i have create on function.

   <script>
   function addTime() 
{
var timeDiv='<div id="extraTimeDiv"><table><tr><td>Date<br><input type="text" id="extradate"></td><td >Start Time</td><td><select id="addstart" name="addstart"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option> EndTime:</td><td ><select id="addend" name="addend"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option></select></td><td></td></tr></table></div>'

   var div = document.getElementById('date');
div.innerHTML = div.innerHTML + timeDiv;

  }
</scritp>

this works fine but when when i click on more then previous selected data erased. data should be as it is when i press more to add extra time. kidnly help me how to solve this problem? Thank you in advance.

Upvotes: 0

Views: 22284

Answers (4)

Nibin
Nibin

Reputation: 3960

Try changing

div.innerHTML = div.innerHTML + timeDiv;

to

$('#date').append(timeDiv);

for more detail checkout the following link

http://api.jquery.com/append/

Upvotes: 0

epascarello
epascarello

Reputation: 207501

The problem here is innerHTML does not remember values. You should not be using innerHTML to add new content if you need to maintain state. You need to use appendChild.

function addTime() {    
    var timeDiv='<table><tr><td>Date</td></tr></table>';
    var div = document.createElement("div");
    div.innerHTML = timeDiv;
    document.getElementById('date').appendChild(div);
}

Now since you labeled it jQuery it is as simple as

function addTime() {    
    var timeDiv='<div><table><tr><td>Date</td></tr></table></div>';
    $("#date").append(timeDiv);
}

Now if you keep calling addTime you will be adding multiple elements with the same id. You might want to either drop the ids or add a counter to the ids.

Upvotes: 2

Sunil Verma
Sunil Verma

Reputation: 2500

you can use clone method for ex : this example is for a tr to append on table whose id is vtable.

$(document).ready(function () {
    $("#more").click(function() {
      $(".vtable tr:last").clone().find("input, select").each(function(){}).end().appendTo(".vtable");
    });
});

where more is the id of button clicked to create div. Please note this is for demonstration purpose

also as per your question your previous data is erasing bcoz you are using + to insert html in your code rather than this you need to use append or clone method so it will always append the data at the end, also you can pass different ids to each html appended.

Upvotes: 1

Chris Charles
Chris Charles

Reputation: 4446

jQuery is a good way to do this:

<script>
  var timeDiv='<div id="extraTimeDiv"><table><tr><td>Date<br><input type="text" id="extradate"></td><td >Start Time</td><td><select id="addstart" name="addstart"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option> EndTime:</td><td ><select id="addend" name="addend"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option></select></td><td></td></tr></table></div>'

  var div = $('div#date');
  div.append(timeDiv);

}

Upvotes: 0

Related Questions