Как отправить форму с JavaScript, нажав на ссылку?

Question

Как отправить форму с JavaScript, нажав на ссылку?

вместо кнопки отправки у меня есть ссылка:

<form>



  <a href="#"> submit </a>



</form>

могу ли я заставить его отправить форму при нажатии?

708 8

javascript html forms hyperlink

8 ответов:

Comments

Ничего не найдено.

ComFreek · Accepted Answer · 2017-05-23 15:18:04

лучший способ

лучший способ-вставить соответствующий входной тег:
<input type="submit" value="submit" />
лучший способ JS
<form id="form-id">
  <button id="your-id">submit</button>
</form>
var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});
заключите последний код JavaScript с помощью DOMContentLoaded событие (выбираем только load на обратной совместимости) если вы еще не сделали этого:
window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});
легкий, не рекомендуемый способ (прежний ответ)

добавить onclick атрибут к ссылке и id к форма:
<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>
все способы

какой бы способ вы ни выбрали, у вас есть вызов formObject.submit() в конце концов (где formObject является объектом DOM <form> tag).

вы также должны привязать такой обработчик событий, который вызывает formObject.submit(), поэтому он вызывается, когда пользователь нажимает определенную кнопку или ссылку. Есть два способа:
рекомендуется: привязать прослушиватель событий к DOM объект.
// 1. Acquire a reference to our <form>.
//    This can also be done by setting <form name="blub">:
//       var form = document.forms.blub;

var form = document.getElementById("form-id");


// 2. Get a reference to our preferred element (link/button, see below) and
//    add an event listener for the "click" event.
document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});
не рекомендуется: вставить встроенный JavaScript. Есть несколько причин, почему этот метод не рекомендуется. Одним из основных аргументов является то, что вы смешиваете разметку (HTML) со скриптами (JS). Код становится неорганизованным и довольно недостижимым.
<a href="#" onclick="document.getElementById('form-id').submit();">submit</a>

<button onclick="document.getElementById('form-id').submit();">submit</button>
теперь мы подошли к точке, в которой вы должны решить для элемента пользовательского интерфейса, который запускает submit() вызов.
на
<button>submit</button>
ссылка
<a href="#">submit</a>
примените вышеупомянутые методы для добавления прослушивателя событий.

Maurice · Accepted Answer · 2012-08-23 15:02:52

Если вы используете jQuery и потребуется встроенное решение, это будет работать очень хорошо;
<a href="#" onclick="$(this).closest('form').submit();">submit form</a>
кроме того, вы можете заменить
<a href="#">text</a>
С
<a href="javascript:void(0);">text</a>
, Так что пользователь не прокручивается в верхней части страницы при нажатии на ссылку.

Darin Dimitrov · Accepted Answer · 2011-07-23 12:36:45

вы можете дать форму и ссылку некоторые идентификаторы, а затем Подписаться на onclick событие ссылки и submit форма:
<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>
и затем:
window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};
Я бы рекомендовал вам использовать кнопку отправки для отправки форм, поскольку она уважает семантику разметки, и она будет работать даже для пользователей с отключенным javascript.

Darren Murphy · Accepted Answer · 2017-10-02 19:31:12

HTML & CSS - нет решения Javascript

сделайте вашу кнопку похожей на ссылку Bootstrap

HTML:
<form>
    <button class="btn-link">Submit</button>
</form>
CSS:
.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

chris · Accepted Answer · 2014-04-30 19:48:50

это хорошо работает без каких-либо специальных функций, необходимых. Гораздо проще писать с php, а также. <input onclick="this.form.submit()"/>

ChintanThummar · Accepted Answer · 2014-07-19 10:04:59

document.getElementById("theForm").submit();
Он отлично работает в моем случае.

вы можете использовать его в функцию также как,
function submitForm()
{
     document.getElementById("theForm").submit();
} 
установите" theForm " в качестве идентификатора формы. Дело сделано.

iamwave007 · Accepted Answer · 2015-02-25 09:21:28

вот лучшее решение вашего вопроса: внутри формы у вас есть такой код:
<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>
в файле CSS, сделайте это:
button{
  display: none;
}
в JS вы делаете это:
$("a").click(function(){
   $("button").trigger("click");
})
вот так.

Shashank · Accepted Answer · 2014-10-17 11:38:43

<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>