Как создать в Django разборную форму с помощью jQuery? - PullRequest
0 голосов
/ 05 июня 2019

Я пытаюсь создать в Django разборную форму, которая переключала бы форму после нажатия кнопки. Я обнаружил, что могу использовать опцию .toggle () из jQuery, но не знаю, как связать связанную форму с функцией

Пример "переключает все абзацы" из http://api.jquery.com/toggle/, кажется, мне нужен, но я не уверен, как его интегрировать.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $('#toggle').click(function() {
            $('form').toggle('slow');
            });
        </script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <title>Hello world!</title>
  </head>


  <body>
    <h3 class="text-success">Add Sensor</h3>
    <br>

    <form style="display:none;" method="post">
        {% csrf_token %}
        <div class="row align-items-center">
            <div class="col-sm-8">
                <table>
                   {{ form1.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>
                <br>
                <br>

                <button type="button" id="toggle">toggle form</button>



                <h3 class = "text-success">Add Sensor View</h3>
                <table>
                   {{ form2.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>
                <br>
                <br>
            </div>
        <div>
    </form>

Я бы хотел, чтобы form2 переключался только после нажатия кнопки

Обе формы определены следующим образом:

class VehicleForm(forms.ModelForm):
class Meta:
    model = Vehicle
    fields = ['vehicle_id',
              'vehicle_name',
              'vehicle_modelyear',
              'vehicle_version',
              'vehicle_file']

    widgets = {
        'vehicle_id': forms.Textarea(attrs={'rows': 1, 'cols': 15}),
    }

1 Ответ

0 голосов
/ 05 июня 2019

Вы можете скрыть форму, используя style="display:none;", и создать переключающую ссылку, которая будет скрывать или отображать форму с медленным замиранием, например:

<a href="#toggle" id="toggle">toggle form</a><br><br>
<form style="display:none;" method="post">
    {% csrf_token %}
    <div class="row align-items-center">
        <div class="col-sm-8">
            <table>
               {{ form1.as_table}}
            </table>
            <div class="mx-sm-2">
                <input type="submit" value="Submit">
            </div>
            <br>
            <br>
            <h3 class = "text-success">Add Sensor View</h3>
            <table>
               {{ form2.as_table}}
            </table>
            <div class="mx-sm-2">
                <input type="submit" value="Submit">
            </div>
            <br>
            <br>
        </div>
    <div>
</form>

И на вашем JS:

$('#toggle').click(function() {
   $('form').toggle('slow');
});

Рабочий пример:

$('#toggle').click(function() {
	$('form').toggle('slow');
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a href="#toggle" id="toggle">toggle form</a><br><br>
<form style="display:none;" method="post">
        {% csrf_token %}
        <div class="row align-items-center">
            <div class="col-sm-8">
                <table>
                   {{ form1.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>
                <br>
                <br>
                <h3 class = "text-success">Add Sensor View</h3>
                <table>
                   {{ form2.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>
                <br>
                <br>
            </div>
        <div>
    </form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...