How to Make Multiple Actions for a Form in Dreamweaver
If your Web form needs to perform more than one possible action, such as sending an email or updating a database, create an HTML form that contains more than one button to submit the form. Adobe's Dreamweaver editing program allows you to build this type of multipurpose form. Because HTML forms can contain only a single action attribute, you must use JavaScript to trigger the form's action command.
Other People Are Reading
Instructions
-
-
1
Launch Dreamweaver and click the "New" button to create a new project. Click Design to enter design mode.
-
2
Click Insert and then select Form to display a menu of options. Click the Form option to place a new form on Dreamweaver's editing canvas.
-
-
3
Click Insert again. Select Form and then Button to display a pop-up window. Type "performAction1" without quotes in the window's Label text box and click "OK" to close the window to place the new button on the form.
-
4
Click Insert and then select Form. Click Button and type "performAction2" in the window's Label text box. Two buttons now appear on your form. Click Dreamweaver's Code tab to view the document's source code. The form tag's action attribute will appear like this:
<form id="form1" name="form1" method="post" action="">
The form has no action at this point and will not do anything if you click either of the buttons.
-
5
Click the Design tab to return to design mode. Click one of the buttons to select it and press "Shift" and "F4" to open the Behaviors panel. Click the panel's plus sign, and then click JavaScript to open the Call JavaScript window. Type "performAction('form1', '1')" in the JavaScript text box and click "OK."
-
6
Click the other button, return to the Behaviors panel and click the plus sign again. Click JavaScript and type "performAction('form1', '1')" in the JavaScript text box. Click "OK" to close the window.
-
7
Click Dreamweaver's Code tab to view the document's source code. Find the </script> tag located in the code and paste the following JavaScript function before that tag:
function performAction(formID, action) {
var formObject = document.getElementById(formID);
if (action == "1")
formObject.action ="Form_Processor1.html";
else
formObject.action = "Form_Processor2.html";}
The first statement obtains a reference to your form. The second statement checks the value of the action variable passed to the function. If that value is 1, the code sets the form's action to Form_Processor1.html. Otherwise it sets the form's action to Form_Processor2.html. Replace Form_Processor1.html and Form_Processor2.html with the URLs of the documents that will process your form requests.
-
8
Press "F12" to preview the document in your browser. The two form buttons appear on the Web page. Click either of them to perform the action assigned to it.
-
1
Tips & Warnings
The performAction function is generic. It can process any form on your Web page. To make this possible, always pass the name of a form to the function by adding the form's name to the parameter list created in the Call JavaScript window.
