Javascript работает в Firefox, но не в Chrome

Мой код JavaScript отлично работает в Firefox, но не в Chrome. В то время как в Firefox правильное количество форм (построенных кодом в функции JavaScript) отображается сразу после выбора опции, в Chrome ничего не происходит. Я не уверен, почему. Я давно не проверял, так как в основном использую компьютер с Linux, но я думаю, что IE9 тоже работает.

Если бы вы могли помочь мне найти решение, я был бы признателен. Кстати, я прочитал другой вопрос с аналогичным названием, но, похоже, он не ответил на этот вопрос.

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

Кстати, эта функция вызывается <option onclick="showForms(#)">#</option>, где # — количество отображаемых форм. Опции, конечно же, находятся в файле <select>.

Спасибо заранее за вашу помощь.

РЕДАКТИРОВАТЬ: Вот скрипт вызова, содержащий 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>

person Razick    schedule 04.07.2012    source источник
comment
Вы не смогли описать, что не работает и как.   -  person Pointy    schedule 04.07.2012
comment
что говорит консоль инструментов разработчика Chrome?   -  person Neil McGuigan    schedule 04.07.2012
comment
@Razick Используйте onChange для выбора вместо каждого параметра. Как только закончите, дайте мне знать, исправит ли это для вас или нет   -  person swapnesh    schedule 04.07.2012
comment
@Pointy Извините, это должно быть доказательство, я уточнил.   -  person Razick    schedule 04.07.2012
comment
@Swapnesh Я сделаю это, должен сжать код, хотя я не думаю, что это решит проблему.   -  person Razick    schedule 04.07.2012
comment
@swapnesh, есть ли способ передать значение выбранного параметра функции, вызываемой onchange, если onchange находится в списке?   -  person Razick    schedule 04.07.2012
comment
@Razick, вы можете легко получить это через onChange=showForms(this.value) и сообщить мне   -  person swapnesh    schedule 04.07.2012


Ответы (3)


Я предполагаю, что у вас есть более одного элемента с идентификатором «выход», потому что я только что добавил такой элемент к этой странице в стеке в Chrome, выполнил определение вашей функции, запустил его с аргументом 8 и получил кучу форм. Стек использует JQuery, поэтому...

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

Затем вырежьте и вставьте, чтобы определить свою функцию в консоли и...

showForms(8);

Вы должны увидеть кучу мусора в нижней части страницы в стеке. Другая возможность заключается в том, что у вас нет элементов с идентификатором «выход».

Всегда сначала проверяйте HTML. Всегда. Это занимает очень мало времени. Если у вас есть JQ на вашем сайте, просто сделайте это, прежде чем вызывать эту функцию.

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

Если это не 1, это ваша проблема.

person Erik Reppen    schedule 04.07.2012
comment
Спасибо за ответ, однако у меня нет двух выходов и нет Jquery. Я обновил свой вопрос с файлом вызова. - person Razick; 08.07.2012
comment
Мои деньги по-прежнему уходят на какую-то форму поломки HTML. Вероятно, какая-то причуда одного браузера, обрабатывающая неправильную вложенность, или что-то лучше, чем другой. Попробуйте проверить свой HTML. Также посмотрите, что происходит в IE8. IE8 имеет тенденцию полностью ломаться таким образом, что плохой HTML становится более очевидным. Это как канарейка. - person Erik Reppen; 08.07.2012
comment
Похоже, это ошибка HTML, так как я использовал модифицированную версию этого кода в Chrome, и она работала нормально. - person Razick; 22.07.2012

Неверный синтаксис - неэкранированный " в строке HTML.

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

Используйте какую-нибудь IDE или умный редактор, это избавит вас от подобных ошибок.

Кстати, один трюк для вас: поместите шаблон кода в скрытый (отображение: нет); Затем для каждого скопируйте его на новый узел, измените его идентификаторы и поместите в нужное место. См. Манипуляции с DOM, часть стандартов W3C.

Второй совет: используйте поддержку языка на стороне сервера для массивов, таких как foo[] в PHP, вместо создания идентификаторов. ИМО лучший подход.

person Ondra Žižka    schedule 04.07.2012
comment
Строка в одинарных кавычках, поэтому я не избегал двойных кавычек. Разве это не работает в JavaScript? В основном программирую на PHP. - person Razick; 04.07.2012
comment
Aptana Studio 3, моя IDE, по какой-то причине этого не уловила. Исправление этого (дополнительного) не решило проблему. Я все же рассмотрю эти предложения. Спасибо. - person Razick; 04.07.2012
comment
Хм, если это не исправило, то я обычно ставлю кучу alert() и проверяю, что пошло не так. В этом случае я бы проверил DOM таким образом. Тупое, но крайнее решение. Может быть, в Chrome есть какой-нибудь отладчик, такой как Firefox? - person Ondra Žižka; 04.07.2012

У меня была аналогичная проблема, которая закончилась тем, что я не определил свои массивы до использования. Firefox кажется более терпимым к работе с массивами, которые не были явно определены с помощью оператора var, но Chrome требует, чтобы они были определены.

person vinomarky    schedule 26.06.2013