DEMO

Question

我有一张表格

<form action="search_name.php" id="header_search_form" method="POST">
    <div class="search_bar">
    <input id="search_box" autocomplete="off" type="text" name="search_box" maxlength="30" size="53" />

    <input  id="search_button"  type="submit" name="submit" value="submit"  />
    </div>
</form>

<button onclick="search()">search</button>

我还想使用表单外的按钮提交，我已经尝试了

function search(){
$('#header_search_form').submit();

}

但它没有按预期工作，我想在单击按钮时，按钮应该与单击表单内的输入提交按钮相同，包括设置$ _POST ['search_box']和直接到search_name.php

Answer 1

编辑： 不要用它来支持IE ...

使用FORM的form属性定位ID提交：

<button form="header_search_form">search</button>

DEMO

Answer 2

使用javascript：

document.forms[0].submit();

如果您的表单具有name属性，则可以使用该名称而不是数字索引：

document.forms['header_search_form'].submit();

如果它有一个id（就像你的问题一样），那么你不能使用forms数组，但你可以使用：

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

在任何一种情况下，你也可以通过JQuery来做，但你不需要。正如您所看到的，它只是一行简单的Javascript。

-edit -

如果您有HTML5文档，则可以使用A. Wolff的非JavaScript解决方案。但请记住检查浏览器兼容性。例如，IE不支持它，并且您的页面必须具有HTML文档类型。

-edit2 -

要结合这两种解决方案并使其与IE兼容，您可以执行以下操作：

添加表单和提交按钮，就像在HTML 5中一样：

<form action="search_name.php" id="header_search_form" method="POST">
</form>


<input type="submit" form="header_search_form" value="Click me">

然后添加一段Javascript，它将使用提交按钮的form属性来检测应提交的表单。

$(document).on('click', 'input[type="submit"]', function(event){
    $button =$(this);
    if (formId = $button.attr('form'))
    {
        event.preventDefault();
        document.getElementById(formId).submit();
    }
});

这将通过Javascript（和此实现中的JQuery）执行，与form属性在HTML5中默认应具有相同的行为，但这样它也可以在IE中工作，或者如果你有非-html5 doctype。

此代码段始终会覆盖该行为，但您也可以检测到浏览器，并在必要时仅覆盖它。也许它曾经是Modernizr中的一个功能，但是如果我理解正确的话，目前还不是这样。

演示：http://jsfiddle.net/v2E3g/2/

为了使它更具通用性，您可以eval（我知道），表单的onsubmit事件。通过Javascript提交时不会触发此事件，因此如果您有任何onsubmit事件（例如用于验证），那么您将不得不执行以下操作：

$(document).on('click', 'input[type="submit"]', function(event){
    var $button = $(this);
    if (formId = $button.attr('form'))
    {
        event.preventDefault();
        var form = document.getElementById(formId);
        var canSubmit = true;
        // Since submitting through Javascript won't trigger the onsubmit event,
        // it is forged.
        if ($(form).attr('onsubmit'))
        {
            canSubmit = eval('(function(){' + $(form).attr('onsubmit') + '}())');
        }

        if (canSubmit)
        {
            form.submit();
        }
    }
});

演示：http://jsfiddle.net/v2E3g/6/

Answer 3

试试这个

<script type="text/javascript">
function search(){
  $('#header_search_form')[0].submit();


}
</script>

Answer 4

$("#mybutton").click(function() {
    $("#header_search_form").submit();
});

DEMO

Answer 5

function search() {
    $('#search_button').trigger('click');
}

如何在表单外提交表单

5 个答案:

DEMO

DEMO