Run python script from HTML button

Question

I have a code to display the live camera footage on a HTML and I would like to have a button that allows users to ring the rpi buzzer. However, the buzzer button does not go through to the rpi no matter what I try. I'm fairly new to coding so I'm really not sure what I'm missing. Would appreciate all the help I can get. Here's part of what I have for now in my HTML.

<form method = "post">

          <a href="/ring">
          <button type="submit">
          <button>                   
                <i class="fa fa-bell-o fa-2x" style="color: white" aria-hidden="true"></i>
          </button>
        </a>
    </div>
</form>

main script

@app.route('/ring', methods=['GET', 'POST'])
def ring():
    print("buzzer")
    GPIO.output(18,1)
    sleep(5)
    GPIO.output(18,0)
    sleep(0.5)
    return render_template('index.html')

Answer 1

You can do that with a little bit of javascript :

<form method = "post">

          <a href="/ring">
          <button type="submit">
          <button onclick="OpenPython()">                   
                <i class="fa fa-bell-o fa-2x" style="color: white" aria-hidden="true"></i>
          </button>
        </a>
    </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

function OpenPython(){
            $.ajax({
              url: "Your Python code location example "C:\mypython.py",
             context: document.body
            }).done(function() {
             alert('finished python script');;
            });
        }


</script>

I think it's a simple way to do that.