Tuesday, April 9, 2013

Mutiple buttons with different actions in a single HTML form



Suppose in a HTML form with name search_form_results, we have three buttons.
One button requires action reports.php, while other two buttons  require reportsD.php and reportsA.php. We can use JavaScript function to submit a form with different actions:
   document.forms['search_form_results'].action = 'reportsA.php';
   document.forms['search_form_results'].submit();

Example code:
<form name="search_form_results" action="reports.php" method="POST">
  <input type="submit" name="submit_report"  value="Generate a Report Using This Data Set" " />
      <input type="button" name="submit_reportD"  value="Generate a Report for Dean"   onclick="generateReportD();" />
            <input type="button" name="submit_reportA"  value="Generate a Report for ACS"  onclick="generateReportA();" />

</form>
Here we need to define two  JavaScript functions for different actions reportsD.php and reportsA.php, the default action reports.php is ignored.
<script>
function generateReportD(){
   document.forms['search_form_results'].action = 'reportsD.php';
   document.forms['search_form_results'].submit();
}

function generateReportA(){
   document.forms['search_form_results'].action = 'reportsA.php';
   document.forms['search_form_results'].submit();
}

</script>

No comments:

Post a Comment