[英]jQuery submit/preventDefault/post
The Goal 目标
What I've Tried 我尝试过的
.post()
documentation with some influence from jQuery AJAX submit form . .post()
文档创建了相关的HTML和JS,并从jQuery AJAX提交表单产生了一些影响。 The Symptoms 症状
Theories 理论
.submit()
method is not attaching .submit()
方法未附加 preventDefault
directive within is not intercepting the traditional form submission preventDefault
指令未拦截传统的表单提交 HTML HTML
<form action="/echo/html/" id="form_edit_sensitivity" method="post" onsubmit="trimTextFields(this); return checkForm(this);" class="form-horizontal">
<div class="control-group">
<label for="p_sensitivity_type_id" class="control-label">Group</label>
<div class="controls">
<select name="p_sensitivity_type_id" size="1" title="Sensitivity Type" id="p_sensitivity_type_id">
<option value=""></option>
<option value="1">Politician</option>
<option value="2" selected="selected">Celebrity</option>
</select>
</div>
</div>
<div class="control-group">
<label for="p_expiration_dte" class="control-label">Expiration Date</label>
<div class="controls">
<input type="date" name="p_expiration_dte" id="p_expiration_dte" value="" data-datepicker-value="" min="1789-07-29" />
</div>
</div>
<div class="control-group">
<div class="controls">
<label for="p_super_sensitive" class="checkbox">
<input type="checkbox" id="p_super_sensitive" value="Y" name="p_super_sensitive">Feel like checking this box?</label>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="some_value" value="1">
<input type="hidden" name="data" value="<p>Text echoed back to request</p>">
<input type="submit" value="Submit" class="btn btn-primary">
<input type="reset" value="Reset" class="btn">
</div>
</form>
<div id="result">We want to load the results within this div</div>
JavaScript JavaScript的
var trimTextFields = function () {
alert('trim fields');
},
checkForm = function (incoming_form) {
alert('custom validation');
};
/* attach a submit handler to the form */
$('#form_edit_sensitivity').submit(function (event) {
/* stop form from submitting normally */
event.preventDefault();
confirm('we got this far');
/* get some values from elements on the page: */
var $form = $(this),
data = $form.serialize(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post(url, data);
/* Put the results in a div */
posting.done(function (data) {
var content = $(data).find('#summary');
$('#result').empty().append(content);
});
});
To paraphrase the immortal words of the "Deranged Sorority Girl" , I am about ready to C-Punt my computer over this one. 用“不知所措的悲伤女孩”那不朽的话来解释一下 ,我准备在这台计算机上用C-Punt打我的电脑。
Again, jsFiddle at http://jsfiddle.net/jhfrench/QjaTq/ 同样, jsFiddle位于http://jsfiddle.net/jhfrench/QjaTq/
var trimTextFields = function () {
alert('trim fields');
},
checkForm = function (incoming_form) {
alert('custom validation');
return true; // <-- NECESSARY BECAUSE YOU'RE RETURNING THIS IN "submit" EVENT
};
$(document).ready(function() // DOM is ready...
{
/* attach a submit handler to the form */
$('#form_edit_sensitivity').submit(function (event)
{
/* stop form from submitting normally */
event.preventDefault();
confirm('we got this far');
/* get some values from elements on the page: */
var $form = $(this),
data = $form.serialize(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post(url, data, function(response)
{
/* Put the results in a div */
var content = $(response).find('#summary');
$('#result').empty().append(content);
});
});
});
I don't know how you pan to use trimTextFields and checkForm (probably globally), but declare them inside $(document).ready() if you can. 我不知道如何平移使用trimTextFields和checkForm(可能是全局的),但是如果可以的话,请在$(document).ready()中声明它们。 Always try to avoid global variables.
始终尝试避免使用全局变量。
You need to wrap your js inside ready handler - 您需要将js包装在就绪处理程序中-
$(function(){
// write your js here
});
Demo --->
http://jsfiddle.net/QjaTq/2/ 演示
--->
http://jsfiddle.net/QjaTq/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.