html - jquery dymanic append - Udvikleren.dk - Programmering, webdesign og grafik

Tags: jquery html

Bruger #16838 @ 17.05.12 18:50

Hej jeg er igang med at lave et skema til en konkurrence, hvor man automatisk kan tilføje flere valgmuligeder og flere spørgsmål.

Indtil videre har jeg lavet så man kan tilføje flere valgmuligheder.
Men hvordan skal jeg gøre så kan jeg tilføje et nyt spørgsmål?
- Hvor jeg stadig kan klikke "Tilføj et svar".

HTML kode

 <form action="" method="POST">
     Title på spørgsmål <input VALUE="MIT NAVN" type='text' name='question1[question]'><br>
     Svar muligheder: <div class="button newanswer">Tilføj et svar</div>
     <div id="answers">
         <div class="answer"></div>
         Svar 1 <input class="answer" VALUE="ANDERS" type="text" name="question1[]"> <input type="radio" name="question1[answer]" value="0"><br>
         Svar 2 <input class="answer" VALUE="KEVIN" type="text" name="question1[]"> <input type="radio" name="question1[answer]" value="1"><br>
     </div>
     
     <input type="submit">
 </form>
 <script>
 $(".newanswer").click(function() {
     var n = $(".answer").size();
     $("#answers").next().append('Svar ' + n + ' <input class="answer" VALUE="ANDREAS" type="text" name="question1[]"> <input type="radio" name="question1[answer]" value="' + n + '"><br>');
 });
 </script>

4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #3427 @ 19.05.12 19:36

1.520

du kan lave det noget ala det her:

HTML kode

 <html>
   <head></head>
   <body>
     <div id="qa"></div>
   </body>
 </html>

JScript kode

 function addQuestion(str_q, array_a){
   $con  = $("<div/>");
   $q    = $("<p/>").text(str_q)
                    .append($("<a/>").text("Add new answer")
                                     .attr("href", "#")
                                     .click(function(){ 
                                       $svar = prompt("Your answer is?");
                                       if($svar){
                                         addAnswer($(this).parent().parent(), $svar);
                                       }
                                     })
                           );
   $a    = $("<ul/>");
 
   if(array_a.length > 0){
     $.each(array_a, function(i, q){
       $a.append($("<li/>").text(q));
     });
   }
   
   $con.append($q)
       .append($a);
       
   $("#qa").append($con);
 } 
 
 function addAnswer(obj_q, str_a){
   $(obj_q).find("ul").append($("<li/>").text(str_a));
 }
   
 $(function(){
   $("body").prepend($("<a/>").attr("href", "#")
                              .text("Add new question")
                              .click(function(){ 
                                $svar = prompt("What is your question?");
                                if($svar){
                                   addQuestion($svar, new Array()); 
                                }
                              })
                    );
   
   addQuestion("hvad er 2 + 2 ?", new Array("1", "2", "3", "4", "5"));
 });