Getting Form Data through Java Script
This is a simple code snippet in which you will be able to retrieve data from the form using JS. This is a basic Js stuff, which you should know how to use. Basically in this code snippet, there in a HTML form element which has 2 text type input box and a button which calls the JS function.
Screenshot
The JS Function has a Form Element which takes the values from the input elements and then appends it inside a paragraph and shows !
The Code
Got any bugs or Questions ?
Feel free to comment them !
Screenshot
The Code
<!--The CSS For the Page--> <style> #pclass { position: relative; text-align: center; top: 300; } .form { position: relative; text-align: -webkit-center; padding: 110; } .form input[type="text"] { padding: 10 10 2 10; border-bottom: 2px; border-style: solid; border-left: none; border-top: none; border-right: none; } .form button { padding: 5; background-color: white; border-left: none; border-right: none; border-top: none } </style> <!--The CSS Ends--> <!--The JS For the Page--> <script> function print() { oForm = document.forms["form_name"]; pclass=document.getElementById("pclass"); pclass.innerHTML="Field 1 is: "+oForm.elements["f1"].value+ " Field 2 is: "+oForm.elements["f2"].value; sleep(5000); }</script> <!--The JS Ends--> <!--The HTML For the Page--> <p id="pclass"></p> <form name="form_name" class="form" > <input type="text" name="f1" id="txt_name" placeholder="First Box" size="30" maxlength="70"><br/> <input type="text" name="f2" id="txt_name" placeholder="First Box" size="30" maxlength="70"><br/> <button type="button" onclick="print()">Submit!</button> </form> <!--The HTML Ends-->
Got any bugs or Questions ?
Feel free to comment them !
Comments
Post a Comment