Як подати форму з JavaScript, натиснувши посилання?

Замість кнопки надсилання у мене є посилання:

<form>

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

</form>

Чи можу я змусити його надіслати форму при натисканні на неї?

Найкращий спосіб

Найкращий спосіб - вставити відповідний тег введення:

<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()кінцевому підсумку маєте дзвінок (де formObjectDOM є <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>

Застосуйте вищезгадані методи, щоб додати слухача подій.

Якщо ви використовуєте jQuery і потребуєте вбудованого рішення, це буде дуже добре;

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

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

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

з

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

щоб користувач не прокручував верхню частину сторінки при натисканні на посилання.

Ви можете надати формі та посиланню деякі ідентифікатори, а потім підписатися на 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.

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;

}

це добре працює без будь-якої особливої ​​функції. Набагато простіше писати і php.<input onclick="this.form.submit()"/>

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

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

У моєму випадку це прекрасно працює.

ви можете використовувати його також у функції,

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

Встановіть "Форму" як ідентифікатор форми. Зроблено.

ось найкраще рішення вашого питання: всередині форми у вас є цей код:

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

у файлі CSS зробіть це:

button{
  display: none;
}

в JS ви робите це:

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

Ось так.