I am currently working on a project titled: Tennis Club Management utilizing javascript, HTML, CSS, and Bootstrap. In the project, one of the pages is managePlayers.html, which features two buttons - Add Players & Show Players. Clicking on the Add Players button reveals a table with input fields below it. The table includes fields for ID, DOB, Name, Gender, Contact, two radio buttons for gender selection, and a SAVE button.
Note: I am struggling with implementing functionality that checks if either of the radio buttons for gender (Male/Female) has been selected upon clicking the save button. Below are the relevant code files and screenshots for reference.
Jsfiddle link: https://jsfiddle.net/mohitsharma1991/40yz7tv6/1/
index.js
// Code snippet for displaying the table to add player information
function addplayers() {
// playerIDvalue += 1;
document.querySelector("#customerregistration").style.display = "block";
if (istableCreated) {
document.querySelector("#table-responsive").style.display = "none";
}
// document.querySelector(".playerID").value = playerIDvalue;
}
// Code snippet for saving player information on the Manage Players page
function savePlayer() {
console.log("data saved successfully...");
var playerBirthday = document.querySelector(".playerbirthday").value;
var playerName = document.querySelector(".playername").value;
var playerContact = document.querySelector(".playercontact").value;
var playerAddress = document.querySelector(".playeraddress").value;
var playerGender = document.querySelector('input[name="gender"]:checked').value;
var playerID = document.querySelector(".playerID").value;
var customerIDProof = document.querySelector(".customeridproof").value;
var customerIDProofTextBox = document.querySelector(".customeridprooftextbox").value;
var membershipFor = document.querySelector(".membershipfor").value;
var membershipType = document.querySelector(".membershiptype").value;
...
}
managePlayers.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and title -->
...
</head>
<!-- Body content -->
<body class="managePlayers">
<!-- Buttons to show and add players -->
...
<!-- Registration form for adding player information -->
...
<!-- Include Bootstrap JS scripts -->
...
<!-- Additional JavaScript files included -->
...
</body>
</html>
Screenshots
https://i.sstatic.net/wAluO.png
https://i.sstatic.net/XGx67.png
https://i.sstatic.net/NZTQI.png
Any help would be appreciated!