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
Post a Comment