Отправка формы и JavaScript не работают в IE, Firefox или Safari; отлично работает в Chrome

ProgramBox

Отправка формы и JavaScript не работают в IE, Firefox или Safari; отлично работает в Chrome

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#javascript #html #internet-explorer #google-chrome #firefox

#javascript #HTML #internet-explorer #google-chrome #firefox

Вопрос:

Хорошо. У меня есть форма, которая при отправке проходит через JavaScript, чтобы решить, на какую страницу перевести пользователя следующей.

Все работает нормально, когда я просматриваю его в своей IDE (Coda 2) и при предварительном просмотре в Chrome. Однако, когда я открываю ту же страницу в Firefox, IE (любой версии) или Safari, я не могу пройти дальше первой страницы.

 <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
        <link href="eh_style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <nav id="navWrapper" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand">Site Title</a>
                </div>
                <div class="link-container">
                    <ul>
                        <li><a href="http://www.link.net">LinkText</a></li>
                        <li><a href="mailto:support@link.net?subject:Help”>Help</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="main-container">
            <div class="page-container">
                <form onsubmit="OpenWindow()" id="page1" action="" method="post">
                    <fieldset id="mainSelection">
                        <label><input type="radio" class="radio-button" value="A" name="sel1"> Option A</label><br />
                        <label><input type="radio" class="radio-button" value="B" name="sel1"> Option B</label><br />
                        <label><input type="radio" class="radio-button" value="C" name="sel1"> Option C</label><br />
                        <label><input type="radio" class="radio-button" value="D" name="sel1"> Option D</label><br />
                    </fieldset><br />
                    <input type="submit" value="Next" id="submitButton" form="page1">
                </form>
            </div><!--page-container-->
        </div><!--main-container-->
        <footer class="site-footer">
            Footer Text
        </footer>
        <script type="text/javascript" language="javascript">
            function OpenWindow() {
                var choice = document.getElementById("page1");
                choice = choice.sel1.value;

                if (choice == 'A') {
                    window.open('result1.html','_self');
                } else if (choice == 'B') {
                    window.open('page2.html','_self');
                } else if (choice == 'C') {
                    window.open('page3.html','_self');
                } else if (choice == 'D') {
                    window.open('page4.html','_self');
                }
                return: false;
            }
        </script>
    </body>
</html>

Я понятия не имею, что здесь происходит. Любая помощь была бы очень признательна.

Согласно нескольким предложениям, я добавил return: false; оператор в конец моего скрипта, но все по-прежнему работает неправильно.

1. Нажмите F12. Перейдите к отладчику скриптов. Отладьте свою страницу. (Кроме того, ваша функция openWindow должна возвращать false)

2. Я заинтригован тем фактом, что вы включили jquery на страницу, но прибегли к чистому JS в коде, но я предполагаю, что, как упоминал EricLaw, поскольку ваша функция openwindow не возвращает false, форма отправляет данные на ту же страницу.

3. @user1094553 Это второй раз, когда я когда-либо возился с JS — я не был уверен, нужно ли мне включать jQuery или нет, чтобы заставить его работать должным образом.

4. @EricLaw У меня открыто окно отладки Firefox. Перед добавлением return: false; в нижнюю часть моего скрипта, когда я отправлял форму, она открывала функцию, но просто зависала при загрузке сообщения. После добавления return: false; он заполняет поле URL javascript:OpenWindow() и печатает false на дисплее … есть идеи?

5. @user1094553 смотрите последний комментарий.

Ответ №1:

Поскольку вы используете jQuery, просто используйте это, чтобы получить значение:

 var choice = $('.radio-button:checked').val();

и удалите

 var choice = document.getElementById("page1");
choice = choice.sel1.value;

Не уверен, почему, но IE не распознал «choice.sel1.value». А также вам нужно исправить это, если вы хотите сохранить «return false», хотя я не думаю, что это необходимо:

 return: false;

должно быть

 else
{
return false;
}

Я также удалил onsubmit=»openWindow()» и изменил действие на «javascript: openWindow ()», и это сработало для меня. Удачи!

1. вы это сделали. Кажется, это работает в IE11 (есть небольшой сбой, из-за которого это не сработает с первого раза, но со второй попытки это работает) — я протестирую в других браузерах, чтобы подтвердить.

2. сбой был моей ошибкой; Я не удалил onsubmit параметр из объявления формы. Теперь работает во всех браузерах. Большое спасибо!

3. Отлично! jQuery настолько полезен. Рад, что это работает для вас

Ответ №2:

Ваш onsubmit обработчик должен вернуть false или принять event аргумент и отменить событие отправки.

 <form onsubmit="return OpenWindow()" id="page1" action="#" method="post">

function OpenWindow() {
    // ...
    return false;
}

Не забудьте # в качестве значения для action атрибута в форме.

Ответ №3:

Проблема прямо здесь:

 <form onsubmit="OpenWindow()" id="page1" action="" method="post">

Изменить на action="" с action="javascript:OpenWindow()"

Действие формы, установленное для функции JavaScript, не поддерживается многими браузерами. Я удивлен, что это поддерживается Chrome.

Редактировать

JS:

 function OpenWindow() {
var choice = $('input[name="sel1"]:checked').val();
        if (choice == 'A') {
            window.open('http://youtube.com','_self');
        } else if (choice == 'B') {
            window.open('http://facebook.com','_self');
        } else if (choice == 'C') {
            window.open('http://twitter.com','_self');
        } else if (choice == 'D') {
            window.open('http://espn.com','_self');
        }
    return false;
}

1. Похоже, он по-прежнему вообще не работает, включая Chrome… Вы видите что-нибудь еще, что могло бы быть причиной этого?

2. У меня отлично работает в IE… Прокомментируйте свой JSFiddle здесь

3. action Атрибут принимает URL-адрес и javascript: в конечном итоге становится идентификатором протокола, похожим на http или https. IE, похоже, интерпретирует это нормально, но на самом деле это не является частью спецификации ECMA, поэтому поддержка браузера может стать неполной. Вместо этого используйте action="#" onsubmit="..." .

4. Измените return: false; на return false;

5. Кроме этого, с моей стороны все выглядит нормально. Попробуйте другие упомянутые вами браузеры