Як подати форму за допомогою 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()викликається. Функція змінює InternalHTML вищевказаного div на "обробку ..." (тому кнопка "Відправити" тепер відсутня).

Наведений вище код працює, але тепер проблема полягає в тому, що я не можу отримати форму для подання! Я спробував поставити це у placeOrder()функцію:

document.theForm.submit();

Але це не працює.

Як я можу отримати форму для подання?

javascript

— Нейт
джерело

3

Я вважаю, що ви маєте <form>тег десь на своїй сторінці.

— Justin808

Я не бачу <form> у коді.

— dotoree

1

що ви маєте на увазі під цим: Функція змінює внутрішнійHTML вищевказаного діла на "обробку ..." (тому кнопка подання відсутня). і ти не проти поділитися цією логікою. До речі, якщо у вас є кнопка подання (десь вниз з ім'ям = подати), функція theform.submit () не буде працювати. Будь ласка, уточнюйте своє запитання, додавши тег <form> як у своєму коді. Ви можете скористатись jsfiddle.net

— sakhunzai

5

... якщо у вас є кнопка подання (десь вниз з ім'ям = подати) ... Це вирішило мою проблему! Це було <input type = "button" name = "submit" ..., але все ще блокувало javascript від надсилання форми.

— Микола Іванов

136

Встановіть nameатрибут вашої форми "theForm"і ваш код буде працювати.

— Андрій Заєць
джерело

14

Для когось це може здатися надто очевидним, але у мене була кнопка з ім'ям та ідентифікатором "подати", і document.theForm.submit()повідомили про помилку. Після того, як я перейменував свою кнопку, код справно працював.

— Джонатан

1

@Jonathan Як називається кнопка у вас? Coz, згідно з 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);

— алекс
джерело

Як сказати, куди надсилати форму? Наприклад, у моєму випадку я хочу, щоб вміст, надісланий мені електронною поштою,

— CodyBugstein

@Imray Ви, мабуть, захочете, щоб код із боку сервера робив це за вас.

— alex

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

— barnes

2

як моє ім'я форми - printoffersForm, так і id - те саме. document.getElementById('printoffersForm').submit();але я дає мені помилку подати - це не функція

— Madhuri Patel

@MadhuriPatel Можливо, у вас є кнопка для надсилання також названа подати? Див відповідь stackoverflow.com/questions/833032 / ...

— rbassett

37

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

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

Крім того, ви можете використовувати його у функції, як показано нижче:

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

— Chintan Thummar
джерело

чи надішле це значення форми з inputтегу?

— simadoors

@roy Так, він надсилатиме значення форми з вхідних тегів.

— Chintan Thummar

2

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

— Shubham Kumar

Я цього не пробував, але це виглядає тісніше, ніж те, що я надав. Спасибі;)

— Chintan Thummar

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 і лунає в будь-якому місці, де я хочу, щоб при натисканні кнопки форми було попередньо, як ви не бачите.

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 та Link для надсилання форми

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

Питання щодо 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

— Mayer Spitzer