Страница Django с двумя формами: как разместить только одну форму без обновления страницы - PullRequest
Новая
       12

Страница Django с двумя формами: как разместить только одну форму без обновления страницы

1 голос
/ 21 апреля 2019

У меня есть одна страница с двумя формами.В зависимости от выбранного переключателя (одна из которых выбрана по умолчанию) отображается одна из форм, а другая скрыта (с использованием JS и CSS).Когда пользователь заполняет поле формы и отправляет форму, обе формы проверяются, и страница обновляется.Я хочу добиться того, чтобы при отправке формы проверялась только соответствующая форма, а страница не обновлялась.Как проверить только одну форму и предотвратить обновление страницы (то есть продолжать показывать форму вручную после отправки)?

В поисках решения следующие предложения не решили проблему: Правильный способ обработкинесколько форм на одной странице в Django , Как отправить форму без обновления страницы, используя Django, Ajax, jQuery? , http://jquery.malsup.com/form/.

views.py 

from flap.forms import FlapManualForm
from flap.forms import FlapAutoForm

def index(request):
    if request.method == 'POST':
        form_manual = FlapManualForm(request.POST)
        form_auto = FlapAutoForm(request.POST)
        if form_manual.is_valid():
            try:
                if form_manual.data['flap']:
                    print(form_manual.data['flap'])
                    manual = request.POST['flap']
            except:
                print('manual form empty')

        if form_auto.is_valid():
            try:
                if form_auto.data['flap_time']:
                    print(form_auto.data['flap_time'])
                    auto = request.POST['flap_time']
            except:
                print('auto form empty')

    else:
        form_manual = FlapManualForm()
        form_auto = FlapAutoForm()

    return render(request, 'index.html', {'form_manual': form_manual, 'form_auto': form_auto})

forms.py 

class FlapManualForm(forms.Form):
    flap = forms.CharField(min_length=4, max_length=4, label=False, required=False, widget=forms.TextInput(attrs={'style': 'width:90px'}))
    def clean(self):
        cleaned_data = super(FlapManualForm, self).clean()
        flap = cleaned_data.get('flap')
        if not flap:
            pass

class FlapAutoForm(forms.Form):
    flap_time = forms.IntegerField(min_value=1, label=False, required=False, widget=forms.NumberInput(attrs={'style': 'width:90px'}))
    def clean(self):
        cleaned_data = super(FlapAutoForm, self).clean()
        flap_time = cleaned_data.get('flap_time')
        if not flap_time:
            pass

index.html 

{% load widget_tweaks %}
<!DOCTYPE html>
<html lang="en">
<head>
  {% block title %}<title>flap</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>

<style>
.content {
    max-width: 500px;
    margin: auto;
}
.align_center{
    text-align: center;
}
.auto_form {
    display: block;
}
.manual_form {
    display: none;
}
input[type=text] {
    margin: auto;
    text-align: center;
}
input[type=number] {
    margin: auto;
    text-align: center;
}
</style>

<script type="text/javascript">
function show_auto(){
  var x = document.getElementById("manual_form");
  var y = document.getElementById("auto_form");
  if (x.style.display === "none") {
    x.style.display = "block";
    y.style.display = "none";
  } else {
    x.style.display = "none";
    y.style.display = "block";
  }
}
function show_manual(){
  var x = document.getElementById("manual_form");
  var y = document.getElementById("auto_form");
  if (y.style.display === "none") {
    y.style.display = "block";
    x.style.display = "none";
  } else {
    y.style.display = "none";
    x.style.display = "block";
  }
}
</script>

<br>
<br>
<br>
<br>

<div class="align_center">
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active" onclick="show_auto();">
      <input type="radio" name="tab" value="igotnone" checked/>auto
    </label>
    <label class="btn btn-primary" onclick="show_manual();">
      <input type="radio" name="tab" value="igottwo"/>manual
    </label>
  </div>

  <br>
  <br>

  <div id="manual_form" class="manual_form">
    <form method="post">
      {% csrf_token %}
      {{ form_manual }}
      <button type="submit" name="manual_submit" class="btn btn-primary">flap</button>
    </form>
  </div>

  <div id="auto_form" class="auto_form">
    <form method="post">
      {% csrf_token %}
      {{ form_auto }}
      <button type="submit" name="auto_submit" class="btn btn-primary">auto</button>
    </form>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
...