Надішліть форму за допомогою кнопки поза тегом <form>

Скажіть, у мене є:

<form method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" />

Як я можу надсилати цю форму за допомогою кнопки для надсилання поза формою, я думаю, що в HTML5 є атрибут дії для надсилання, але я не впевнений, що це повністю перехресний веб-переглядач, і чи немає його в будь-якому випадку зробити це?

Оновлення: у сучасних браузерах ви можете використовувати formатрибут для цього .

Наскільки я знаю, ви не можете зробити це без javascript.

Ось що говорить специфікація

Елементи, що використовуються для створення елементів контролю, зазвичай з’являються всередині елемента FORM, але можуть також з’являтися поза декларацією елементів FORM, коли вони використовуються для побудови користувальницьких інтерфейсів. Про це йдеться в розділі про сутнісні події. Зауважте, що керування поза формою не може бути успішним.

Це мій сміливий

submitКнопка вважається контроль.

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

З коментарів

У мене є область налаштувань з декількома вкладками з кнопкою для оновлення всіх, оскільки дизайн її кнопки буде поза формою.

Чому б не розмістити inputвнутрішню форму, а використовувати CSS, щоб розташувати її в іншому місці сторінки?

У HTML5 є атрибут форми . В основному

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" />

Рішення, яке для мене чудово працює, тут все ще відсутнє. Для цього потрібно мати візуально прихований <submit>або <input type="submit">елемент, що знаходиться в ньому <form>, і пов'язаний з ним <label>елемент поза ним. Це виглядатиме так:

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form" tabindex="0">Submit</label>

Тепер це посилання дозволяє вам "клацнути" <submit>елемент форми , клацнувши по <label>елементу.

якщо ви можете використовувати jQuery, ви можете використовувати це

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

Отже, підсумком є ​​створення кнопки "Надіслати" та розміщення у формі реальної кнопки подання (звичайно, приховуючи її) та надсилання форми за допомогою jquery, натиснувши кнопку "Підроблена подача". Сподіваюся, це допомагає.

<form method="get" id="form1" action="something.php">

</form>

<!-- External button-->
<button type="submit" form="form1">Click me!</button>

Це працювало для мене, щоб мати кнопку віддаленої подачі форми.

Подібно до іншого рішення тут, з незначними змінами:

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

Спробуйте це:

<input type="submit" onclick="document.forms[0].submit();" />

Хоча я б запропонував додати форму idдо форми та отримати доступ замість цього document.forms[index].

Ви завжди можете використовувати jQuery:

<form id="myForm">
  <!-- form controls -->
</form>
<input type="submit" id="myButton">

<script>
$(document).ready(function () {
  $("#myButton").click(function () {
    $("#myForm").submit();
  });
});
</script>

Ось досить міцне рішення, яке включає найкращі ідеї на даний момент, а також включає моє вирішення проблеми, виділеної в Offerein. Не використовується JavaScript.

Якщо ви дбаєте про зворотну сумісність з IE (і навіть Edge 13), ви не можете використовувати цей form="your-form" атрибут .

Використовуйте стандартний вхід для подання з жодним відображенням та додайте мітку до нього поза формою:

<form id="your-form">
  <input type="submit" id="your-form-submit" style="display: none;">
</form>

Зверніть увагу на використання display: none;. Це навмисно. Використання .hiddenкласу bootstrap конфліктує з jQuery .show()і .hide()та з тих пір застаріло в Bootstrap 4.

Тепер просто додайте мітку для подання (в стилі завантажувального пристрою):

<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
  Submit
</label>

На відміну від інших рішень, я також використовую tabindex - встановлений на 0 - це означає, що ми зараз сумісні з клавіатурними вкладками. Додавання role="button"атрибуту надає йому стиль CSS cursor: pointer. Et voila. ( Дивіться цю скрипку ).

Це працює чудово! ;)

Це можна зробити за допомогою Ajax і з тим, що я називаю: "елемент дзеркала форми". Замість того, щоб надсилати форму з елементом зовні, ви можете створити підроблену форму. Попередня форма не потрібна.

<!-- This will do the trick -->
<div >
    <input id="mirror_element" type="text" name="your_input_name">
    <input type="button" value="Send Form">
</div>

Code ajax виглядає так:

    <script>
        ajax_form_mirror("#mirror_element", "your_file.php", "#your_element_response", "POST");

        function ajax_form_mirror(form, file, element, method) {
            $(document).ready(function() {
                // Ajax
                $(form).change(function() { // catch the forms submit event
                    $.ajax({                // create an AJAX call...
                        data: $(this).serialize(),      // get the form data
                        type: method,                   // GET or POST
                        url: file,                      // the file to call
                        success: function (response) {   // on success..
                        $(element).html(response);  // update the DIV
                        }
                    });

                    return false; // cancel original event to prevent form submitting
                });
            });
        }
   </script>

Це дуже корисно, якщо ви хочете надіслати деякі дані всередині іншої форми, не надсилаючи батьківську форму.

Цей код, ймовірно, може бути адаптований / оптимізований відповідно до потреби. Це прекрасно працює !! ;) Також працює, якщо ви хочете вибрати такий варіант:

<div>
    <select id="mirror_element" name="your_input_name">
        <option id="1" value="1">A</option>
        <option id="2" value="2">B</option>
        <option id="3" value="3">C</option>
        <option id="4" value="4">D</option>
    </select>
</div>

Я сподіваюся, що це допомогло комусь, як він мені допомогло. ;)

Можливо, це може спрацювати, але я не знаю, чи дійсний це HTML.

<form method="get" action="something.php">
    <input type="text" name="name" />
    <input id="submitButton" type="submit" class="hide-submit" />
</form>

<label for="submitButton">Submit</label>

У мене виникла проблема, коли я намагався приховати форму від елемента комірки таблиці, але все одно показую кнопку подання форм. Проблема полягала в тому, що елемент форми все ще займав зайве порожнє місце, завдяки чому формат комірки таблиці виглядав дивно. Дисплей: жоден та видимість: приховані атрибути не працювали, оскільки він також приховував кнопку подання, оскільки містився у формі, яку я намагався приховати. Проста відповідь полягала в тому, щоб встановити висоту форм майже нічого, використовуючи CSS

Тому,

CSS -

    #formID {height:4px;}

працював на мене.

Я використовував цей спосіб, і люб'язному він сподобався, він перевіряє форму перед тим, як подати також сумісний із safari / google. немає jquery nn

        <module-body>
            <form id="testform" method="post">
                <label>Input Title</label>
                <input name="named1" placeholder="Placeholder"  title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>
            </form>
        </module-body>
        <module-footer>
            <input type="button" onclick='if (document.querySelector("#testform").reportValidity()) { document.querySelector("#testform").submit(); }' value="Submit">
            <input type="button" value="Reset">
        </module-footer>