CODEWITHSUNDEEP
javascriptdjangodjango-templates
houhou
houhou

Reputation: 177

Show different forms depending of the user choice

I'm trying to create an html page that contains 2 button one click on one of them it add a form to the page, and if I click on the other button it add another form

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>

is something wrong with my code in js file or is there another way to do it?

This the view that work with the 2 form in the 2 button in the views.py

@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"))

Upvotes: 0

Views: 234

Answers (2)

Braiam
Braiam

Reputation: 4496

Unless you are passing the javascript source through the template processor, and I don't see any indication you do, you are just simply adding verbatim the code to the page. Instead put all the forms in the template hidden with display:none and make the button unhide them.

The best implementation is to create a route for each form, so that the user is presented with the form of their selection.

Upvotes: 1

mh-firouzjah
mh-firouzjah

Reputation: 844

it is possible to use render or render_to_string in django-side of the code. as you showing the base for first time, but at this time you're using ajax so take an advantage of ajax, the success method. e.g:

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

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

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

I used html() but there are also append(), prepend() and other methods available out there in js.

  • the res is referring to the response from django side which is provided using render or render_to_string.

Upvotes: 1

Related Questions