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