Flask KeyError or return None

Question

I am a beginner learning python flask web development. I am currently migrating my program to the web space, but I ran into a problem.

My problem is that when you click on the "Check Price" button, the button should disappear, get input field value and the spinner block will appear, which is shown in the js-script block. However, if you click on the button, an error will appear stating that the "user-input-field" has not been found, although the link is in both the form and the input field. If you add id='user-input-field' to the form, the launch is performed, but the js block does not work (the spinner block is not displayed), and None is returned from the input field, which is logical. If you change the id name of the form, then KeyError again. What could be the problem

My HTML:

{% extends 'base.html' %}

{% block content %}
<div class="container">
  <div class="row justify-content-center mt-5">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h1 class="text-center">Title</h1>
        </div>
        <div class="card-body">
          {% with messages = get_flashed_messages() %}
          {% if messages %}
          <div class="alert alert-danger">
            <ul>
              {% for message in messages %}
              <li>{{ message }}</li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
          {% endwith %}          
          <form method="post" action="/competitive_list">
            <div class="mb-3">
              <label for="user-input-field" class="form-label">Product name:</label>
              <input type="text" class="form-control" id="user-input-field" name="user-input-field" placeholder="Enter product name" required>
            </div>
            {% if button %}
            <div id="button_container" class="text-center">
              <button type="submit" class="btn btn-primary" onclick="hideFunction()">Check price</button>
            </div>
            {% endif %}
          </form>
          <div class="text-center" id="spinner-block" style="display: none;">
            <p>Searching, please wait ...</p>
            <div class="spinner-border text-success text-align: center" role="status" style="text-align: center"></div>
          </div>          
        </div>
      </div>
      <br>
    </div>
  </div>      
  <script type="text/javascript">

    const hideFunction = () => {        
      const textInputField = document.getElementById('user-input-field');
      const buttonContainer = document.getElementById('button_container');
      const spinnerContainer = document.getElementById('spinner-block');
      console.log(textInputField);

      if (textInputField.value.trim() !== '') {
        buttonContainer.style.display = 'none';
        spinnerContainer.style.display = 'block';
        textInputField.disabled = true;
      } else {
        buttonContainer.style.display = 'block';
        spinnerContainer.style.display = 'none';
      }
    }

  </script>
</div>
{% endblock %}

and py-file:

app = Flask(__name__)


@app.route('/competitive_list', methods=["GET", "POST"])
def competitive_list():
    if request.method == 'POST':            
        user_input_name = request.form.get('user-input-field')
        print(user_input_name)        
        time.sleep(2)            
        return render_template('competitive_list.html',                               
                               sample=d,
                               table=True,
                               button=True
                               )
    else:        
        return render_template('competitive_list.html',
                               button=True
                               )