submit через ссылку <a>
Настраиваю дизайн, под CMS'кой. Возникла проблема.
В исходнике была кнопка типа submit. Я переделываю ее в: <a href='javascript://' name="sbm" onClick='submit();'>Войти</a> (кнопку собственно удаляю). В опере нормально работает. в ФФ и IE не работает. Как это можно реализовать в них? Имя формы неизвестно и по порядку форму не вызвать. Может тут просто синтаксически надо обойти. Заранее благодарен. |
Наверно правильней кнопку стилизовать под ссылку
Код:
input.submit { |
Эт понятно. Но допустим будет задача шире. Т.е. на странице будет 2 или более кнопок(ссылок) для отправки формы. Для этого и хочу универсальный код найти :)
|
Цитата:
А если сильно хочется с сылками, то можно попробовать так (при условии, что элемент A находится внутри нужной формы) Код:
<a href='javascript://' name="sbm" onClick="var element = this; while (element = element.parentNode) if (typeof element.submit == 'function') { element.submit(); break; }">Войти</a> |
Kolyaj,
в ФФ и опере работает. в ИЕ глухо... |
Kolyaj,
все же сошелся, на настройке submit'a через css ... но с сылками тоже интересно было бы разобраться. И еще, у формы нет name... Поэтому может IE и выеживается. |
А если так попробовать?
<a href='javascript://' name="sbm" onClick="var element = this; while (element = element.parentNode) if (element.tagName == 'FORM') { element.submit(); break; }">Войти</a>
|
Андрей Параничев, угу, именно так и написал сначала, но потом поправил, решив, что будет правильней метод проверять.
Phoenix, щас проверил, в ИЕ typeof form.submit == 'object'! Так что можно проверять или еще на равенство типа submit'а строке 'object', или просто на существования свойства submit, или свойство tagName. |
Имхо, href="javascript:<что-то с пустым значением>" - зло. В IE такая ссылка может убить gif-анимацию и ролловер-эффекты (для эмуляции сабмита неактуально, но все-таки... в общем случае). Если уж делать такие ссылки, то href="#" и обязательно return !1 в конце onclick-а. Хотя лично я не понимаю, зачем вообще для такого эффекта ссылки (с необходимостью глушить href), ведь повесить onclick можно на любой элемент - хоть span (соотв. образом стилизованный)... А вообще Kolyaj прав, кнопки должны быть кнопками - не у всех JS включен.
|
может попробовать так
<a href='#' name="sbm" onClick='submit();'>Войти</a> |
scuter,
читай мой первый пост, там написано, почему так нельзя. SelenIT, Я уже тоже склонился к этому решению. Просто было интересно, как можно было реализовать с ссылками :) |
Я тоже мучалься сделать субмит через ссылку, но нашел вот такое решение.
короче тут надобавить name . например name=super <form action="index.php" method="post" name="super"> а в самом нужном для нас вот так <a href=\"javascript:document.super.submit()\" >www.Mobi.Uz</a> у меня во всех броузерах работает! |
ответ
а вообще
правильнее было бы так если у формы можно поставить id например <form id="test"> .... .... <a href=# onclick="document.getElementById('test').submit()" >отправить</a> </form> причем ссылку эту можно ставить хоть где в рамках документа необязательно ее вхождение в <form></form>, да и сам onclik можно прописать не только к любой ссылке а вообще к любому элементу страницы. |
Цитата:
|
Примерно так.
<form action=' ' method='post' enctype='multipart/form-data'>
<input type='hidden' name='id' value='$this->note_id'> <input type='hidden' name='delete_message' value=' '> <a href='#' onClick='submit()'>Удалить</a> </form> |
я так сделал
#hmenuinput:hover { background-color: #91A2FF; } #hmenuinput { background-color: #577EFF; border: 0px; display: block; float:left; color: #fff; font-size: 12px; line-height: 16px; padding: 23px 15px 5px 15px; text-decoration: none; <form method="POST" action="/?index"><INPUT type="hidden" name="exit" value="exit"><input id="hmenuinput" type="submit" value="Сохранить и выйти"></form> внешний вид можно сделать любой |
легко побеждается 2мя сопсобами
<form action="" method="GET|POST"> <input ... /> <input ... /> <a href="" onClick="this.parentNode.submit(); return false;">Submit</a> </form>или
<form action="" method="GET|POST" id="form_ID">
<input ... />
<input ... />
</form>
<a href="" onClick="document.getElementById('form_ID').submit(); return false;">Submit</a>
если сабмит нужен за пределами формыобратите внимание на return false, без него, естественно, это просто переход по ссылке IE9, Chrome, FF3.6, Opera 11 - tested OK |
а можно пример ссылки, находящейся за пределами формы? И зачем делать ссылкой внутри формы, если можно использовать submit? И еще, вместо this.parentNode можно использовать this.form
|
Если ссылка лежит внутри form, то
function submit( link ){
var form = link.parentNode;
while ( form && form.nodeName.toLowerCase() = ! "from" ) {
form = link.parentNode;
}
if ( form ) { form.submit(); }
}
<form>
<div>
<a href="javascript:;" onclick="submit(this)">Submit</a>
</div>
</form>
Если ссылка вне формы, можно использовать якорь, как указатель на форму:
function submit( link ){
var form = document.getElementById( link.getAttribute("href").replace(/^.*#/, "") );
if ( form ) {
form.submit();
}
return false;
}
<a href="#myForm" onclick="return submit(this);">Submit</a> <form id="myForm">...</form> Но лучше всего использовать: <button type="submit">Submit</button> |
лучше всего объяснять, почему что лучше, и читать, что другие пишут ;)
|
Есть вот такой код. Нужно переработать в ссылку...
// the send button
echo "\n".'<tr><td colspan="2" class="fc_button">';
echo '<input type="submit" name="send_button" '.$send_button_state.' value="'.JText::_('COM_FLEXICONTACT_SEND_BUTTON').'" />';
echo '</td></tr>';
echo '</table>';
Помогите в php/html я не очень! Очень надеюсь на помощь, заранее спасибо! :help: .JText::_('COM_FLEXICONTACT_SEND_BUTTON').' собственно тут текстовая строка из языкового файла |
Что-то перепробовал все здесь описаное, ничего не подходит:(
Имеется форма с двумя кнопками: <form method="POST" action="index.php"> <p><input type="submit" value="Редактировать" name="myblogs_edit"> <input type="submit" value="Удалить" name="myblogs_delete"></p> </form> Нажатие кнопки я "ловлю" в index.php:
if (isset($_POST['myblogs_delete']) {..мой код..}
.....
if (isset($_POST['myblogs_edit']) {..мой код..}
.....
С кнопками работает все Ок. Как заменить кнопки на ссылки, так чтоб кнопок совсем не было, а возможно и формы(хотя последнее наверное не получится)? Ведь по сути дела мне надо всего лишь установить переменную $_POST['myblogs_delete'] или $_POST['myblogs_edit'] в зависимости, что было нажато... вариант который приводился здесь: <a href="javascript:document[\'myform\'].submit();" >Удалить</a> <a href="javascript:document[\'myform\'].submit();" >Редактировать</a> не подходит по причине того, что непонятно какой именно submit был нажат. Но даже если бы кнопка Submit была одна, все равно выражение:
if (isset($_POST['myblogs_delete']) {....}
не сработало, т.к. 'myblogs_delete' ни как не передается.В php я могу передать любую переменную методом POST (даже несуществующую в форме), а как такое же сделать в javascript? Вопрос снят.... Несколько submit-ов реализовал разными формами... Любую переменную post из формы можно установить <input type="hidden".... |
Цитата:
<a href='javascript://' name="sbm" onClick='submit();'>Войти</a> сама по себе неправильная. Если уж и впихивать в параметр"href" ссылку на JS, то в таком виде: <a href='javascript:submit();' name="sbm">Войти</a> либо, как советовали другие: <a href='#' name="sbm" onClick='submit();'>Войти</a> Хотя, лично я не любитель использования решёток в ссылках, ради события onClick, не говоря уже о том, что ради onClick я использую любые другие способы, зачастую это div, так как у меня в основном только они в коде присутствуют. Я тег <a> использую сугубо ради ссылок. Поэтому я нашёл такой вариант, вполне себе работоспособный: <form> ... <div class="my_class" onClick="submit();">название кнопки</div> </form> И всё окей! Стилями задаёшь внешний вид так называемой кнопки, и при нажатии на неё форма срабатывает, и работает это даже если на странице куча форм, благодаря тому что элемент находится внутри формы. :) |
Ох сколько тут чудаков собралось ))
Любители придумывать себе трудности ))) Нахрена все эти пляски, когда есть <button type="submit">, который сабмитит форму без всяких яваскриптов ??? |
Цитата:
|
intro, я уже устал повторять что проблемы верстки должны решаться через html и css, а не JS.:cray:
Во-первых, я дико сомневаюсь что все собравшиеся тут люди решают именно описанную тобой проблему :D . Почему-то я работал с десятками заказчиков, но ни один не пожаловался на эту проблемку ) Во-вторых, все решается дополнительным html-элементом:
<!DOCTYPE html>
<style>
button {
background: #fc0;
border: 0 none;
cursor: pointer;
outline: none;
vertical-align: top;
padding: 5px;
}
button span {
position: relative;
top: 0;
left: 0;
border: 0;
}
</style>
<button type="submit"><span>I'm a button</span></button>
Короче, люди, вы странные )) |
Цитата:
Ну и с решением onclick="submit()" тоже молодец :victory: Работает оно потому-что обработчики событий тех элементов, которые находятся внутри <form>, дополнительно оборачиваются в «with» блок:
with (form) {
submit() // будет вызван form.submit()
}
|
danik.js, я проблему вёрстки решаю через css и html. Просто использую другие элементы, к которым просто нужно привязать JS. Это раз. Второе: тема была создана именно по этому вопросу, значит ещё кого-то волнует он, вот я и ответил.
И третье - я пробовал твой вариант, да он не подошёл. :) В общем итог: на вкус и цвет товарища нет. Вариант использования JS в качестве сабмита зря не существует. И он никак не портит код. Вообще! У каждого свои методы. :) P.S.: я говорил про эффект нажатия, когда наводишь на кнопку и нажимаешь на неё. Так-то с ней всё нормально. Я пользовался тем методом, что ты предложил, но проблема с эффектом нажатия на некоторых браузерах осталась. Пришлось воспользоваться DIV-ом. :) |
Ну и нафига? Нафига ты сказал что это где-то не работает, но не сказал в каких браузерах именно? ПОЧЕМУ? Я вот проверил проблемные IE8-10 и оперу-старушку. Вроде ок. Вобще, я сам не использовал это, ибо как уже писал выше - мои заказчики не страдали ерундой.
|
Цитата:
|
Цитата:
Действительно, фигово я проверял. Вот исправленный вариант:
<!DOCTYPE html>
<style>
button {
background: #fc0;
border: 0 none;
cursor: pointer;
outline: none;
vertical-align: top;
padding: 0;
}
button span {
position: relative;
top: 0;
left: 0;
border: 0;
padding: 5px;
display: inline-block;
}
</style>
<button type="submit"><span>I'm a button</span></button>
Цитата:
|
Цитата:
А опера не является некоторым браузером? Ладно, забыли. Это уже философия пошла. :) Цитата:
Правда <div class="my_style" onClick="submit();"> это не то самое место. Через одно место, это когда для сабмита пишется новая функция, которая ищет элемент по имени, или id и вызывает событие onClick на каком-то эелементе, который в свою очередь запускает сабмит. Да да! Я и такое встречал.:yes: Но всё же - ТС просил помочь с вызовом сабмита через тег <a> с помощью JS. Я ответил. Задача решена, не так ли? :) |
intro,
danik.js, если нетрудно обьясните по кнопку и про див -- что за эффект нажатия - он должен быть или нет? куда смотреть чтоб почувствовать разницу ))) |
Цитата:
|
Цитата:
Цитата:
<button type="submit">Кнопка</button> или <input type="submit" value="Кнопка" /> Эта кнопка отправляет данные формы на сервер для обработки php-скрипта. ТС задал вопрос как её можно заменить, например тегом <a>. Лично я её заменяю такой конструкцией: <div class="my_class" onClick="submit();">Кнопка</div> |
Цитата:
|
Цитата:
<!DOCTYPE html>
<style>
button {
background: #fc0;
border: 0 none;
cursor: pointer;
outline: none;
vertical-align: top;
padding: 5px;
}
button span {
position: relative;
top: 0;
left: 0;
border: 0;
}
</style>
<button type="submit"><span>I'm a button</span></button>
а стало:
<!DOCTYPE html>
<style>
button {
background: #fc0;
border: 0 none;
cursor: pointer;
outline: none;
vertical-align: top;
padding: 0;
}
button span {
position: relative;
top: 0;
left: 0;
border: 0;
padding: 5px;
display: inline-block;
}
</style>
<button type="submit"><span>I'm a button</span></button>
В общем, он в стиле
button span { }
добавил две строки padding: 5px; display: inline-block; |
Цитата:
Цитата:
|
Цитата:
<style>
.my_class{
display:block;
position:relative;
float:left;
width:100px;
height:35px;
line-height:35px;
margin:0;
padding:0;
overflow:hidden;
background:#1e1e1e;
text-align:center;
border:2px solid rgba(179,179,179,0.5);
box-shadow:inset 0 0 10px 3px #000;
color:#fff;
cursor:pointer;
font-family:Tahoma, Geneva, sans-serif;
font-size: 12px;
}
.my_class:hover{
background:#424242;
}
</style>
<div class="my_class" onClick="submit();">Жмакай</div>
Предупрежу - при нажатии ничего не происходит - формы нету. :) |
intro,
не мучайтесь я всёравно непонял что я должен увидеть единственно что заметил у вас кнопка чёрная у danik.js, э ... светлее короче. |
| Часовой пояс GMT +3, время: 01:22. |