Как отправить форму, используя JavaScript?

190

У меня есть форма с идентификатором, theFormкоторый имеет следующий div с кнопкой отправки внутри:

<div id="placeOrder" 
     style="text-align: right; width: 100%; background-color: white;">
    <button type="submit" 
            class='input_submit' 
            style="margin-right: 15px;" 
            onClick="placeOrder()">Place Order
    </button>
</div>

При нажатии placeOrder()вызывается функция . Функция изменяет innerHTML вышеупомянутого div, чтобы быть "обработка ..." (таким образом, кнопка отправки теперь исчезла).

Код выше работает, но теперь проблема в том, что я не могу получить форму для отправки! Я попытался поместить это в placeOrder()функцию:

document.theForm.submit();

Но это не работает.

Как я могу получить форму для отправки?

javascript

— Nate
источник

3

Я так понимаю, у вас есть <form>тег где-то на вашей странице.

— Джастин808

Я не вижу никакой <формы> в коде.

— Dotoree

1

что вы подразумеваете под: функция изменяет innerHTML вышеприведенного div на «обработка ...» (так что кнопка отправки теперь пропала). и не могли бы вы поделиться этой логикой? Кстати, если у вас есть кнопка отправки (где-то внизу с именем = submit), функция theform.submit () не будет работать. Пожалуйста, уточните свой вопрос, добавив тег <form>, который есть в вашем коде. Вы можете использовать jsfiddle.net

— sakhunzai

5

... если у вас есть кнопка отправки (где-то внизу с именем = отправить) ... Это решило мою проблему! Это было <input type = "button" name = "submit" ..., но все же блокировало JavaScript-код от отправки формы.

— Николай Иванов

136

Установите nameатрибут вашей формы, "theForm"и ваш код будет работать.

— Эндрю Хэйр
источник

14

Некоторым это может показаться супер-очевидным, но у меня была кнопка с именем и идентификатором «submit», и я document.theForm.submit()сообщил об ошибке. Как только я переименовал свою кнопку, код работал отлично.

— Джонатан

1

@Jonathan Какое у тебя имя кнопки? Поскольку в соответствии с api.jquery.com/submit дочерние элементы формы не должны использовать входные имена или идентификаторы, которые конфликтуют со свойствами формы.

— Кейа

106

Ты можешь использовать...

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

... но не заменяйте innerHTML. Вы можете скрыть форму, а затем вставить обработку ... span которая появится на своем месте.

var form = document.getElementById('theForm');

form.style.display = 'none';

var processing = document.createElement('span');

processing.appendChild(document.createTextNode('processing ...'));

form.parentNode.insertBefore(processing, form);

— Алекс
источник

Как вы скажете, куда отправить форму? Например, в моем случае я хочу, чтобы контент

— отправлялся

@Imray Возможно, вы захотите, чтобы серверный код сделал это для вас.

— Алекс

@CodyBugstein устанавливает action="/{controller}/{action-method}" method="post"атрибуты формы, которую вы пытаетесь опубликовать.

— Барнс

2

как моя форма имя printoffersForm, а также идентификатор тот же. document.getElementById('printoffersForm').submit();но я даю мне сообщение об ошибке, это не функция

— Madhuri Patel

@MadhuriPatel Может быть, у вас есть кнопка «Отправить», которая также называется «Отправить»? См ответ stackoverflow.com/questions/833032/...

— rbassett

37

Это прекрасно работает в моем случае.

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

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

function formSubmit()
{
     document.getElementById("form1").submit();
}

— Чинтан Туммар
источник

это будет отправлять значения формы из inputтега?

— Симаначчи

@roy Да, он будет отправлять значения формы из входных тегов.

— Чинтан Туммар

2

@ChintanThummar, а затем вы можете обработать отправку формы, используя document.getElementById ("form1"). Onsubmit = function () {// Здесь вы можете использовать код Ajax для отправки формы // без обновления страницы}

— Shubham Kumar

Я не пробовал это, но это выглядит намного хуже, чем то, что я предоставил. Спасибо;)

— Чинтан Туммар

12

document.forms["name of your form"].submit();

или

document.getElementById("form id").submit();

Вы можете попробовать что-нибудь из этого .. это определенно будет работать ..

— Аруна
источник

5

Это старый пост, но я оставлю способ отправки формы без использования nameтега внутри формы:

HTML

<button type="submit" onClick="placeOrder(this.form)">Place Order</button>

JS

function placeOrder(form){
    form.submit();
}

Надеюсь, что это решение может помочь кому-то еще. TQ

— SkyClasher
источник

4

HTML

<!-- change id attribute to name  -->

<form method="post" action="yourUrl" name="theForm">
    <button onclick="placeOrder()">Place Order</button>
</form>

JavaScript

function placeOrder () {
    document.theForm.submit()
}

— Чандан Гупта
источник

4

Пожалуйста, добавьте некоторые объяснения к вашему ответу.

— Сампада

Это не улучшает качество ответов, которые уже даны.

— Рэнди

Это единственный ответ, который показывает имя формы в фактическом html для определения формы. Кроме того, это просто и понятно.

— Тим Берд

2

Если ваша форма не имеет идентификатора, но у нее есть имя класса, например theForm, вы можете использовать следующую инструкцию для ее отправки:

document.getElementsByClassName("theForm")[0].submit();

— Бимал Джа
источник

а как насчет других форм с тем же именем класса выше?

— Jack1987

0

Я придумал простое решение, используя простую форму, скрытую на моем веб-сайте, с той же информацией, что и пользователи, вошедшие в систему. Пример Если вы хотите, чтобы пользователь вошел в эту форму, вы можете добавить что-то вроде этого в форму ниже.

<input type="checkbox" name="autologin" id="autologin" />

насколько я знаю, я первый, кто скрыл форму и отправил ее, нажав на ссылку. Есть ссылка, отправляющая скрытую форму с информацией. Не на 100% безопасно, если вам не нравятся методы автоматического входа на ваш веб-сайт с паролями, которые находятся в скрытой текстовой области пароля формы ......

Итак, вот работа. Допустим, $siteidэто учетная запись и $sitepwпароль.

Сначала создайте форму в вашем php-скрипте, если вам не нравится html, используйте минимальные данные, а затем введите значение в скрытой форме. Я просто использую значение php и echo в любом месте, где я хочу, чтобы pref рядом с кнопкой формы, как вы не можете видеть его.

Форма PHP для печати

$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
    <input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
    <input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';

PHP и ссылка для отправки формы

<?php print $hidden_forum; ?>
<pre><a href="#forum" onClick="javascript: document.getElementById('alt_forum_login').submit();">Forum</a></pre>

— AgeofTalisman
источник

Правда, вам нужно отправить форму, но ссылка не появится в моем коде, извините, но сделайте onclick или href = javascript: document.getElementById ('alt_forum_login'). Submit ()

— AgeofTalisman

Вопрос о javascript, в php-коде вообще нет необходимости

— Shedokan,

0

Вы можете использовать приведенный ниже код для отправки формы с использованием Javascript;

document.getElementById('FormID').submit();

— Абхиджит Навгире
источник

-1

<html>
<body>

<p>Enter some text in the fields below, then press the "Submit form" button to submit the form.</p>

<form id="myForm" action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Submit form">
</form>

<script>
function myFunction() {
    document.getElementById("myForm").submit();
}
</script>

</body>
</html>

— Джей Нагар
источник

Можете ли вы поделиться правильным ответом, который содержит только соответствующую часть и некоторые объяснения в следующий раз?

— Нико Хаазе

Этот ответ может быть полезен для некоторых stackoverflow.com/a/54619085/7003760

— Майер Спитцер