Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   Calling appropriate pages when there are multiple buttons in a HTML form (http://www.go4expert.com/articles/calling-appropriate-pages-multiple-t4558/)

Sanskruti 5Jun2007 13:30

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

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 Code:

<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 Code:

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

HTML page: delete.html



HTML Code:

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

HTML page: next.html



HTML Code:

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

HTML page: previous.html



HTML Code:

<html>
<body>
<center>
    <h4>Called previous page.</h4>
</center>
</body>
</html>

If user clicks 'Save' button, output will be shown as:
Code:

Called save page.


All times are GMT +5.5. The time now is 22:19.