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.

score 1 · Accepted Answer · answered Jan 20 '20 at 10:44

1

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')

answered Jan 20 '20 at 10:44

i_am_deesh

448
3
12

i ve tried this exact solution , but it refreshes the current form page as it changes the url path to /recognize – Aayush Gupta Jan 20 '20 at 10:51
please provide another solution – Aayush Gupta Jan 20 '20 at 12:05
not other methods work because you are trying to render the frames generated by the cv2 in a browser for that you need to return each frame when the function is called........[link](https://stackoverflow.com/a/49029903/12353949) this link might give a context of you current probelm.. – i_am_deesh Jan 20 '20 at 12:23

score 0 · Answer 2 · answered Jan 20 '20 at 12:31

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

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

2 Answers2