捕获表单使用jQuery和.submit提交 [英] Capturing a form submit with jquery and .submit

问题描述

我试图使用jQuery来捕获提交事件，然后将格式为JSON的表单元素发送到PHP页面。
虽然我有问题捕获提交，但我从 .click（）事件开始，但移动到 .submit（）

现在我有以下修剪过的代码。

 < form method =POSTid =login_form> 
< label>使用者名称：< / label> 
< input type =textname =usernameid =username/> 
< label>密码：< / label> 
< input type =passwordname =passwordid =password/> 
< input type =submitvalue =Submitname =submitclass =submitid =submit/> 
< / form> 
  

Javascript

  $（'＃login_form'）。submit（function（）{
 var data = $（＃login_form：input）。serializeArray（）; 
 alert（'Handler for .submit （）调用。'）; 
}）; 
  

解决方案

将代码包装在文档中并防止默认提交action：

  $（function（）{//简写document.ready函数
 $（'＃login_form'） .on（'submit'，function（e）{// use on if jQuery 1.7+ 
 e.preventDefault（）; //防止表单提交
 var data = $（＃login_form：input ）.serializeArray（）; 
 console.log（data）; //使用控制台进行调试，在Chrome中使用F12，不提示
}）; 
}）; 
  

I'm attempting to use jQuery to capture a submit event and then send the form elements formatted as JSON to a PHP page. I'm having issues capturing the submit though, I started with a .click() event but moved to the .submit() one instead.

I now have the following trimmed down code.

HTML

<form method="POST" id="login_form">
    <label>Username:</label>
    <input type="text" name="username" id="username"/>
    <label>Password:</label>
    <input type="password" name="password" id="password"/>
    <input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>

Javascript

$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
});

解决方案

Wrap the code in document ready and prevent the default submit action:

$(function() { //shorthand document.ready function
    $('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
        e.preventDefault();  //prevent form from submitting
        var data = $("#login_form :input").serializeArray();
        console.log(data); //use the console for debugging, F12 in Chrome, not alerts
    });
});

这篇关于捕获表单使用jQuery和.submit提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！