具有不同id的多个动态表单的AJAX查询
AJAX Query for Multiple Dynamic Forms with varying ID's
这是在我的头,jquery.min.js已经包含:
<script type="text/javascript">
//<![CDATA[
$(function() {
$("form.ajax").submit(function(e) {
var $this = $(this);
e.preventDefault();
$.ajax({
url: 'index.php',
type: 'post',
data: $this.serialize(),
success: function() {
//alert(response);
}
})
return false;
});
});
//]]>
</script>
这是一个动态生成的表单示例:
<form id="dash_73" method="post" class="ajax">
<fieldset>
<input type="hidden" name="action" value="ajax_purchase_ticket" />
<input type="hidden" name="lottery_id" value="73" />
<div class="left1">
<button type="submit" name="dash" form="dash_73" id="button_73-1" value="1" class="ticket taken" disabled="disabled">User 1</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-2" value="2" class="ticket taken" disabled="disabled">User 1</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-3" value="3" class="ticket taken" disabled="disabled">User 1</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-4" value="4" class="ticket taken" disabled="disabled">User 1</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-5" value="5" class="ticket free">5 Dash</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-6" value="6" class="ticket taken" disabled="disabled">User 2</button>
<br />
</div>
<div class="left2">
<button type="submit" name="dash" form="dash_73" id="button_73-7" value="7" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-8" value="8" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-9" value="9" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-10" value="10" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-11" value="11" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-12" value="12" class="ticket taken" disabled="disabled">User 2</button>
<br />
</div>
<div class="left3">
<button type="submit" name="dash" form="dash_73" id="button_73-13" value="13" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-14" value="14" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-15" value="15" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-16" value="16" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-17" value="17" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-18" value="18" class="ticket taken" disabled="disabled">User 2</button>
<br />
</div>
<div class="left4">
<button type="submit" name="dash" form="dash_73" id="button_73-19" value="19" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-20" value="20" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-21" value="21" class="ticket taken" disabled="disabled">User 1</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-22" value="22" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-23" value="23" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-24" value="24" class="ticket yours" disabled="disabled">User 3</button>
<br />
</div>
<div class="left5">
<button type="submit" name="dash" form="dash_73" id="button_73-25" value="25" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-26" value="26" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-27" value="27" class="ticket yours" disabled="disabled">User 3</button>
<br />
<button type="submit" name="dash" form="dash_73" id="button_73-28" value="28" class="ticket yours" disabled="disabled">User 3</button>
<br />
</div>
</fieldset>
</form>
目前,当我点击一个按钮购买门票,什么也没有发生。我试图有它,所以当一个按钮被按下,它会运行代码。我仍在努力找出如何检索成功或失败的响应方法。如有任何帮助,不胜感激。
UPDATE:没有Ajax,代码按要求运行。正如Kevin指出的那样,我认为问题在于没有提交按钮值,这就是为什么看起来什么都没有发生,因为按钮值是必需的。想知道如何包含按钮值
UPDATE 2:这是为我工作的成功/失败消息的最终代码。
<script type="text/javascript">
//<![CDATA[
$(function() {
$('button[name="dash"]').click(function (e) {
e.preventDefault();
var id = this.id;
var $formElem = $(this).closest('form');
var formData = $formElem.serializeArray();
formData.push({
name: this.name,
value: this.value
});
// if you want to submit the 'form' attribute of the button as well ...
formData.push({
name: 'form',
value: $(this).attr('form')
});
$.ajax({
url: 'index.php',
type: 'post',
data: formData,
success: function (data) {
if ( data.completed == 1 )
{
data.message = data.message + '<br />' + data.completed_message;
}
$("#centerpoint").hide();
$("#centerpoint").show();
if ( data.result == 1 )
{
$('#' + id).attr("disabled", "disabled");
$('#' + id).removeClass("free").addClass("yours");
$('#' + id).text(data.buyer);
$('#ajax_message').replaceWith('<div class="form_message success" id="ajax_message">' + data.message + '</div>');
$("#centerpoint").delay(5000).slideUp();
}
else if ( data.result == 2 )
{
$('#' + id).attr("disabled", "disabled");
$('#' + id).removeClass("free").addClass("taken");
$('#' + id).text(data.buyer);
$('#ajax_message').replaceWith('<div class="form_message error" id="ajax_message">' + data.message + '</div>');
$("#centerpoint").delay(5000).slideUp();
}
else if ( data.result == 3 )
{
$('#ajax_message').replaceWith('<div class="form_message error" id="ajax_message">' + data.message + '</div>');
$("#centerpoint").delay(5000).slideUp();
}
else
{
$('#ajax_message').replaceWith('<div class="form_message error" id="ajax_message">Unknown Error!</div>');
$("#centerpoint").delay(5000).slideUp();
}
}
})
/* should pass this form data:
action=ajax_purchase_ticket&lottery_id=73&dash=5&form=dash_73
*/
return false;
});
});
//]]>
</script>
看起来您的表单正在张贴"action=ajax_purchase_ticket&lottery_id=73"
你确定服务器端脚本是完全功能与数据量?它会期待一个按钮值吗?
来自序列化文档(http://api.jquery.com/serialize/):
)未序列化提交按钮值,因为表单未提交使用按钮
这里有一个解决方案,你可以尝试包含被点击的按钮值:jQuery serializeArray不包含被点击的提交按钮
看看这是不是你想要的:http://jsfiddle.net/kevincollins/VLHCe/
$('button[name="dash"]').click(function (e) {
e.preventDefault();
var $formElem = $(this).closest('form');
var formData = $formElem.serializeArray();
formData.push({
name: this.name,
value: this.value
});
// if you want to submit the 'form' attribute of the button as well ...
formData.push({
name: 'form',
value: $(this).attr('form')
});
$.ajax({
url: 'index.php',
type: 'post',
data: formData,
success: function () {
//alert(response);
}
})
/* should pass this form data:
action=ajax_purchase_ticket&lottery_id=73&dash=5&form=dash_73
*/
});
相关文章:
- jQuery动态表单显示在select选项上
- 使用AJAX在Rails中提交动态表单的最佳方式是什么
- Small Javascript从动态表单中删除多个元素的问题
- Php,Javascript-动态表单id's和动态验证
- 在动态表单的可见部分中,如何使用javascript生成所需的某些字段
- AngularJS中的动态表单验证 - 是否有更好的解决方案/方法
- 如何添加动态表单元素但保留其值(JS)
- jquery在动态表单输入上验证插件不起作用
- Angularjs在js中绑定动态表单构建
- 正在使用ng消息验证动态表单
- 将动态表单元素限制为最多10个记录
- onchange使用PHP和jQuery对动态表单输入进行计算
- 如何将动态表单保存到数据库/编辑回表单
- 生成动态表单输入字段,并在angularJS中以数组形式收集字段数据
- 基于select选项的javascript动态表单生成
- 具有大型动态表单的主干js
- 如何在Struts1中映射和读取我的动态表单条目
- 如何在java框架(JSF)中基于URL的json响应生成动态表单
- Handlebar.js模板,使用Undercore.js-Zendesk应用程序进行动态表单输入
- 如何针对生成的所有动态表单的Input元素