ajax django表單僅提交部分數據

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表單提交到部分視圖

這似乎過於復雜，我的表單中只有一個小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

您必須攔截提交事件。 將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;
  }