This tutorial demonstrates how to get two inputs from the user within a HTML page and have a button on the page to call a javascript method to process the inputs and alter the answer output on the web-page.<\/p>\n
Within HTML, there are input tags that allow the user to input data that is passed either to a javascript method to validate the inputs (for example a registration forum) or to pass data back to the server (after the validation has taken place if required).<\/p>\n
The value 1 input is defined as
\nvalue 1 = <input type=’text’ id=value1 name=’value1′ value=’1’\/>
\nthe input type is text, which means any textual value, [A-Z]*[0-9]* but in this case since just adding integers [0-9] would be the required input.
\nThe id is for getting the value from the input with using javascript document.getElementById, value is for setting the default value.<\/p>\n
The function within the javascript, addNumbers() will get the inserted value1 by using the javascript document object. Within this object there is a method called getElementById that returns back the object, which in turn using the .value of the object returned can be passed to the parseInt (which converts a string value into a integer value). The same method is used for the answer input within the web-page (getElementById) but assign the return object to a variable allows access to the .value to set the value on the web-page.<\/p>\n
The source code is<\/p>\n
\r\n\r\n \r\n Input tutorial<\/title>\r\n <script language=\"javascript\">\r\n function addNumbers()\r\n {\r\n var val1 = parseInt(document.getElementById(\"value1\").value);\r\n var val2 = parseInt(document.getElementById(\"value2\").value);\r\n var ansD = document.getElementById(\"answer\");\r\n ansD.value = val1 + val2;\r\n }\r\n <\/script>\r\n <\/head>\r\n <body>\r\n value1 = <input type=\"text\" id=\"value1\" name=\"value1\" value=\"1\"\/>\r\n value2 = <input type=\"text\" id=\"value2\" name=\"value2\" value=\"2\"\/>\r\n <input type=\"button\" name=\"Sumbit\" value=\"Click here\" onclick=\"javascript:addNumbers()\"\/>\r\n Answer = <input type=\"text\" id=\"answer\" name=\"answer\" value=\"\"\/>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n<p>save as addtwonumbers.html and then open in a web browser (e.g. FireFox)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial demonstrates how to get two inputs from the user within a HTML page and have a button on the page to call a javascript method to process the inputs and alter the answer output on the web-page. Within HTML, there are input tags that allow the user to input data that is passed … <a href=\"https:\/\/www.codingfriends.com\/index.php\/2009\/07\/27\/add-two-numbers-3\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Add two numbers<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[402,398,400],"class_list":["post-207","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-linux","tag-windows"],"_links":{"self":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":3,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/207\/revisions"}],"predecessor-version":[{"id":209,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/207\/revisions\/209"}],"wp:attachment":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/media?parent=207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/categories?post=207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/tags?post=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}