Не отображает submit в Firefox

@lighty · Регистрация: 11.03.2011

Студворк — интернет-сервис помощи студентам

Имеется форма с кнопкой

HTML5
1
2
3
4
5
6
<form method="post" action="../users/user_login.php">
              <div class="login_txt"><input id="ent_login" type="text" name="ent_login"></div>
              <div class="login_txt"><input id="ent_pass" type="password" name="ent_password"></div>
              <div class="login_txt"><input type="image" value=" " name="login" id="btn_login"></div>
              <div class="login_txt"><a href="../tpl/user_reg_tpl.php">Регистрация</a></div>
</form>

и код цсс

CSS
1
2
3
4
5
6
7
8
9
10
#btn_login {
  background-image:url(../img/btn_in.png);
  background-size: 70px 30px;
  width: 70px;
  height: 30px;
  cursor:pointer;
  line-height:35px;
  text-align:center;
  background-repeat:no-repeat;
}

Но в FireFox кнопка просто не отображается. Или если возможно то как поставить допустим просто ссылку вместо кнопки сабмит, но как сделать ссылке обработчик ПОСТ?

@SaNeK_71 · 24.05.2013, 10:37

lighty, может быть для отправки формы в обработчик лучше использовать <input type="submit" value="Отправить"> ???

@lighty · 24.05.2013, 10:55 **[ТС]**

Да, да. Но как тогда быть, если я хочу использовать рисунок для кнопки?

@Зверушь · 24.05.2013, 11:12

Задай форме имя, например myform

HTML5
1
<form name="myform" method="post" action="../users/user_login.php">

Ссылку, которую надо сделать сабмитом оформить так:

HTML5
1
<a href="javascript:document.myform.submit();">Сабмит</a>

Но это не лучший вариант, так как псевдопротокол javascript устарел, хоть и поддерживается браузерами.
Можно сделать по-другому, но тут опять без javascripta не обойтись: Задать ссылке имя, поставить на неё обработчик по клику, который будет предотваращать действие браузера поумолчанию для этой ссылки и вызывать метод submit() твоей формы.

@lighty · 24.05.2013, 13:19 **[ТС]**

А про второй способ можно подробнее, пример кода хотя бы, если можно?

@Зверушь · 24.05.2013, 14:04

Второй способ. Вот javascript код, который нужен:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
window.onload = function() {
    var myForm = document.getElementById('myform'); //myform - ид формы, которую нужно отправить
    var linkSubmit = document.getElementById('submit'); //submit - ид ссылки, которая осуществит submit формы
 
    linkSubmit.onclick = function(event) {
        event = event || window.event;
        event.cancelBubble = true;
        event.returnValue = false;
        myForm.submit();
    }
}

Если нужен пример страницы, которая использует этот скрипт, то вот она ниже.
Есть форма и ссылка. По нажатию на ссылке происходит сабмит формы. Разумеется эту ссылку можно оформить картинкой, чем угодно

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function() {
    var myForm = document.getElementById('myform');
    var linkSubmit = document.getElementById('submit');
 
    linkSubmit.onclick = function(event) {
        event = event || window.event;
        event.cancelBubble = true;
        event.returnValue = false;
        myForm.submit();
    }
}
</script>
</head>
 
<body>
<form id="myform" method="POST" action="<?=$_SERVER['SCRIPT_NAME']?>">
    <input type="text" name="yourtext" />
    <a id="submit" href="#">Отправить форму</a>
</form>
<?php
if (isset($_REQUEST['yourtext'])) {
    $yourtext = htmlspecialchars($_REQUEST['yourtext']);
    echo "<p>Вы ввели текст: $yourtext</p>\n";
}
?>
</body>
</html>

@lighty · 24.05.2013, 14:06 **[ТС]**

Благодарю, будем разбираться!

@Зверушь · 24.05.2013, 14:12

Извините, ошибся... Javascript код должен быть немного другим... Попутал

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onload = function() {
    var myForm = document.getElementById('myform');
    var linkSubmit = document.getElementById('submit');
 
    linkSubmit.onclick = function(event) {
        event = event || window.event;
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
        myForm.submit();
    }
}

@lighty · 24.05.2013, 14:13 **[ТС]**

Сам уже напоролся)))

@dolte · 24.05.2013, 19:37

не имеет значения type="image" или type="submit"
нужно рыть в другом направлении.
попробуйте прописать стили для файрфокса

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@SaNeK_71 Прописан в интернете... 94 / 78 / 11 Регистрация: 06.04.2012 Сообщений: 345
	24.05.2013, 10:37
	lighty, может быть для отправки формы в обработчик лучше использовать <input type="submit" value="Отправить"> ??? 0

@lighty 18 / 18 / 2 Регистрация: 11.03.2011 Сообщений: 194
	24.05.2013, 10:55 [ТС]
	Да, да. Но как тогда быть, если я хочу использовать рисунок для кнопки? 0

@lighty 18 / 18 / 2 Регистрация: 11.03.2011 Сообщений: 194
	24.05.2013, 13:19 [ТС]
	А про второй способ можно подробнее, пример кода хотя бы, если можно? 0

@lighty 18 / 18 / 2 Регистрация: 11.03.2011 Сообщений: 194
	24.05.2013, 14:06 [ТС]
	Благодарю, будем разбираться! 0

@lighty 18 / 18 / 2 Регистрация: 11.03.2011 Сообщений: 194
	24.05.2013, 14:13 [ТС]
	Сам уже напоролся))) 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	24.05.2013, 19:37
	не имеет значения type="image" или type="submit" нужно рыть в другом направлении. попробуйте прописать стили для файрфокса 0