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
<!--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

Popular posts from this blog

Non Restoring Division Algorithm Implementation in C

Bit Stuffing Code Implementation in Java

Hackerrank Modified Kaprekar Numbers Solution