How to disable a submit button until a radio button is selected (Javascript, HTML, and Flask)

Brandon H. 0
Viewed 29

I've seen other questions similar to this one, but I don't know if my application isn't working because I'm using a Flask/SQLAlchemy application (a truck scheduling application) or if there's something else I'm missing. I want to disable the submit/update button until the user selects one of the materials to be picked up.

update.html:

<h3>Update Appointment:</h3><br>

<form action="/update/{{appt.id}}" method="POST">
    <label>Carrier:</label>
    <input type="text" name="carrier" id="carrier" 
        value="{{ appt.carrier }}"><br>

    <h4>Current material = {{ appt.material }}</h4>
    <label>Select a new material:</label><br>
    <input type="radio" name="material_update" id="HCl" value="HCl">
    <label for="HCl">HCl</label><br>

    <input type="radio" name="material_update" id="Caustic" value="Caustic">
    <label for="Caustic">Caustic</label><br>

    <input type="radio" name="material_update" id="Bleach" value="Bleach">
    <label for="Bleach">Bleach</label><br>

    <button type="submit" id="update_button" disabled>Update Appointment</button>
</form>

<script>
document.getElementsByName('material_update')
    .addEventListener('click', enable);

function enable() {
    document.querySelector('#update_button').disabled = False;
}
</script>
sqlalchemy flask javascript html python
1 Answers

.getElementsByName() returns a node list and doesn't support .addEventListener(), however the elements in that node list do.

Also, the Boolean false is false in JavaScript, not False.

Instead of attaching an event listener to each of the radio buttons, you can attach the listener to a common ancestor of them, in this case the form. Then, when the listener fires, you can check to see if it was one of the radio buttons that initiated the event and, if so, act.

// Get your DOM references just once, not every time
// the function is called.
let update = document.querySelector('#update_button');

// Use "event delegation" and set up the event at
// a common ancestor element of the elements you
// wish to handle.
document.querySelector('form').addEventListener('click', enable);

function enable(event) {
  // Check to see if it was a radio button that 
  // initiated the event
  if(event.target.name === "material_update"){
    // False in JavaScript is false, not False
        update.disabled = false;
  }
}
<h3>Update Appointment:</h3><br>

<form action="/update/{{appt.id}}" method="POST">
    <label>Carrier:</label>
    <input type="text" name="carrier" id="carrier" 
        value="{{ appt.carrier }}"><br>

    <h4>Current material = {{ appt.material }}</h4>
    <label>Select a new material:</label><br>
    <input type="radio" name="material_update" id="HCl" value="HCl">
    <label for="HCl">HCl</label><br>

    <input type="radio" name="material_update" id="Caustic" value="Caustic">
    <label for="Caustic">Caustic</label><br>

    <input type="radio" name="material_update" id="Bleach" value="Bleach">
    <label for="Bleach">Bleach</label><br>

    <button type="submit" id="update_button" disabled>Update Appointment</button>
</form>

Scott Marcus0
Related