Скажем, у меня есть:
<form method="get" action="something.php">
<input type="text" name="name" />
</form>
<input type="submit" />
Как я могу отправить эту форму с этой кнопкой отправки вне формы, я думаю, что в HTML5 это атрибут действия для отправки, но я не уверен, что если это полностью кросс-браузер, и если это не так, там все равно сделать это?
Обновление: В современных браузерах вы можете использовать для этого атрибут form.
Насколько я знаю, вы не можете сделать это без JavaScript.
Вот что говорит спецификация
Элементы, используемые для создания элементов управления, обычно появляются внутри ФОРМЫ элемент, но может также появляться за пределами объявления элемента 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>
Теперь эта ссылка позволяет 'click' элементу формы <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>
Итак, в нижней строке нужно создать кнопку, например Submit, и поместить настоящую кнопку отправки в форму (конечно, скрывая ее), и отправить форму через jquery, нажав кнопку "Поддельный Submit". Надеюсь, что это поможет.
<form method="get" id="form1" action="something.php">
</form>
<!-- External button-->
<button type="submit" form="form1">Click me!</button>
Это сработало для меня, чтобы иметь удаленную кнопку отправки для формы.
Попробуйте следующее:
<input type="submit" onclick="document.forms[0].submit();" />
Хотя я бы предложил добавить id в форму и получить доступ к ней вместо document.forms[index].
Аналогично другому решению, с незначительными изменениями:
<form method="METHOD" id="FORMID">
<!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>
Вы всегда можете использовать jQuery:
<form id="myForm">
<!-- form controls -->
</form>
<input type="submit" id="myButton">
<script>
$(document).ready(function () {
$("#myButton").click(function () {
$("#myForm").submit();
});
});
</script>
Здесь довольно солидное решение, которое включает в себя лучшие идеи, а также мое решение проблемы, выделенной Offerein's. Javascript не используется.
Если вам нужна обратная совместимость с IE (и даже Edge 13), вы не можете использовать атрибут form="your-form" .
Используйте стандартный ввод отправки с отображением none и добавьте ярлык для него вне формы:
<form id="your-form">
<input type="submit" id="your-form-submit" style="display: none;">
</form>
Обратите внимание на использование display: none;. Это намеренно. Использование класса bootstrap .hidden конфликтует с jQuery .show() и .hide() и с тех пор устарело в Bootstrap 4.
Теперь просто добавьте ярлык для своей submit (стиль для начальной загрузки):
<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
Submit
</label>
В отличие от других решений, я также использую tabindex - установить в 0 - это означает, что мы теперь совместимы с клавиатурной табуляцией. Добавление атрибута role="button" дает стиль CSS cursor: pointer. И вуаля. (Посмотрите эту скрипту).
Это отлично работает! ;)
Это можно сделать с помощью Ajax и с помощью того, что я называю "элементом зеркала формы". Вместо того, чтобы отправить форму с внешним элементом, вы можете создать поддельную форму. Предыдущая форма не нужна.
<!-- This will do the trick -->
<div >
<input id="mirror_element" type="text" name="your_input_name">
<input type="button" value="Send Form">
</div>
Код 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. нет вопросов.
<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>