说我有:

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

<input type="submit" />

我如何在表单外提交那个提交按钮,我认为在HTML5中有一个提交的动作属性,但我不确定这是否完全跨浏览器,如果不是的话,有没有办法这样做?


当前回答

这工作很完美!;)

这可以使用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>

我希望它能像帮助我一样帮助别人。;)

其他回答

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

</form>

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

这对我来说很有用,为表单设置一个远程提交按钮。

我有一个问题,我试图从表格单元格元素隐藏表单,但仍然显示表单提交按钮。 问题是表单元素仍然占用了额外的空白空间,使得表格单元格的格式看起来很奇怪。 display:none和visibility:hidden属性不起作用,因为它也会隐藏提交按钮,因为它包含在我试图隐藏的表单中。 简单的答案是使用CSS将表单高度设置为几乎为零

So,

CSS—

    #formID {height:4px;}

为我工作。

一个对我很有效的解决方案,在这里仍然没有。它需要在<表单>中有一个视觉上隐藏的<submit>或<input type="submit">元素,并在其外部有一个相关的<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>

现在,该链接允许您通过单击<label>元素来“单击”表单<submit>元素。

如果你会使用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通过点击“Fake Submit”按钮提交表单。希望能有所帮助。

在HTML5中,有form属性。基本上

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

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