ajax django форма для представления только части данных

Question

РЕДАКТИРОВАТЬ: изменил оператор формы HTML, чтобы работать так:

<form action="." class="form-horizontal" id="groupinfoForm" onsubmit="SubmitToServer()" method="post">

Вопрос: Мне все еще нужен метод = "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. Я хочу сделать большую предварительную обработку, прежде чем отправлять данные. Моя попытка использования javascript для submittoserver была здесь:

Не был уверен, как получить все данные формы (только три поля, которые мне нужны из модального), чтобы отправить их через ... моя попытка здесь:

  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;
  }