Breaking News: Grepper is joining You.com. Read the official announcement!

Flask select which form to POST by button click

SAMER SAEID answered on May 15, 2022 Popularity 3/10 Helpfulness 1/10

answer Flask select which form to POST by button click

related Flask select which form to POST by button click

Flask select which form to POST by button click

Comment

from flask import (
    Flask,
    render_template,
    request
)

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        print(request.form.get('value', type=float))
    return render_template('index.html')

Popularity 3/10 Helpfulness 1/10 Language python

Source: Grepper

Tags: button click flask post python select

Link to this answer
Share Copy Link

Contributed on May 15 2022

SAMER SAEID

0 Answers Avg Quality 2/10

Closely Related Answers

Flask select which form to POST by button click

Comment

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
    crossorigin="anonymous">
  <style>
    /*
    Toggle the appearance of the row containing an input field whose property 
    has been set to disabled.
     */
    div.row:has(input.value-control[disabled]) {
      display: none;
    }
  </style>
</head>
<body>

  <div class="container my-4">

    <form method="post">
      <div class="row mb-3">

        <!-- The button group to switch between the form parts. -->
        <div class="col btn-group" role="group" aria-label="Basic radio toggle button group">

          <!-- The data-target and data-parent properties reference the parts to be switched. -->
          <input
            id="btnradio1"
            class="btn-check"
            name="btnradio"
            type="radio"
            autocomplete="off"
            data-parent=".value-control"
            data-target="#value-control-1"
            checked
          >
          <label class="btn btn-outline-primary" for="btnradio1">100-200 Mhz</label>

          <input
            id="btnradio2"
            class="btn-check"
            name="btnradio"
            type="radio"
            autocomplete="off"
            data-parent=".value-control"
            data-target="#value-control-2"
          >
          <label class="btn btn-outline-primary" for="btnradio2">400-500 Mhz</label>
        </div>
      </div>

      <div class="row mb-3">
        <label for="value-control-1" class="col-sm-2 col-form-label">Value:</label>
        <div class="col-sm-10">
          <!-- 
          The references of the radio buttons refer to the class and id attributes 
          of the input field. 
          -->
          <input
            id="value-control-1"
            class="form-control value-control"
            name="value"
            type="number"
            step="0.001" min="100" max="200"
            placeholder="xxx.xxx 100-200"
            required
          >
        </div>
      </div>

      <div class="row mb-3">
        <label for="value-control-2" class="col-sm-2 col-form-label">Value:</label>
        <div class="col-sm-10">
          <input
            id="value-control-2"
            class="form-control value-control"
            name="value"
            type="number"
            step="0.001" min="400" max="500"
            placeholder="xxx.xxx 400-500"
            required
            disabled
          >
        </div>
      </div>

      <div class="d-grid">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>

  </div>


  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

  <script type="text/javascript">
  (() => {
    // Wait for the document content to load. This listener is not absolutely 
    // necessary at this point, since the script element is at the end of the document.
    window.addEventListener('DOMContentLoaded', () => {
      // Select the toggle buttons based on their properties.
      const radioSel = 'input[name="btnradio"][data-target][data-parent]';
      const radioBtns = document.querySelectorAll(radioSel);
      radioBtns.forEach(btn => {
        // Register a listener for the change event for each element found.
        btn.addEventListener('change', evt => {
          // Change the disabled property of the referenced elements.
          const parent = document.querySelectorAll(evt.target.dataset.parent);
          const target = document.querySelector(evt.target.dataset.target);
          parent.forEach(elem => elem.disabled = true );
          target && (target.disabled = !evt.target.checked);
        });
      });
    });
  })();
  </script>

</body>
</html>

Popularity 3/10 Helpfulness 1/10 Language python

Source: Grepper

Tags: select flask click python button post

Link to this answer
Share Copy Link

Contributed on May 15 2022

SAMER SAEID

0 Answers Avg Quality 2/10

Flask select which form to POST by button click

Contents

More Related Answers

Flask select which form to POST by button click

Closely Related Answers

Flask select which form to POST by button click

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.