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

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

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

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

alt text

Любые идеи?

Ответы

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

Просто стиль <input type="submit" class="linkButton" /> как это сработало для меня:

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

Ответ 4

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

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />

Ответ 5

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

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

или

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

плюс некоторый CSS

Ответ 6

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

Ответ 7

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

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

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

Таким образом, его можно решить, используя одну строку JavaScript, используя объект this, который ссылается на элемент, который щелкнут, который является дочерним элементом node формы, который должен быть отправлен. Итак, this.parentNode есть форма node. После этого он просто вызывает метод 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>

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

Заполненная форма

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

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

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

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

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

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