javascript - ajax django表单仅提交部分数据
问题描述
编辑:将 HTML 表单语句更改为这样工作:
<form action="." class="form-horizontal" id="groupinfoForm" onsubmit="SubmitToServer()" method="post">
问题:我还需要method="post">吗
还更改了 javascript 以使用 onsubmit:
function SubmitToServer() {
event.preventDefault();
//some ajaxy goodness here... still working on this.
$.ajax({
data: $("#groupinfoForm").serialize(),
success: function(resp){
alert ("resp: "+resp.name);
}
})
//I thinK i have to change all this to work inside the .ajax call?
formData = $('form').serializeArray()
$('#group_info option:first').prop('selected',true);
gid = $('#group_info option:selected').val()
//test alert
alert("Submitting data for provider: " + $("#provider_id").val() + " and " + gid + " and " + formData[0]['date_joined']);
$("#groupinfo-dialog").modal('hide');
}
我有一个表格,那就是标准的 django。填写成功后将其发送到不同的页面。如果您不填写部分,则会显示错误。
现在我有一个模态表单,它会弹出来填写一些额外的数据。为此,我决定尝试使用 ajax。我有一些工作:
在作为 UpdateView 的类内部:
def post(self, request, *args, **kwargs):
if self.request.POST.has_key('group_info_submit') and request.is_ajax():
print("YOU SURE DID SUBMIT")
return HttpResponse("hi ya!")
问题是它总是重定向到不同的页面,并且无论如何都无法验证,因为模式弹出的表单不完整并试图提交。
我在这里看到了这篇文章:
这似乎过于复杂,我的表单中只有一个小 div,它是一个模态 div,我想与其他 div 分开提交......我在代码中的 java 脚本:
$.ajax({
data: $("#groupinfoForm").serialize(),
success: function(resp){
alert ("resp: "+resp.name);
}
})
然后小模态html片段是:
<div class="container">
<div id="groupinfo-dialog" class="modal" title="Group Information" style="display:none">
<div class="modal-dialog">
<h1> Group Information </h1>
<div class="modal-content">
<div class="modal-body">
<form action="." class="form-horizontal" id="groupinfoForm" method="post">
{% csrf_token %}
{{ group_information_form.non_field_errors }}
<div class="col-md-12">
{{ group_information_form.date_joined_group.errors }}
{{ group_information_form.date_joined_group.label_tag }}
{{ group_information_form.date_joined_group }}
</div>
<div class="col-md-12">
{{ group_information_form.provider_contact.errors }}
{{ group_information_form.provider_contact.label_tag }}
{{ group_information_form.provider_contact }}
</div>
<div class="col-md-12">
{{ group_information_form.credentialing_contact.errors }}
{{ group_information_form.credentialing_contact.label_tag }}
{{ group_information_form.credentialing_contact }}
</div>
<div class="col-md-12">
<div class="col-md-3">
</div>
<div class="col-md-8 form-actions">
<input type='button' class='btn' onclick="CancelDialog()" value='Cancel'/>
<input type='submit' class='btn btn-success' onclick="SubmitToServer()" value='Save' name='group_info_submit'/>
</div>
<div class="col-md-1">
</div>
</div>
<input type="hidden" id="provider_id" name="provider_id" value="{{ provider_id }}" />
<input type="hidden" id="group_id" name="group_id" value="{{ group_id }}" />
</form>
</div>
</div>
</div>
</div>
</div> <!-- end modal Group Info Dialog -->
我在 forms.py 这里的后端有一个模型表单。另请注意,有一个 SubmitToServer() 调用,这就是我认为我可以将所有 ajax 东西越过栅栏扔到服务器的地方,但我想我需要那个 $.ajax?我还在学习 jquery 的更深层次的部分。在提交数据之前,我想做很多预处理。我在 submittoserver javascript 上的尝试是在这里:
不知道如何获取所有表单数据(只是我关心的模式中的三个字段)以将其发送过来......我在这里的尝试:
function SubmitToServer() {
formData = $('form').serializeArray()
$('#group_info option:first').prop('selected',true);
gid = $('#group_info option:selected').val()
alert("Submitting data for provider: " + $("#provider_id").val() + " and " + gid + " and " + formData[0]['date_joined']);
$("#groupinfo-dialog").modal('hide');
}
那么我可以绕过主表单验证并以某种方式发送三个字段吗?并且不让它重定向但留在页面上?
解决方案
您必须拦截提交事件。将 onsubmit="someFunction()" 添加到表单中。在 someFunction ajax 中,您要在提交之前验证数据,如果一切正常,则返回 true,否则返回 false。
https://jsfiddle.net/am5f14oc/
<html>
<body>
<form onsubmit="validateFunc()" action="." method="post">
<input id="name" type="text" name="name">
<input type="submit"/>
</form>
</body>
</html>
和 javascript
function validateFunc() {
formData = $('form').serializeArray();
// do ajax or whatever and return true if everything is ok
return false;
}
推荐阅读
- html - 延迟加载在图像下留下巨大的空白 - CSS 高度问题
- spring-boot - WebClient 如何刷新部分接收到的数据?
- c# - System.Security.Cryptography.CryptographicException:要解密的数据长度无效?
- python - 查找字符串以指定格式失败的位置
- blogengine.net - BlogEngine 3.3.6.0 和用户
- android-studio - 缺少 Activity 和 Fragment+ViewModel 模板
- android - android FirebaseRecyclerAdapter 点击项目不起作用
- ibm-mq - 将单个消息发送到 IBM MQ 中的多个队列的最佳实践
- php - codeigniter中非对象的未定义变量和属性
- grails - 如何删除 grails 中的 spring 安全令牌?