I have a challenge where I need to activate or deactivate a submission button in a form called btn-vote using JavaScript. The button will only be activated if one of the 10 radio buttons is selected. Additionally, if the person-10 radio button is chosen, the input textbox named other-person must contain a string with a length greater than 1 but less than 51 characters and should only consist of letters and spaces (matching /^[a-zA-Z\s]*$/).
The structure of the form is as follows:
<form id= "personvoteform" name="vote" action="{{ url_for('comparePersons') }}" method="post">
<div class="radio">
<input id="person1" type="radio" name="person" value="Name 1"><label for="person1">Name 1</label><br>
<input id="person2" type="radio" name="person" value="Name 2"><label for="person2">Name 2</label><br>
<input id="person3" type="radio" name="person" value="Name 3"><label for="person3">Name 3</label><br>
<input id="person4" type="radio" name="person" value="Name 4"><label for="person4">Name 4</label><br>
<input id="person5" type="radio" name="person" value="Name 5"><label for="person5">Name 5</label><br>
<input id="person6" type="radio" name="person" value="Name 6"><label for="person6">Name 6</label><br>
<input id="person7" type="radio" name="person" value="Name 7"><label for="person7">Name 7</label><br>
<input id="person8" type="radio" name="person" value="Name 8"><label for="person8">Name 8</label><br>
<input id="person9" type="radio" name="person" value="Name 9"><label for="person9">Name 9</label><br>
<input id="person10" type="radio" name="person" value="Other">
<input id="other-person" type="text" name="person_other" placeholder="Other Person" onClick="selectRadio()"/>
</div>
<br>
<div class="Aligner-center">
<button id="btn-vote" type="submit" value="Submit" class="black-btn" disabled>VOTE</button>
</div>
</form>
This is my current JavaScript code:
var form = document.getElementById("personvoteform");
var submitbtn = document.getElementById("btn-vote");
var person1 = document.getElementById("person1");
var person2 = document.getElementById("person2");
var person3 = document.getElementById("person3");
var person4 = document.getElementById("person4");
var person5 = document.getElementById("person5");
var person6 = document.getElementById("person6");
var person7 = document.getElementById("person7");
var person8 = document.getElementById("person8");
var person9 = document.getElementById("person9");
var person10 = document.getElementById("person10");
var other = document.getElementById("other-person");
form.addEventListener('change', function()) {
if(person1.checked){
submitbtn.disabled = false;
}else if(person2.checked){
submitbtn.disabled = false;
}else if(person3.checked){
submitbtn.disabled = false;
}else if(person4.checked){
submitbtn.disabled = false;
}else if(person5.checked){
submitbtn.disabled = false;
}else if(person6.checked){
submitbtn.disabled = false;
}else if(person7.checked){
submitbtn.disabled = false;
}else if(person8.checked){
submitbtn.disabled = false;
}else if(person9.checked){
submitbtn.disabled = false;
}else if(person10.checked){
if(other.length > 1 && other.length < 51){
submitbtn.disabled = false;
} else {
submitbtn.disabled = true;
}
}
}