{"id":1586,"date":"2008-06-23T00:01:51","date_gmt":"2008-06-23T05:01:51","guid":{"rendered":"http:\/\/teamtutorials.com\/?p=1586"},"modified":"2008-10-26T14:46:42","modified_gmt":"2008-10-26T18:46:42","slug":"dynamically-add-textbox-to-site","status":"publish","type":"post","link":"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site","title":{"rendered":"Dynamically Add Textbox to Site"},"content":{"rendered":"<div style=\"float: right;\">\n <script type=\"text\/javascript\"> \n <!-- \n microsoft_adunitid=\"2178\"; \n microsoft_adunit_width=\"180\"; \n microsoft_adunit_height=\"150\";  \n microsoft_adunit_legacy=\"false\";\/\/--> \n <\/script><br \/>\n <script type=\"text\/javascript\" src=\"http:\/\/adsyndication.msn.com\/delivery\/getads.js\" ><\/script>\n<\/div>\n<p>This tutorial will show you how to program a button that will add textboxes to your site without having to reload the page that you are one. To do this we will be using JavaScript. The code to do this is actually simple, and I will explain every little detail of it so you can understand how it works. Let\u2019s get started on the code. <\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Add Items To Invoice&lt;\/title&gt;\r\n<\/pre>\n<p>We start with our basic HTML tags to start a website.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script language=&quot;javascript&quot;&gt;\r\nrow_no=0;\r\n<\/pre>\n<p>Next, we declare that we are going to start a script and tell the browser what type and then we set a variable for us to use so we know how many boxes have been added by the user. <\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nfunction addRow(tbl,row){\r\nrow_no++;\r\nif (row_no&lt;=20){\r\n&amp;#91;\/sourcecode&amp;#93;\r\n\r\nNext we declare our function. A function is a set of code that is run every time you call it. You inject variables to it for it to use based on input from the user or the html file. Everything from here until you see the &lt;\/script&gt; tag is run every time we call this function in the HTML part of the document but only if the button hasn\u2019t been pressed 20 times. \r\n\r\n\r\nif (row_no&lt;=20){\r\nif (row_no&gt;=10){\r\nvar textbox  = row_no+'.)&lt;input type=&quot;text&quot; size = &quot;2&quot;  maxlength= &quot;2&quot; name= quantity&amp;#91;&amp;#93;&gt;';}\r\nif (row_no&lt;10){\r\nvar textbox  = row_no+'. \u00a0)&lt;input type=&quot;text&quot; size = &quot;2&quot;  maxlength= &quot;2&quot; name= quantity&amp;#91;&amp;#93;&gt;';}\r\nvar textbox2 = '&lt;input type=&quot;text&quot; size = &quot;95&quot; maxlength= &quot;100&quot; name= desc&amp;#91;&amp;#93;&gt;';\r\nvar textbox3 = '&lt;input type=&quot;text&quot; size = &quot;20&quot; maxlength= &quot;20&quot; name= itemno&amp;#91;&amp;#93;&gt;';\r\nvar textbox4 = '&lt;input type=&quot;text&quot; size = &quot;6&quot; maxlength= &quot;6&quot; name= ourcost&amp;#91;&amp;#93;&gt;';\r\nvar textbox5 = '&lt;input type=&quot;text&quot; size = &quot;6&quot; maxlength= &quot;6&quot; name= cost&amp;#91;&amp;#93;&gt;';\r\nvar textbox6 = '&lt;input type=&quot;text&quot; size = &quot;3&quot; maxlength= &quot;3&quot; name= distid&amp;#91;&amp;#93;&gt;';\r\n<\/pre>\n<p>These lines declare the textboxes that will be added every time the button is clicked. The sample I am using here is for an invoice creation system. The user would click the button every time they needed to add a line (item) to the invoice. These lines are actually setting the JavaScript variables equal to the text (which in this case is HTML code). Notice the first line is controlled by an IF statement. This is so that the numbers line up. Without it the number that are double digit (greater than 9) wouldn&#8217;t be in line with the single digit numbers. Notice that the names of the boxes include brackets, which makes them an array. Every box that has that name will go to the same variable and allow us to call it when we receive this data. <\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar tbl = document.getElementById(tbl);\r\nvar rowIndex = document.getElementById(row).value;\r\nvar newRow = tbl.insertRow(row_no);\r\n<\/pre>\n<p>The first two lines here retrieve the information for the table and the current row of the table from the browser so the script knows where to put the textboxes. The third line create a new row in the table using the variable we declared earlier (which is currently 1). <\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar newCell = newRow.insertCell(0);\r\nnewCell.innerHTML = textbox;\r\n<\/pre>\n<p>These 2 lines of code simply create a cell in that row and inject the html of the variable that we declared into that cell which will intern display a textbox in that cell.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar newCell = newRow.insertCell(1);\r\nnewCell.innerHTML = textbox2;\r\nvar newCell = newRow.insertCell(2);\r\nnewCell.innerHTML = textbox3;\r\nvar newCell = newRow.insertCell(3);\r\nnewCell.innerHTML = textbox4;\r\nvar newCell = newRow.insertCell(4);\r\nnewCell.innerHTML = textbox5;\r\nvar newCell = newRow.insertCell(5);\r\nnewCell.innerHTML = textbox6;\r\n<\/pre>\n<p>We repeat this process for the other 5 boxes we will be inserting each time the button is pressed.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n}\r\nif (row_no&gt;20){\r\nalert (&quot;Too Many Items. Limit of 20.&quot;);\t\r\n}\r\n}\r\n<\/pre>\n<p>First we create the if statement. Next we create another if to see if the variable is greater than 20. If it is, show an alert telling the user that the limit has been reached. Then we close the If, and finally close the function.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n<\/pre>\n<p>Now we end the script and head and start the body of the HTML file.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;form name=&quot;invoice&quot; method=&quot;post&quot; action=&quot;insert.php&quot;&gt;\r\nInvoice #: &lt;input type=&quot;text&quot; size = &quot;6&quot; maxlength= &quot;6&quot; name=&quot;invoice&quot; \/&gt;\r\n&lt;input type=&quot;submit&quot; value=&quot;Add Invoice&quot;&gt;\r\n&lt;input type=&quot;button&quot; name=&quot;Button&quot; value=&quot;Add Item to Invoice&quot; onClick=&quot;addRow('table1','row1')&quot;&gt;\r\n&lt;table width=&quot;1000&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;2&quot; id=&quot;table1&quot;&gt;\r\n&lt;th&gt;&lt;center&gt;QTY&lt;\/th&gt;\r\n&lt;th&gt;Item Description&lt;\/th&gt;\r\n&lt;th&gt;Item #&lt;\/th&gt;\r\n&lt;th&gt;OurCost&lt;\/th&gt;\r\n&lt;th&gt;Cost&lt;\/th&gt;\r\n&lt;th&gt;DistID&lt;\/th&gt;&lt;\/center&gt;\r\n&lt;tr id=&quot;row1&quot;&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p>First, we set up the form so that we can submit the values once they have been added. Then we add a textbox for the user to put in the invoce number that we are creating. (We will use this value when we collect this data to insert into the database). Next we create the button that will allow the user to add the items to the invoice and then the button to submit the values to the insert.php file. Notice the &#8220;onClick=&#8221;addRow(&#8216;table1&#8242;,&#8217;row1&#8217;)&#8221; that is on the add item to invoice button. This calls the function we created and inserts the values in parenthesis into the arguments for the function. Then we create our table that these values will be injected into. Then we set up the heading of the tables so the users will know which boxes do what. Then we create the first row so the script will know where to start.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;\/form&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p> Then we close our form, body, and HTML. This complete the file. <\/p>\n<p><a href='http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_01.jpg'><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_01-700x46.jpg\" alt=\"dynamically_add_textbox_to_site_01\" title=\"dynamically_add_textbox_to_site_01\" width=\"700\" height=\"46\" class=\"alignnone size-medium wp-image-1587\" srcset=\"https:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_01-700x46.jpg 700w, https:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_01.jpg 1011w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>This is what the site should look like when you go to it. <\/p>\n<p><a href='http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_02.jpg'><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_02-700x58.jpg\" alt=\"dynamically_add_textbox_to_site_02\" title=\"dynamically_add_textbox_to_site_02\" width=\"700\" height=\"58\" class=\"alignnone size-medium wp-image-1588\" srcset=\"https:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_02-700x58.jpg 700w, https:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_02.jpg 1024w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>This is what should appear once you click the button to add an item.<\/p>\n<p><a href='http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_03.jpg'><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_03.jpg\" alt=\"dynamically_add_textbox_to_site_03\" title=\"dynamically_add_textbox_to_site_03\" width=\"326\" height=\"126\" class=\"alignnone size-medium wp-image-1589\" \/><\/a><\/p>\n<p>You can continue to add items until you reach the limit (which we made 20) and then you will receive the above message. We will cover how to grab these values on the next page and insert them into the database in a future tutorial. I hope this was easy to follow and thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to program a button that will add textboxes to your site without having to reload the page that you are one. To do this we will be using JavaScript. <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30,17],"tags":[50,62,49,51,42,57],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dynamically Add Textbox to Site<\/title>\n<meta name=\"description\" content=\"This tutorial will show you how to program a button that will add textboxes to your site without having to reload the page that you are one. To do this we will be using JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Maguire\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_01-700x46.jpg\",\"contentUrl\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_01-700x46.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#webpage\",\"url\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site\",\"name\":\"Dynamically Add Textbox to Site\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#primaryimage\"},\"datePublished\":\"2008-06-23T05:01:51+00:00\",\"dateModified\":\"2008-10-26T18:46:42+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/eb38d967529dbe49f7cbe082fd39105b\"},\"description\":\"This tutorial will show you how to program a button that will add textboxes to your site without having to reload the page that you are one. To do this we will be using JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teamtutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dynamically Add Textbox to Site\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/eb38d967529dbe49f7cbe082fd39105b\",\"name\":\"Mike Maguire\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/36f2aa9a11241ca79ed05e758e36f3cb?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/36f2aa9a11241ca79ed05e758e36f3cb?s=96&d=mm&r=r\",\"caption\":\"Mike Maguire\"},\"sameAs\":[\"http:\/\/mikemaguire.me\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dynamically Add Textbox to Site","description":"This tutorial will show you how to program a button that will add textboxes to your site without having to reload the page that you are one. To do this we will be using JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site","twitter_misc":{"Written by":"Mike Maguire","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#primaryimage","inLanguage":"en-US","url":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_01-700x46.jpg","contentUrl":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/dynamically_add_textbox_to_site_01-700x46.jpg"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#webpage","url":"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site","name":"Dynamically Add Textbox to Site","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#primaryimage"},"datePublished":"2008-06-23T05:01:51+00:00","dateModified":"2008-10-26T18:46:42+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/eb38d967529dbe49f7cbe082fd39105b"},"description":"This tutorial will show you how to program a button that will add textboxes to your site without having to reload the page that you are one. To do this we will be using JavaScript.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/dynamically-add-textbox-to-site#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teamtutorials.com\/"},{"@type":"ListItem","position":2,"name":"Dynamically Add Textbox to Site"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/eb38d967529dbe49f7cbe082fd39105b","name":"Mike Maguire","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/36f2aa9a11241ca79ed05e758e36f3cb?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/36f2aa9a11241ca79ed05e758e36f3cb?s=96&d=mm&r=r","caption":"Mike Maguire"},"sameAs":["http:\/\/mikemaguire.me"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1586"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=1586"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1586\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=1586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=1586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=1586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}