Calling appropriate pages when there are multiple buttons in a HTML form

Discussion in 'Web Design, HTML And CSS' started by Sanskruti, Jun 5, 2007.

  1. Sanskruti

    Sanskruti New Member

    Joined:
    Jan 7, 2007
    Messages:
    108
    Likes Received:
    18
    Trophy Points:
    0
    Occupation:
    Software Consultant
    Location:
    Mumbai, India

    Introduction



    This article demonstrates how to call appropriate pages when there are multiple buttons in HTML page you created. For example by using a HTML form you may want to update record(s), delete record(s), move to next record, move to previous record etc. To do this you will require multiple buttons in this single or same form. And when user clicks on any of this button you may want to call appropriate scripting page such as JSP page, ASP page which will do the necessary actions such as update record(s) in database, delete record(s) from database, move to next record, move to previous record etc.

    This example consists of five HTML pages: 'multiplebuttons.html', 'save.html', 'delete.html', 'next.html', and 'previous.html'. HTML page 'multiplebuttons.html' consists of four buttons: Save (to save updated record(s) in database), Delete (to delete record(s) from database), Next (to move to next record), Previous (to move to previous record). When user clicks on button 'Save', it will call HTML page 'save.html', when user clicks on button 'Delete', it will call HTML page 'delete.html', and so on. In actual programming these pages that is 'save.html', 'delete.html', 'next.html', 'previous.html' should be replaced with appropriate scripting (JSP, PHP, ASP etc.) pages to do the required things.

    In this example to call appropriate pages, simple JavaScript and HTML Document Object Model is used. When user clicks on any of the button, on 'onclick()' event, JavaScript function 'invoke()' is called with button index(0 for Save, 1 for Delete, 2 for Next, 3 for Previous). Within this function depending on button appropriate page is called by using 'document.<formname>.action'. Please note that 'action' field of the form is kept empty.

    HTML form: multiplebuttons.html



    HTML:
    <script language = "javascript">
    
    function invoke(btn)
    {
        if(btn == 0) document.myform.action="save.html";
        if(btn == 1) document.myform.action="delete.html";
        if(btn == 2) document.myform.action="next.html";
        if(btn == 3) document.myform.action="previous.html";
    
        document.myform.submit(); 
    }
    
    </script>
    
    <html>
    <body>
    <center>
        <h4>Click on one of the buttons</h4>
        <form method="post" name="myform" action="">
        <table>
            <tr><td><input type="button" value="Save" onclick="invoke(0)"></td></tr>
            <tr><td><input type="button" value="Delete" onclick="invoke(1)"></td></tr>
            <tr><td><input type="button" value="Next" onclick="invoke(2)"></td></tr>
            <tr><td><input type="button" value="Previous" onclick="invoke(3)"></td></tr>
        </table>
        </form>
    </center>
    </body>
    </html>

    HTML page: save.html



    HTML:
    <html>
    <body>
    <center>
        <h4>Called save page.</h4>
    </center>
    </body>
    </html>

    HTML page: delete.html



    HTML:
    <html>
    <body>
    <center>
        <h4>Called delete page.</h4>
    </center>
    </body>
    </html>

    HTML page: next.html



    HTML:
    <html>
    <body>
    <center>
        <h4>Called next page.</h4>
    </center>
    </body>
    </html>

    HTML page: previous.html



    HTML:
    <html>
    <body>
    <center>
        <h4>Called previous page.</h4>
    </center>
    </body>
    </html>
    If user clicks 'Save' button, output will be shown as:
    Code:
    [B]Called save page.[/B]
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice