Используйте обычную ссылку для отправки формы - PullRequest
Новая
       22

Используйте обычную ссылку для отправки формы

113 голосов
/ 26 ноября 2010

Я хочу отправить форму. Но я не собираюсь использовать основной способ ввода кнопки ввода с типом отправки, а ссылкой a .

На рисунке ниже показано почему. Я использую ссылки на изображения, чтобы сохранить / отправить форму. Поскольку у меня есть стандартная разметка CSS для ссылок на изображения, я не хочу использовать кнопки ввода ввода.

Я пытался применить onClick = "document.formName.submit ()" к элементу a, но я бы предпочел метод html.

alt text

Есть идеи?

Ответы [ 7 ]

150 голосов
/ 26 ноября 2010

Два пути.Либо создайте кнопку и стилизуйте ее так, чтобы она выглядела как ссылка с css, либо создайте ссылку и используйте onclick="form.submit();".

82 голосов
/ 26 ноября 2010

На самом деле вы не можете сделать это без какой-либо формы сценариев, насколько мне известно. 

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

Пример из Здесь .

25 голосов
/ 24 апреля 2013

Просто стилизация input type="submit", как это работает для меня: 

.linkButton { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}
<input type="submit" class="linkButton" />

Протестировано в Chrome, IE 7-9, Firefox

10 голосов
/ 26 ноября 2010

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

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />
4 голосов
/ 26 ноября 2010

использование: 

<input type="image" src=".."/>

или: 

<button type="send"><img src=".."/> + any html code</button>

плюс немного CSS

0 голосов
/ 23 ноября 2017

вы можете использовать OnClick = "document.getElementById ('formID_NOT_NAME'). SUBMIT ()"

0 голосов
/ 15 августа 2017

Определенно, не существует решения с использованием чистого HTML для отправки формы с тегом ссылки (a). Стандартный HTML принимает только кнопки или изображения. Как говорили некоторые другие соавторы, можно смоделировать появление ссылки, используя кнопку, но я думаю, что это не цель вопроса.

ИМХО, я считаю, что предложенное и принятое решение не работает.

Я проверил его в форме, и браузер не нашел ссылку на форму.

Таким образом, можно решить эту проблему с помощью одной строки JavaScript, используя объект this, который ссылается на элемент, по которому щелкают, который является дочерним узлом формы, который необходимо отправить. Итак, this.parentNode - это узел формы. После того, как он просто вызывает submit() метод в этой форме. Нет необходимости исследовать весь документ, чтобы найти правильную форму. 

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

Предположим, что я вхожу со своим именем:

Filled form

Я использовал get в атрибуте метода формы, потому что можно увидеть правильные параметры в URL на загруженной странице после отправки. 

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

Это решение, очевидно, применимо к любому тегу, который принимает событие onclick или подобное событие.

this является отличным выбором для восстановления контекста вместе с event переменной (доступной во всех основных браузерах и IE9 и далее), которую можно использовать напрямую или передавать в качестве аргумента функции.

В этом случае замените строку тегом a на строку ниже, используя свойство target, которое указывает элемент, запустивший событие. 

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>
...