Javascript funciona en Firefox pero no en Chrome

Mi código JavaScript funciona bien en Firefox, pero no en Chrome. Mientras que en Firefox se muestra el número correcto de formularios (creados por el código dentro de la función de JavaScript) tan pronto como se selecciona la opción, en Chrome no sucede nada. No estoy seguro de por qué. Hace tiempo que no lo he comprobado porque principalmente uso una computadora con Linux, pero creo que IE9 también funciona.

Si me pudieras ayudar a encontrar una solución te lo agradecería. Por cierto, leí la otra pregunta con un título similar, pero no pareció responder a esta.

<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>

Por cierto, esta función es llamada por <option onclick="showForms(#)">#</option> donde # es el número de formularios que se mostrarán. Las opciones, por supuesto, residen dentro de un <select>.

Gracias de antemano por su ayuda.

EDITAR: aquí está el script de llamada, que contiene HTML, PHP y 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>

preguntado el 04 de julio de 12 a las 04:07

No pudo describir lo que no funciona y cómo. -

¿Qué dice la consola de herramientas para desarrolladores de Chrome? -

@Razick Use onChange en la selección en lugar de cada opción. Una vez hecho esto, avíseme si se soluciona o no.

@Pointy, lo siento, debería tener una prueba de eso, lo aclaré. -

@Swapnesh Lo haré, debería compactar el código, aunque no creo que solucione el problema. -

3 Respuestas

Supongo que tiene más de un elemento con la "salida" de ID porque simplemente agregué dicho elemento a esta página en la pila en Chrome, ejecuté su definición de función, la disparé con un argumento de 8 y obtuve un montón de formularios. Stack usa JQuery, así que...

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

Luego corta y pega para definir tu función en la consola y...

showForms(8);

Debería ver un montón de basura de formulario en la parte inferior de la página en Stack. Otra posibilidad es que no tengas elementos con el ID 'salida'

Siempre revise el HTML primero. Siempre. Se necesita muy poco tiempo. Si tiene JQ en su sitio, simplemente haga esto antes de llamar a esa función.

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

Si no es 1, es tu problema.

Respondido 04 Jul 12, 05:07

Gracias por la respuesta, sin embargo, no tengo dos salidas, ni tengo Jquery. He actualizado mi pregunta con el archivo de llamadas. - Razick

Mi dinero todavía está en alguna forma de rotura de HTML. Probablemente alguna peculiaridad de un navegador que maneja el anidamiento incorrecto o algo mejor que el otro. Intenta validar tu HTML. También vea lo que sucede en IE8. IE8 tiende a fallar por completo en formas que pueden hacer que el código HTML incorrecto sea más evidente. Es como un canario. - Erik Reppen

Parece ser un error de HTML ya que usé una versión modificada de este código en Chrome y funcionó bien. - Razick

Sintaxis incorrecta: sin escape " en la cadena HTML.

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

Use algún IDE o editor inteligente, eso lo salvaría de tales errores.

Por cierto, un truco para ti: coloca la plantilla de código en un oculto (pantalla: ninguno); Luego, para cada uno, cópielo en un nuevo nodo y cambie sus ID, y colóquelo en el lugar correcto. Ver manipulación DOM, parte de los estándares W3C.

Segundo consejo: use el soporte de idioma del lado del servidor para matrices como foo[] de PHP en lugar de generar ID. Mejor enfoque de la OMI.

Respondido 04 Jul 12, 04:07

La cadena está entre comillas simples, por lo que no escapé de las comillas dobles. ¿Eso no funciona en JavaScript? Principalmente programo PHP. - Razick

Aptana Studio 3, mi IDE, no captó eso por alguna razón. Arreglarlo (el extra ") no corrigió el problema. Sin embargo, revisaré esas sugerencias. Gracias. - Razick

Hmm, si no se soluciona, generalmente pongo un montón de alert()s y comprobar dónde lo que sale mal. En este caso, inspeccionaría DOM de esa manera. Solución tonta pero de último recurso. ¿Quizás Chrome tiene algún depurador como Firefox? - Ondra Zižka

Tuve un problema similar que terminó por no definir mis arreglos antes de usarlos. Firefox parece ser más tolerante a la hora de trabajar con matrices que no se han definido explícitamente con una instrucción var, pero Chrome necesita que se definan.

Respondido el 26 de junio de 13 a las 13:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.