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 -&gt;</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);">&lt;- Back</button></td>
            <td><button type="button" onmouseup="moveto('form3','form2',1);">Next -&gt;</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);">&lt;- 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:


name
surname

No comments:

Post a Comment