Multiple submit button in a single form

Let us create a simple form where a user is allowed to create a content in text field. Then one can either preview or save the content. On click of each button, a javascript function is called and we determine which button was Clicked. We can now call either a same php or different phps as a form action with different buttons.


<html>

<head>
<script type="text/javascript">

function buttonClicked(which){
     if (which == 1) {
 //The save button was clicked
          document.myForm.action = 'save.php';

/*If we wish to call same php we can use the get method and send the buttonId to next page and then use the conditional statement */

//for same php use: document.myForm.action = 'some.php?buttonId=1';

}

    else if(which==2) {

//The Preview button was clicked
         document.myForm.action = 'preview.php'

// for same php Use: document.myForm.action = 'some.php?buttonId=2';}
    }
     document.myForm.submit();
}

</script>
</head>
<body>

<form name="myForm"  method="post">

<fieldset>

<legend> Write Your Own Page </legend>

TITLE <br/>

<input type="text" name="content"><hr/>

CONTENT<br/>

<textarea rows="10" cols="50" name="content">Write Your Text Here </textarea>
<hr />
</fieldset>

 <input type="button" style="width:100px" value="SAVE" onclick="buttonClicked(1)">
    <input type="button" style="width:100px" value="PREVIEW" onclick="buttonClicked(2)">

</form>
 </body>
</html>

A screenshot of the above Javascript example is given below.  
Tags: