How to call a function in views.py on clicking a button in template.html in django

Question

I have a form in which there is a button . I want to call a view function named def recognize(): in my views.py but after clicking the page should not reload and the values filled in the inputs before the button should not be cleared.

TEMPLATE FILE

                 <form>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="first_name">First Name</label>
                            <input type="text" name="first_name" class="form-control" id="first_name" required/>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="last_name">Last Name</label>
                            <input type="text" name="last_name" class="form-control" id="last_name" required/>
                        </div>
                    </div>

                    <button type="button" class="mybtn">Open Camera</button> // THIS IS THE BUTTON TO BE CLICKED

                    <button type="submit" class="btn btn-danger">Submit</button>
                </form>

VIEWS.PY (hiding extra details)

def recognize(request):
    size = 4
    haar_file = 'C:\\Users\\Aayush\\ev_manage\\face_detector\\haarcascade_frontalface_default.xml'
    datasets = 'C:\\Users\\Aayush\\ev_manage\\face_detector\\datasets'
    while True:
        (_, im) = webcam.read()
        gray = cv2.cvtColor(im, cv2.COLOR_BGR2GRAY)
        faces = face_cascade.detectMultiScale(gray, 1.3, 5)
        for (x, y, w, h) in faces:
            cv2.rectangle(im, (x, y), (x + w, y + h), (255, 0, 0), 2)
            face = gray[y:y + h, x:x + w]
            face_resize = cv2.resize(face, (width, height))
            # Try to recognize the face
            prediction = model.predict(face_resize)
            cv2.rectangle(im, (x, y), (x + w, y + h), (0, 255, 0), 3)

            if prediction[1] < 90:

                cv2.putText(im, '% s - %.0f' %
                            (names[prediction[0]], prediction[1]), (x - 10, y - 10),
                            cv2.FONT_HERSHEY_PLAIN, 1, (0, 255, 0))
            else:
                cv2.putText(im, 'not recognized',
                            (x - 10, y - 10), cv2.FONT_HERSHEY_PLAIN, 1, (0, 255, 0))

        cv2.imshow('OpenCV', im)

        key = cv2.waitKey(10)
        if key == 13:
            break

    webcam.release()
    cv2.destroyAllWindows()

Basically I want that after clicking the "Open Camera" button my recognize() function should be called and as per it the OpenCV face detection camera should open... but all this should not effect the data filled in the above inputs in the template. Lastly, i request everyone to please post an answer instead of a comment with a code solution because i am a rookie in python.

Answer 1

You may consider using Ajax. In your template:

<form>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="first_name">First Name</label>
                            <input type="text" name="first_name" class="form-control" id="first_name" required/>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="last_name">Last Name</label>
                            <input type="text" name="last_name" class="form-control" id="last_name" required/>
                        </div>
                    </div>

                    <button type="button" class="mybtn" id="open_camera_button">Open Camera</button> // THIS IS THE BUTTON TO BE CLICKED

                    <button type="submit" class="btn btn-danger">Submit</button>
                </form>
<script>
$('#open_camera_button').click(function(event){
    $.ajax({
        url: 'recognize/',
        success: function(result){
            console.log("done, result=%s", result);
        }
    });
});

</script>

You may need to enhance this solution by adding CSRF protection

Answer 2

add the href to the button class and add a line in urls.py. once the button is clicked it will call the view it import's the function and it will call that function.

 HTML FILE
   <button type="button" class="mybtn" href="{% url 'recognize_me'%}">Open 
    Camera</button> // THIS IS THE BUTTON TO BE CLICKED

 url.py
  from .import views
  path('/recognize', views.recognize, name='recognize_me')