Friday, August 3, 2012
Create a multipage HTML form using javascript
When a HTML form is very long, we need to divide it to several pages.
There are several ways to do this. Below is to use JavaScript.
Design idea:
1) All pages are in a single form. In the first page, other pages are hidden.
using JavaScript function moveto(id, current, check) to move to next page or previous page.
When moving to next page, the previous page will not be displayed and next page is displayed using CSS style: style="display: none;"
2) To validate the form, create <span></span>, if the input filed is not filled, create waring message between <span> using
document.getElementById(current).getElementsByTagName("span")[0].innerHTML = "Warning: form incomplete.";
Below is the code:
<html>
<script type="text/javascript">
<!--
function moveto(id, current, check)
{
valid = true;
if (check == 1)
{
object = document.getElementById(current);
valid = validate(object);
}
if(valid == true)
{
document.getElementById(current).style.display = "none";
document.getElementById(current).getElementsByTagName("span")[0].innerHTML = "";
document.getElementById(id).style.display = "block";
}
else
{
document.getElementById(current).getElementsByTagName("span")[0].innerHTML = "Warning: form incomplete.";
}
}
function validate(id)
{
input = id.getElementsByTagName("input");
valid = true;
for(i = 0; i < input.length; i++)
{
if(input[i].value == "")
{
valid = false;
}
}
return valid;
}
-->
</script>
<form action="" method="post" onsubmit="return validate(document.getElementById('form3'));">
<table id="form1" border="0">
<tr>
<td>name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>surname</td>
<td><input type="text" name="surname" /></td>
</tr>
<tr>
<td colspan="2"><button type="button" onmouseup="moveto('form2','form1',1);">Next -></button></td>
</tr>
<tr>
<td colspan="2"><span></span></td>
</tr>
</table>
<table id="form2" style="display: none;" border="0">
<tr>
<td>username</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>password</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>repeat password</td>
<td><input type="password" name="repeatPassword" /></td>
</tr>
<tr>
<td><button type="button" onmouseup="moveto('form1','form2',0);"><- Back</button></td>
<td><button type="button" onmouseup="moveto('form3','form2',1);">Next -></button></td>
</tr>
<tr>
<td colspan="2"><span></span></td>
</tr>
</table>
<table id="form3" style="display: none;" border="0">
<tr>
<td>E-mail address</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td><button type="button" onmouseup="moveto('form2','form3',0);"><- Back</button></td>
<td><input type="submit" name="submit" value="submit" /></td>
</tr>
<tr>
<td colspan="2"><span></span></td>
</tr>
</table>
</form>
</html>
Result:
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment