Question

编辑：将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!")

问题在于，它总是重定向到另一个页面，并且由于模式弹出窗口的形式不完整而无法提交，因此无论如何都无法通过验证。

我在这里看到了这篇文章：

Ajax Form Submit to Partial View

这似乎过于复杂，我的表单中只有一个小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的更深入的部分。在提交数据之前，我想做很多预处理。我尝试使用committoserver 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');
  }

那么我可以绕过主表单验证，而只是通过某种方式发送这三个字段吗？并没有重定向但留在页面上？

Answer 1

您必须拦截Submit事件。将onsubmit =“ someFunction（）”添加到表单。在someFunction ajax中，您要在提交之前验证的数据，如果一切正常，则返回true，否则返回false。

https://jsfiddle.net/am5f14oc/

.tmux.conf

和javascript

<html>
<body>
<form onsubmit="validateFunc()" action="." method="post">
<input id="name" type="text" name="name">
<input type="submit"/>
</form>
</body>
</html>

ajax django表单仅提交部分数据

1 个答案: