“Флэста выберите, какую форму отправить на кнопку нажмите” Ответ

Флэста выберите, какую форму отправить на кнопку нажмите

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

Флэста выберите, какую форму отправить на кнопку нажмите

<!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>
SAMER SAEID

Ответы похожие на “Флэста выберите, какую форму отправить на кнопку нажмите”

Вопросы похожие на “Флэста выберите, какую форму отправить на кнопку нажмите”

Смотреть популярные ответы по языку

Смотреть другие языки программирования