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

Question

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

<form>

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

</form>

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

Answer 1

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

Лучший способ - вставить соответствующий тег ввода:

<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>).

Вы также должны привязать такой обработчик событий, который вызывает 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 ().

1. Кнопка

   <button>submit</button>
   

2. Ссылка

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

Примените вышеупомянутые методы для добавления прослушивателя событий.

Answer 2

Если вы используете jQuery и вам потребуется встроенное решение, это будет работать очень хорошо;

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

Также вы можете заменить

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

на

<a href="javascript:void(0);">text</a>

, поэтому пользователь не прокручивает верхнюю часть вашей страницы при нажатии на ссылку.

Answer 3

Вы можете присвоить форме и ссылке несколько идентификаторов, а затем подписаться на событие 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.

Answer 4

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;

}

Answer 5

document.getElementById("theForm").submit();

В моем случае это прекрасно работает.

Вы можете использовать его в функции также, как,

function submitForm()
{
     document.getElementById("theForm").submit();
} 

Установите "theForm" в качестве идентификатора формы. Это сделано.

Answer 6

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

Answer 7

вот лучшее решение вашего вопроса: внутри формы у вас есть этот код:

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

в файле CSS, сделайте это:

button{
  display: none;
}

в JS вы делаете это:

$("a").click(function(){
   $("button").trigger("click");
})

Вот, пожалуйста.

Answer 8

<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>