“Flask Wybierz formularz do opublikowania według przycisku Kliknij” Kod odpowiedzi

Flask Wybierz formularz do opublikowania według przycisku Kliknij

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

Flask Wybierz formularz do opublikowania według przycisku Kliknij

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>
SAMER SAEID

Odpowiedzi podobne do “Flask Wybierz formularz do opublikowania według przycisku Kliknij”

Pytania podobne do “Flask Wybierz formularz do opublikowania według przycisku Kliknij”

Przeglądaj popularne odpowiedzi na kod według języka

Przeglądaj inne języki kodu