Question

这是我的HTML：

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body onload="load()">
       <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
       <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>

       <div id="container">
           <form id="inputFrm" action="/hello" method="post">
               <input name="value" id="myValue" value=1000 size=8 />
               <input name="symbol" id="mySymbol" size=10 />
               <input type="submit">
               <input type="button" id="mySubmitBtn" value="MySubmit">
               </table>
           </form>
       </div>
       <script>
           $(document).ready(function() {
               $("#mySubmitBtn").click(function ()
               {
                   var value =document.forms["inputFrm"]["myValue"].value;
                   var symbol =document.forms["inputFrm"]["mySymbol"].value;

                   alert(value)
                   alert(symbol)

                   $("#inputFrm").submit();
               });
           });
       </script>
   </body>
</html>

此HTML代码代表另一个页面打开的单独窗口。例如，假设服务器返回此HTML作为对“新”请求的响应：

window.open('/new')

在此窗口中，jQuery提交函数调用不提交表单。

我在这里做错了什么？

我查看了类似的帖子，但未找到此特定代码的答案。

Answer 1

对于id选择器，您需要#作为id的前缀。您可以在 Category: Selectors 中阅读有关选择器的更多信息。

Live Demo

更改

$("inputFrm").submit();

到

$("#inputFrm").submit();

您还需要设置 URL 操作代码的form，假设您要发布到hello.php：

<form id="inputFrm" action="hello.php" method="post">

Answer 2

@Adil的回答解决了您的表单提交问题，但您还有另一个问题。您将Javascript附加到按钮单击而不是表单的提交事件。问题是如果用户按下回车键提交表单，您的Javascript代码将无法执行。

相反，您应该绑定到表单的.submit()事件：

        $('#inputFrm').submit(function(){

            var value =document.forms["inputFrm"]["myValue"].value;      
            var symbol =document.forms["inputFrm"]["mySymbol"].value;              

            alert(value)
            alert(symbol)

            return false;           
        });

如果您想阻止表单提交，也不要忘记return false。

Answer 3

只是做 -

$("form#inputFrm").submit();

Answer 4

当用户尝试提交表单时，会将提交事件发送给元素。它只能附加到元素上。

HTML：

<form action="yourfile.html">
    <input type="text" value="Hello there" />
    <input type="submit" value="Go" />
</form>

jQuery的：

$('form').submit(function() {
    alert('Handler for .submit() called.');
    return false;
});

http://api.jquery.com/submit/

其他方式是做Ajax：

HTML

<form>
    <input type="text" value="" name="fname" />
    <input type="text" value="" name="lname" />
    <input type="submit" value="Go" />
</form>

jQuery的：

$('form').submit(function() {
    $.ajax({
        url     : 'email.php',
        type    : 'POST',
        data    : $(this).serialize(),
        success : function (serverResponse) { /*success*/ },
        error   : function (jqXHR, textStatus, errorThrown) { /*handler errors*/ }
    });
});

使用jQuery提交表单无法在弹出窗口中工作

4 个答案:

Live Demo

HTML

jQuery的：