I have a webform that is used to collect and email details of a sporting match and send an email to the competition administrator. I am working to improve the UI by using Ajax to call data from the database a pre fill the selects. I have successfully implemented Ajax to fill the home team names and one field of players name but need these values to appear in other form fields.
The list of competitions is called by a query on the webpage. Once a competition is selected it fills the home team names via Ajax. I need the same list of team names to appear in the away team select.
Once the home team is selected it fills the home team player names via Ajax for player one, again the same list is needed in the selects for the home team.
Any advice welcomed around reducing the Ajax calls to fill same data into multiple selects.
<script>
function getTeams(divisionId){
$("#TeamsDropdown").html('<option>Loading...</option>');
$.ajax({
method: "POST",
url: "getTeams.php",
dataType: "html",
data: {division: divisionId}
})
.done(function(data){
$("#TeamsDropdown").html(data);
});
}
</script>
<!-- Get Players Home-->
<script>
function getPlayersHome(clubId){
$("#PlayersDropdownHome").html('<option>Loading...</option>');
$.ajax({
method: "POST",
url: "getPlayers.php",
dataType: "html",
data: {TeamsDropdown: clubId}
})
.done(function(data){
$("#PlayersDropdownHome").html(data);
});
}
</script>
<!-- Get Players Away-->
<script>
function getPlayersAway(clubId){
$("#PlayersDropdownAway").html('<option>Loading...</option>');
$.ajax({
method: "POST",
url: "getPlayers.php",
dataType: "html",
data: {TeamsDropdown: clubId}
})
.done(function(data){
$("#PlayersDropdownAway").html(data);
});
}
</script>
<title>CCSMBA League Score Submission</title>
<!-- Style override -->
<!-- colour pallett https://www.schemecolor.com/gold-and-black-color-scheme.php -->
<link rel="stylesheet" type="text/css" href="admin_style.css">
</head>
<body>
<div class="container-lg">
<?php require('nav_admin.php'); ?>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
<!-- https://makitweb.com/auto-populate-dropdown-with-jquery-ajax/ -->
<h2 align="center">SUBMIT A LEAGUE SCORE</h2>
<form role="form" action="" method="post">
<div class="form-group">
<label for="division">Division</label>
<select name="division" id="division" class="form-control" onChange="getTeams(this.value)">
<option value="0">- Select -</option>
<?php
require_once "config_db.php";
// Fetch Divisions
$sql_divisions = "SELECT
comp.*,
seas.season,
divs.div_name
FROM
competitions comp
join seasons seas on comp.season_id = seas.id
join divisions divs on comp.division_id = divs.id
WHERE season_id='14'";
$divisions_data = mysqli_query($link,$sql_divisions);
while($row = mysqli_fetch_assoc($divisions_data) ){
$compid = $row['id'];
$division_name = $row['div_name'];
// Option
echo "<option value='".$compid."' >".$division_name."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label for="date">Match Date</label>
<input type="date" class="form-control" name="date" id="date">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="home">Home Team</label>
<select name="home" id="TeamsDropdown" class="form-control" onChange="getPlayersHome(this.value)">
</select>
</div>
<div class="form-group col-md-6">
<label for="away">Away Team</label>
<select name="away" id="TeamsDropdown" class="form-control" onChange="getPlayersAway(this.value)">
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="scorehome1">Game 1 Home Score</label>
<input type="number" class="form-control" name="scorehome1" id="scorehome1" placeholder="Enter Game 1 Home Score" required>
</div>
<div class="form-group col-md-6">
<label for="scoreaway1">Game 1 Away Score</label>
<input type="number" class="form-control" name="scoreaway1" id="scoreaway1" placeholder="Enter Game 1 Away Score" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="scorehome2">Game 2 Home Score</label>
<input type="number" class="form-control" name="scorehome2" id="scorehome2" placeholder="Enter Game 2 Home Score" required>
</div>
<div class="form-group col-md-6">
<label for="scoreaway2">Game 2 Away Score</label>
<input type="number" class="form-control" name="scoreaway2" id="scoreaway2" placeholder="Enter Game 2 Away Score" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label for="leadhome1">Home Lead</label>
<select name="leadhome1" id="PlayersDropdownHome" class="form-control">
</select>
</div>
<div class="form-group">
<label for="twohome1">Game 1 Home Two</label>
<input name="twohome1" id="PlayersDropdownHome" class="form-control">
</div>
<div class="form-group">
<label for="threehome1">Game 1 Home Three</label>
<input type="text" class="form-control" name="threehome1" id="threehome1" placeholder="Name Of Home Team Third Game 1" required>
</div>
<div class="form-group">
<label for="skiphome1">Game 1 Home Skip</label>
<input type="text" class="form-control" name="skiphome1" id="skiphome1" placeholder="Name Of Home Team Skip Game 1" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="leadaway1">Game 1 Away Lead</label>
<input type="text" class="form-control" name="leadaway1" id="leadaway1" placeholder="Name Of Away Team Lead Game 1" required>
</div>
<div class="form-group">
<label for="twoaway1">Game 1 Away Two</label>
<input type="text" class="form-control" name="twoaway1" id="twoaway1" placeholder="Name Of Away Team Second Game 1" required>
</div>
<div class="form-group">
<label for="threeaway1">Game 1 Away Three</label>
<input type="text" class="form-control" name="threeaway1" id="threeaway1" placeholder="Name Of Away Team Third Game 1" required>
</div>
<div class="form-group">
<label for="skipaway1">Game 1 Away Skip</label>
<input type="text" class="form-control" name="skipaway1" id="skipaway1" placeholder="Name Of Away Team Skip Game 1" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label for="leadhome2">Game 2 Home Lead</label>
<input type="text" class="form-control" name="leadhome2" id="leadhome2" placeholder="Name Of Home Team Lead Game 2" required>
</div>
<div class="form-group">
<label for="twohome2">Game 2 Home Two</label>
<input type="text" class="form-control" name="twohome2" id="twohome2" placeholder="Name Of Home Team Second Game 2" required>
</div>
<div class="form-group">
<label for="threehome2">Game 2 Home Three</label>
<input type="text" class="form-control" name="threehome2" id="threehome2" placeholder="Name Of Home Team Third Game 2" required>
</div>
<div class="form-group">
<label for="skiphome2">Game 2 Home Skip</label>
<input type="text" class="form-control" name="skiphome2" id="skiphome2" placeholder="Name Of Home Team Skip Game 2" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="leadaway2">Game 2 Away Lead</label>
<input type="text" class="form-control" name="leadaway2" id="leadaway2" placeholder="Name Of Away Team Lead Game 2" required>
</div>
<div class="form-group">
<label for="twoaway2">Game 2 Away Two</label>
<input type="text" class="form-control" name="twoaway2" id="twoaway2" placeholder="Name Of Away Team Second Game 2" required>
</div>
<div class="form-group">
<label for="threeaway2">Game 2 Away Three</label>
<input type="text" class="form-control" name="threeaway2" id="threeaway2" placeholder="Name Of Away Team Third Game 2" required>
</div>
<div class="form-group">
<label for="skipaway2">Game 2 Away Skip</label>
<input type="text" class="form-control" name="skipaway2" id="skipaway2" placeholder="Name Of Away Team Skip Game 2" required>
</div>
</div>
</div>