Javascript jQuery textbox creation and output -


currently, have 2 table rows 2 textboxes. want buid button allows user add , subtract author row depending on how many want. once increase amount of authors need input, user clicks on generate button, input textboxes outputed @ bottom of page. trying pull off javascript , jquery. ten day old student javascript , jquery , feel if have bit off more can chew.

an example of want can found @ lnk: http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/. however, need input textboxes outputed on same page.

<!doctype html> <head> </head> <body> <table>     <tbody>         <tr>             <td>author</td>             <td><input type="text" id="1" class="normalinput"            placeholder="last"></td>             <td><input type="text" id="2" class="normalinput" placeholder="first"></td>         </tr>         <tr>             <td>second author (if any)</td>             <td><input type="text" id="3" class="normalinput"      placeholder="last"></td>             <td><input type="text" id="4" class="normalinput" placeholder="first"></td>         </tr> </tbody> </table> <br> <br> <output id="20"></output> <br> <br>  </body>  </html>  <script type=text/javascript> function myfunction() { var firstlast=document.getelementbyid("1").value; if (firstlast==null || firstlast=="")   {   firstlast;   } else if(firstlast!=null || firstlast!="")   {   firstlast=document.getelementbyid("1").value + ", ";   }  var firstfirst=document.getelementbyid("2").value; if (firstfirst==null || firstfirst=="")   {   firstfirst;   } else if(firstfirst!=null || firstfirst!="")   {   firstfirst=document.getelementbyid("2").value + ". ";    }  var secondlast=document.getelementbyid("3").value; if (secondlast==null || secondlast=="")   {   secondlast;   } else if(secondlast!=null || secondlast!="")   {   secondlast=document.getelementbyid("3").value + ", ";   }  document.getelementbyid("20").innerhtml = firstlast + firstfirst + secondlast;  } </script>  

the jquery

//wait document ready $(document).ready(function() {     // when generate authors clicked     $("#generate-authors").click(function()     {         // first author row in table         var author = $(".author-row:first");          // amount of authors put text box         // insert copy of row after last row         for(i = 0; < parseint($("#author-amount").val()); i++)             $(".author-row:last").after(author.clone());     });      // when output data clicked     $("#output-data").click(function()     {         // go through author rows         $(".author-row").filter(function()         {             // add them output element             $("#output").append("<p>" + $(this).find("[placeholder=\"last\"]").val() + ", " + $(this).find("[placeholder=\"first\"]").val() + ".</p>");         });     }); }); 

the html

<!doctype html> <html>     <head>         <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>         <script type="text/javascript">             // put script here         </script>     </head>     <body>         <input id="author-amount" type="text" />         <input id="generate-authors" type="button" value="generate" />         <br />         <input id="output-data" type="button" value="output data" />         <table>             <tbody>                 <tr class="author-row">                     <td>author</td>                     <td><input type="text" id="1" class="normalinput" placeholder="last"></td>                     <td><input type="text" id="2" class="normalinput" placeholder="first"></td>                 </tr>             </tbody>         </table>         <br />         <output id="output"></output>     </body> </html> 

Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -