Javascript works in Firefox but not in Chrome

Question

My JavaScript code works fine in Firefox, but not in chrome. While in Firefox the correct number of forms (built by the code within the JavaScript function) are shown as soon as the option is selected, in Chrome nothing happens. I'm not sure why. I haven't checked in a while since I mostly use a Linux computer, but I believe IE9 works as well.

If you could help me find I solution I'd appreciate it. By the way, I did read the other similarly titled question, but it didn't seem to answer this.

<script type="text/javascript">
  function showForms(numForms)
  {
      // build  the form
      var form = "";
      for(i = 1; i <= numForms; i++)
      {    
           // define one section of the form (give fields unique names).
           var formPart = '<fieldset><legend>Add User</legend><label>Full Name:</label><input name="fullname' + i + '"  type="text" required="required"" /><label>Email:</label><input name="email' + i + '" type="email" /><label>Phone:</label><input placeholder="1 (123)-123-1234" name="phone' + i + '" type="tel" /><label>Spreadsheet:</label><input name="spreadsheet' + i + '" type="file" /><label>Registration #:</label><textarea name="regnums' + i + '" placeholder="Aircraft registration number(s). Separate each number with a comma."></textarea></fieldset>';
           form = form + formPart;
      }
      // output the form to the page
      var output = document.getElementById("output");
      output.innerHTML = form + '<input name="numForms" value="' + numForms + '" type="hidden" />';
  }
</script>

By the way, this function is called by <option onclick="showForms(#)">#</option> where # is the number of forms to be displayed. The options, of course, reside within a <select> .

Thank you in advance for your help.

EDIT: Here is the calling script, containing HTML, PHP & JavaScript.

<?php
// include the javascript function to generate the form
include ('../private/Includes/Scripts/showforms.js');

// form handling code
if (isset($_POST['submit']))
{
    // make sure the input for the number of users is a number, and less than or
    // equal to 10
    if (is_numeric($_POST['numForms']) && $_POST['numForms'] <= 10)
    {
        $regCount = $_POST['numForms'];
    }

    // initialize array for form data
    $regData = array();
    // fill array with multi-dimentional form data
    for ($i = 1; $i <= $regCount; $i++)
    {
        // get form data and store in temporary variables
        $fullname = trim($_POST['fullname' . $i]);
        $email = trim($_POST['email' . $i]);
        $phone = trim($_POST['phone' . $i]);
        $spreadsheet = $_POST['spreadsheet' . $i];
        $regnums = trim($_POST['regnums' . $i]);
        // put data in array
        $regData[$i] = array(
            'username' => '',
            'fullname' => $fullname,
            'email' => $email,
            'phone' => $phone,
            'spreadsheet' => $spreadsheet,
            'regnums' => $regnums
        );
        // unset temporary variables
        unset($invalid, $username, $fullname, $email, $phone, $spreadsheet, $regnums);
    }
    $errors = registerUsers($regData);
    if ($errors[0] == "Some users were not registered due to missing usernames.")
    {
        $notes[] = "Some users were not registered due to missing usernames.";
        unset($errors[0]);
    }
    if (!isset($errors))
    {
        $success = true;
    }
}
?>
<h2 style="margin-top: -9px;">Register Users</h2>
<p>Use this form to register new users. Usernames and passwords are automatically generated and emailed to their owner's addresses.</p>
<form enctype="multipart/form-data" method="post">

    <fieldset>
        <legend>
            Form Setup &amp; Results
        </legend>
        <label>No. of User(s):</label>
        <select onchange="showForms(0)" name="select">
            <option selected="selected">- Please Select -</option>
            <option onclick="showForms(1)">1</option>
            <option onclick="showForms(2)">2</option>
            <option onclick="showForms(3)">3</option>
            <option onclick="showForms(4)">4</option>
            <option onclick="showForms(5)">5</option>
            <option onclick="showForms(6)">6</option>
            <option onclick="showForms(7)">7</option>
            <option onclick="showForms(8)">8</option>
            <option onclick="showForms(9)">9</option>
            <option onclick="showForms(10)">10</option>
        </select>
    </fieldset>
    <div id="output"></div>
    <input id="submit" name="submit" type="submit" value="Submit" />
</form>

Answer 1

Wrong syntax - unescaped " in the HTML string.

... + '"  type="text" required="required"" />

Use some IDE or smart editor, that would save you from such mistakes.

BTW one trick for you: Put the code template into a hidden (display: none); Then, for each, copy it to a new node and change it's IDs, and put it to the right place. See DOM manipulation, part of W3C standards.

Second tip: Use your server side lang support for arrays like PHP's foo[] instead of generating IDs. IMO better approach.

Answer 2

I'm guessing you have more than one element with the ID "output" because I just appended such an element to this page on stack in Chrome, executed your func definition, fired it with an argument of 8 and got a bunch of forms. Stack uses JQuery so...

$('body').append('<div id="output"/>');

Then cut and paste to define your func in the console and...

showForms(8);

You should see a bunch of form junk at the bottom of the page in Stack. Another possibility is that you have no elements with the ID 'output'

Always check the HTML first. Always. It takes very little time. If you have JQ on your site, just do this before you call that function.

alert($('#output').size());

If it's not 1, that's your problem.

Answer 3

I had a similar problem that ended up being due to not defining my arrays prior to use. Firefox seems to be more tolerant of working with arrays that have not been explicitly defined with a var statement, but Chrome needs them to be defined.