How to create HTML based on Selected Option
===

## The Scenario ##
I have a file, run.phtml, that serves as the view for a report controller within Zend Framework. I didn't write the code, and the code uses a home-built framework that resides on top of Zend to extend it. 

There's a report format option list that allows the user to select an HTML table for the results, or an Excel file for downloading.

**We currently must support IE7, IE8, and Firefox.**

If the report format is Excel, we need to use the following for the run button:

    onclick="COS.report.updateFormAction(false); document.getElementById('report_param_form').submit();"

If the report format is HTML, we need to use the following for the run button:

    onclick="COS.report.render('report_table_div', true);"

## The Problem ##
The code I have currently works, but it's janky, ugly, and cumbersome. It's heavy on jquery syntax for HTML creation. I'd like a better way to accomplish the task that will make it easy for the next guy to figure out.

The problem would go away entirely if it were just Firefox, but I need to use a different onclick event for the button for IE and it's only necessary for if the format type is Excel.

The select option for Excel vs HTML is built using this home-built extension that doesn't allow me to use Zend's built-in form element creator, so I can't just add it to the element.

## HTML ##
<!-- language-all: lang-html -->

    <div id='buttons_div'>
       [[This is where the run button will go. And the following code needs to be present as well. It currently deletes whatever is in the div, which is why the buttons are concatenated at the end.]]
       <input type="button" id="email_report_button" value="Email Results" style="<?php echo $display; ?>" title="Email the results of this report to yourself" onclick="COS.report.email();">&nbsp;<input type="button" id="clear_report_button" value="Clear" title="Clears the input form and the results box" onclick="COS.report.clear('report_table_div');">&nbsp;<input type="button" id="cancel_report_button" style="display: none" value="Cancel" title="Cancel the report before the results are returned" onclick="COS.report.cancel();">&nbsp;<img id="ajax_spinner" style="display: none; text-align: center;" src="/images/modal-load.gif" width="20" height="20"/>
    </div>

## jQuery ##
<!-- language: lang-js -->

    $j = jQuery.noConflict();
    $j("select#report_format").change(function () {
              var str = "";
              if($j("select#report_format option:selected").val() == "xls")
              {
                  str += "<input type=\"button\" value=\"Preview Excel Report\" title=\"Run the report but limit the results to 10 rows\" onclick=\"COS.report.updateFormAction(true); document.getElementById(\'report_param_form\').submit();\" id=\"preview_report_button\" class=\"btn\">&nbsp;<input type=\"button\" value=\"Run Report\" title=\"Run the report but limit the results to 10 rows\" onclick=\"COS.report.updateFormAction(false); document.getElementById(\'report_param_form\').submit();\" id=\"run_report_button\" class=\"btn\">";
              }
              else
              {
                  str += "<input type=\"button\" value=\"Preview HTML Report\" title=\"Run the report but limit the results to 10 rows\" onclick=\"COS.report.render(\'report_table_div\', true);\" id=\"preview_report_button\" class=\"btn\">&nbsp;<input type=\"button\" value=\"Run Report\" title=\"Run the report but limit the results to 10 rows\" onclick=\"COS.report.render(\'report_table_div\', false);\" id=\"run_report_button\" class=\"btn\">";
              }
              str += "<input type=\"button\" id=\"email_report_button\" value=\"Email Results\" style=\"<?php echo $display; ?>\" title=\"Email the results of this report to yourself\" onclick=\"COS.report.email();\">&nbsp;<input type=\"button\" id=\"clear_report_button\" value=\"Clear\" title=\"Clears the input form and the results box\" onclick=\"COS.report.clear(\'report_table_div\');\">&nbsp;<input type=\"button\" id=\"cancel_report_button\" style=\"display: none\" value=\"Cancel\" title=\"Cancel the report before the results are returned\" onclick=\"COS.report.cancel();\">&nbsp;<img id=\"ajax_spinner\" style=\"display: none; text-align: center;\" src=\"/images/modal-load.gif\" width=\"20\" height=\"20\"/>";
              $j("div#buttons_div").html(str);
            })
            .change();