Flask get checkbox value without submit button

Question

I'm trying to get value of checkbox in Flask without a submit.

Here is my app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.form.get('c_check')=="0":
        print('success: 0')
        checked=''
    elif request.form.get('c_check')=="1":
        print('success: 1')
        checked='checked'
    return render_template('index.html')

Here is my JavaScript that toggles the checkbox:

function hello() {
    if (document.querySelector('input').value=='0') {    
        document.querySelector('input').value='1'
        console.log('value 1');
    }
    else {
        document.querySelector('input').value='0'
        console.log('value 0');
    }
}

And here is my index.html:

<form method="post" action="">

    <div class="form-check form-switch">
        <input class="form-check-input btn-lg" 
        name="c_check" 
        value="0" 
        type="checkbox" 
        role="switch" 
        id="flexSwitchCheckChecked" 
        onclick="hello()"
        >
        
        <label class="form-check-label btn-lg" 
        for="flexSwitchCheckChecked"></label>
        <input type="submit">
    </div>
</form>

<script src="{{url_for('static', filename= 'js/hello.js')}}"></script>

I want to

Remove the submit button
When I click on the checkbox, Python should receive the checkbox value, 0 or 1.

The present code only returns 1 when I click the submit button. The solution should be that I remove the submit button entirely and have Python listen on the value change and print that in real time.

I'm open to socketio solution, but I don't know how to do it.

Flask is a server side web framework, it can only return stuff when you make a request to it and it won't update a page dynamically without your own custom JavaScript code. You can make a custom route not returning HTML and just a 200 status code, and use `fetch` on the `onclick` event handler on the checkbox. Websockets don't make sense if there's no data being sent back **and** forth like this case. — Samathingamajig, Dec 05 '21 at 03:54

code · Answer 1 · 2021-12-05T04:00:34.430

2

You only need to change the client-side for this; use AJAX. Here's the simplest example using pure JavaScript:

function ajaxRequest() {
  const checked = document.getElementById("mycheckbox").checked;
  console.log("Sending data to the server that the checkbox is", checked);
  
  // Use the XMLHttpRequest API
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    console.log("Result sent to server!");
  }
  xhttp.open("POST", "/", true);
  xhttp.send();
}

<label for="mycheckbox">Check or uncheck this box:</label>
<input id="mycheckbox" type="checkbox" onchange="ajaxRequest()" />

Obviously the example won't work because there is no server, but this is an example of AJAX with a checkbox once a user clicks a checkbox.

edited Dec 05 '21 at 04:00

answered Dec 05 '21 at 03:57

code

5,690
4
17
39

1

Why are you using `XMLHttpRequest` instead of the more modern `fetch`? – Samathingamajig Dec 05 '21 at 04:00
Because it's supported in more browsers. There's nothing wrong with it either. Obviously, fetch is also possible. See this [comparison](https://stackoverflow.com/questions/35549547/fetch-api-vs-xmlhttprequest). – code Dec 05 '21 at 04:01

ggorlen · Accepted Answer · 2022-07-19T21:32:09.847

To do this, you'll want to add a listener to the input. A form submission with a full refresh would probably be poor UX, so we'll send an asynchronous request with JS to POST the data to the route, then read data from the response.

Here's a proof-of-concept demo that uses JSON all the way through, the standard for AJAX nowadays:

`index.html`:

<body>
  <input type="checkbox" />
  <div class="result"></div>
  <script>
    document
      .querySelector("input")
      .addEventListener("click", e => {
        fetch("/", {
            method: "POST",
            headers: {
              "Accept": "application/json",
              "Content-Type": "application/json"
            },
            body: JSON.stringify({
              c_check: Number(e.target.checked)
            })
          })
          .then(res => {
            if (!res.ok) {
              throw Error(res.status);
            }

            return res.json();
          })
          .then(({data: {val}}) => {
            console.log(val);
            const res = document.querySelector(".result");
            res.innerText = `client got: ${val}`;
          })
          .catch(err => console.error(err))
        ;
      })
    ;
  </script>
</body>

`app.py`:

from flask import (
    Flask, jsonify, render_template, request
)

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        return render_template("index.html")

    val = request.json.get("c_check")
    print(val)
    return jsonify({"data": {"val": val}})
    
if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000, debug=True)

Flask get checkbox value without submit button

2 Answers2

`index.html`:

`app.py`:

Linked