Как сделать отправку по ссылке ‹a href› ‹/a›?

У меня есть изображение, на котором ссылки на другую страницу с помощью <a href="..."> <img ...> </a>.

Как сделать так, чтобы сообщение было похоже на кнопку <input type="submit"...>?


javascript html form-submit url-link
person fmsf    schedule 08.11.2008    source источник

Ответы (9)


arrow_upward
34
arrow_downward 

<input type="image" name="your_image_name" src="your_image_url.png" />

При отправке формы будут отправлены значения your_image_name.x и your_image_name.y, которые являются координатами x и y позиции, в которой пользователь щелкнул изображение.

person Paige Ruten    schedule 08.11.2008

arrow_upward
118
arrow_downward

Более общий подход с использованием библиотеки JQuery closest () и submit () кнопки. Здесь вам не нужно указывать форму, которую вы хотите отправить, отправляет форму, в которой она находится.

<a href="#" onclick="$(this).closest('form').submit()">Submit Link</a>
person Paulius Zaliaduonis    schedule 03.11.2011
comment
хороший ответ, но может возникнуть озабоченность по поводу рекомендуемой практики ... stackoverflow.com/questions/1070760/ - person ken; 31.05.2014
comment
Просто убедитесь, что вы используете closest (), когда вам нужно двигаться вверх по DOM, и find (), когда вам нужно пройти вниз по DOM. - person yardpenalty.com; 08.04.2016
comment
Я бы добавил return false; в конце onclick, чтобы избежать прокрутки к началу страницы. - person Sébastien; 30.06.2016

arrow_upward
28
arrow_downward

Похоже, вы пытаетесь использовать изображение для отправки формы ... в этом случае используйте <input type="image" src="...">

Если вы действительно хотите использовать якорь, вам нужно использовать javascript:

<a href="#" onclick="document.forms['myFormName'].submit(); return false;">...</a>

person Greg    schedule 08.11.2008
comment
Оказывается, коряво из старого офиса MS все время был Грегом! - person Nick Painter; 23.06.2017

arrow_upward
9
arrow_downward

input type = image сделает это за вас.

person Tim Howland    schedule 08.11.2008

arrow_upward
7
arrow_downward

Не проверено / могло быть лучше:

<form action="page-you're-submitting-to.html" method="POST">
    <a href="#" onclick="document.forms[0].submit();return false;"><img src="whatever.jpg" /></a>
</form>
person Shawn    schedule 08.11.2008

arrow_upward
2
arrow_downward

Что может быть удобным дополнением к этому, так это возможность изменить URL-адрес сообщения с дополнительной кнопки, чтобы вы могли отправлять сообщения на разные URL-адреса с помощью разных кнопок. Этого можно добиться, задав свойство формы "действие". Вот код для этого при использовании jQuery:

$('#[href button name]').click(function(e) {
    e.preventDefault();
    $('#[form name]').attr('action', 'alternateurl.php');
    $('#[form name]').submit();
});

Атрибут action имеет некоторые проблемы со старыми версиями jQuery, но с последней вам будет хорошо.

person Grit    schedule 26.02.2013
comment
$ ('# [имя формы]') должно быть $ ('форма [имя = имя формы]'); а # [href] должно быть совершенно другим - person Rob; 03.08.2016

arrow_upward
1
arrow_downward

Что-то похоже на эту страницу?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BSO Communication</title>

<style type="text/css">
.submit {
    border : 0;
    background : url(ok.gif) left top no-repeat;
    height : 24px;
    width : 24px;
    cursor : pointer;
    text-indent : -9999px;
}
html:first-child .submit {
    padding-left : 1000px;
}
</style>
<!--[if IE]>
<style type="text/css">
.submit {
    text-indent : 0;
    color : expression(this.value = '');
}
</style>
<![endif]-->
</head>

<body>
    <h1>Display input submit as image with CSS</h1>

    <p>Take a look at <a href="/2007/07/26/afficher-un-input-submit-comme-une-image/">the related article</a> (in french).</p>
    <form action="" method="get">
        <fieldset>
            <legend>Some form</legend>
            <p class="field">
                <label for="input">Some value</label>

                <input type="text" id="input" name="value" />
                <input type="submit" class="submit" />
            </p>
        </fieldset>
    </form>

    <hr />
    <p>This page is part of the <a href="http://www.bsohq.fr">BSO Communication blog</a>.</p>

</body>
</html>
person VonC    schedule 08.11.2008

arrow_upward
1
arrow_downward

Не забывайте элемент "BUTTON", который может обрабатывать еще немного HTML внутри ...

person Pablo Cabrera    schedule 10.11.2008

arrow_upward
0
arrow_downward

Мы все время заменяем кнопку отправки на это в формах:

<form method="post" action="whatever.asp">
<input type=...n

<input type="image" name="Submit" src="/graphics/continue.gif" align="middle" border="0" alt="Continue">
</form>

При нажатии на изображение отправляется форма. Надеюсь, это поможет!

person Kateriana    schedule 18.01.2013
comment
Отличается ли этот ответ от принятого? мы хотим избежать того, чтобы одни и те же вещи работали и на меня, и на ответы на SO. - person Michael Edenfield; 19.01.2013