根据用户选择显示不同的形式答案

【问题标题】：Show different forms depending of the user choice根据用户选择显示不同的形式
【发布时间】：2021-07-12 05:33:03
【问题描述】：

我正在尝试创建一个包含 2 个按钮的 html 页面，单击其中一个按钮会向页面添加一个表单，如果我单击另一个按钮，则会添加另一个表单

document.addEventListener('DOMContentLoaded', function showAppointementForm() {
  document.getElementById("button1").onclick = function() {
    document.getElementById("form").innerHTML = `
        <form action="{% url 'create_appointement_non_register_patient' %}" method="POST">
             {{ form.media }} {{ form.as_p }} {% csrf_token %}

            <button type="submit" value="create_appointement_non_register_patient">
                ok
            </button>
        </form>
    `
  }

  document.getElementById("button2").onclick = function() {
    document.getElementById("form").innerHTML = `
        <form action="{% url 'create_appointement_register_patient' %}" method="POST">
            <p>
                <label for="patients">select a patient</label>
                <select name="patients" id="patients">
                <option value="">-- select a patient --</option>
                {% for patient in patients %}
                <option value="{{patient}}">{{patient}}</option>
                {%empty%}
                <option value="nothing">nothing</option>
                {% endfor %}
            </select>
            </p> {{ form.media }} {{ form.as_p }} {% csrf_token %}

            <button type="submit" value="create_appointement_register_patient">
                ok
            </button>
        </form>

    `
  }
})

<body>
  <div class="container">
    
      <button name="type" class="button1" id="button1">register patient</button>
      <button name="type" class="button2" id="button2">non register patient</button>
    
    <div id='form'>
    </div>
  </div>
  <script language="javascripts" type="text/javascripts" src="static/js/onclick.js">
  </script>
</body>

我的 js 文件中的代码有问题还是有其他方法可以解决？

这个视图与views.py中2按钮中的2表单一起工作

@login_required
def create_appointement_register_patient(request):
    if request.user.is_doctor() or request.user.is_reception():
        form_app = AppointmentForm_2(request.POST or None)
        user2 = get_user_model()
        patients = user2.objects.filter(type_of_user=TypeOfUser.PATIENT)
        if request.method=='POST':
            form_app = AppointmentForm_2(request.POST or None)
            if form_app.is_valid():
                form_apps = form_app.save(commit=False)
                form_apps.user_ho_add = request.user
                

                start_time = form_apps.start_time 
                future_time = dt.datetime(1970, 1, 1, start_time.hour, start_time.minute, start_time.second, start_time.microsecond) + timedelta(minutes=30)
                form_apps.end_time = dt.time(future_time.hour, future_time.minute, future_time.second, future_time.microsecond)
                form_apps.patient = request.POST['patients']
                if Appointment.objects.filter(patient=request.POST['patients']).exists():
                    form_apps.save()
                    messages.success(request, 'appointment added')
                else:
                    raise ValidationError('patient does not Exist')
            else:
                messages.error(request, 'Error')

            return render(request,'appointement/add_appointement2.html',{'form':form_app, 'patients':patients}) 
        else:
            return render(request,'appointement/add_appointement2.html',{'form':form_app, 'patients':patients})
    else:
        return HttpResponseRedirect(reverse("create_appointement"))


@login_required
def create_appointement_non_register_patient(request):
    if request.user.is_doctor() or request.user.is_reception():
        form_app = AppointmentForm_3(request.POST or None)
        user2 = get_user_model()
        patients = user2.objects.filter(type_of_user=TypeOfUser.PATIENT)
        if request.method=='POST':
            form_app = AppointmentForm_3(request.POST or None)
            if form_app.is_valid():
                form_apps = form_app.save(commit=False)
                form_apps.user_ho_add = request.user
                

                start_time = form_apps.start_time 
                future_time = dt.datetime(1970, 1, 1, start_time.hour, start_time.minute, start_time.second, start_time.microsecond) + timedelta(minutes=30)
                form_apps.end_time = dt.time(future_time.hour, future_time.minute, future_time.second, future_time.microsecond)
                form_apps.save()
                messages.success(request, 'appointment added')
            else:
                messages.error(request, 'Error')

            return render(request,'appointement/add_appointement3.html',{'form':form_app, 'patients':patients}) 
        else:
            return render(request,'appointement/add_appointement3.html',{'form':form_app, 'patients':patients})
    else:
        return HttpResponseRedirect(reverse("create_appointement"))

【问题讨论】：

标签： javascript django django-templates

【解决方案1】：

除非您通过模板处理器传递 javascript 源代码，并且我没有看到您这样做的任何迹象，否则您只是将代码逐字逐句添加到页面中。而是将模板中的所有表单都用display:none 隐藏，并让按钮取消隐藏它们。

最好的实现是为每个表单创建一个路由，以便向用户呈现他们选择的表单。

【讨论】：

是的，我知道这种方法，但我想让 html 页面不显示任何内容，除非我单击按钮，id 不会干扰 Django 端，有没有办法让它可以通过在js中使用innerhtml方法
@houhou 你已经在修改服务文件了，为什么不修改应用程序来做你想做的事。如果您不想在用户按下按钮时进行往返，请修改模板并包含两个表单。事实上，您已经有两个函数来处理每条路由。在 url 上创建两个路由，每个路由由每个函数处理并使用自己的模板。以任何其他方式进行操作都会使其变得比需要的更复杂。
这是一个 cs 50 的最终项目，我需要使用 javascripts 和 django 来完成，我想让它像这样工作，然后我将添加一个包含 javascripts 表单的弹出小 html，但知道这样（它不起作用的简单方法）
@houhou 除非这是任务的一部分（在这种情况下，我相信你是在浪费时间），你是决定如何实现它的人。按照我的建议去做会不会那么痛苦。

【解决方案2】：

可以在代码的 django 端使用 render 或 render_to_string。当您第一次展示基础时，但此时您正在使用 ajax，因此请利用 ajax，success 方法。例如：

    $.ajax({
            url: url,
            type: 'GET',

            success: function (res) {
                $('#gmodalContent').html(res);
            },

            error: function (er) {
                console.log(er);
            },
        });

我使用了html()，但也有append()、prepend()和其他js中可用的方法。

res 指的是使用render 或render_to_string 提供的来自django 端的响应。

【讨论】：

我的问题在于 javascripts 代码不起作用而不是在代码的 django 端，js 代码是否有效？
好像html代码不好。因为您已经将按钮放在了表单中。把它们拿出来，放下最初的表格。按钮也输入submit，默认情况下会告诉浏览器他们每个人点击提交表单的时间，然后你的js代码将根本无法工作。
我在我的 VS 代码中更改了它，但它没有工作，但是当我在这里编辑代码时（在问题中）它工作当我点击它显示表单的按钮时，我如果你能看到错误在哪里，那就在 Django 中添加这个函数，那就太好了