I'm working on a website where people can sign up for an event. We've got 8 different teams, based on superhero's. Every team should choose 1 of the 8 superhero's, but non of them should choose the same one.
Is it possible to write some code to disable an option (for every new visitor of the website) after someone has chosen that superhero?
So if 2 people has chosen a superhero, there will only be 6 choices left. These six will be visable, but non-clickable.
So my html form code is (some titles/names are Dutch;)):
<form action="inschrijfformulier.php" method="post" id="cc-m-form-6876142651" target="_blank" class="cc-m-form cc-m-form-layout-1" onsubmit="javascript: setTimeout(function(){location.reload();}, 1000);return true;">
<div class="cc-m-form-loading"></div>
<div class="cc-m-form-view-sortable">
<div class="cc-m-form-view-element cc-m-form-select" data-action="element" required>
<label for="ma6b8be54cf86a6410">
<div>Kies welke held jouw team is!</div>
</label>
<div class="cc-m-form-view-input-wrapper">
<select name="teamnaam" class="cc-m-form-element-input" required>
<option value="" selected disabled hidden>Selecteer</option>
<option value="Superman">Superman</option>
<option value="Batman">Batman</option>
<option value="X-Men">X-Men</option>
<option value="MegaMindy">Mega Mindy</option>
<option value="Spiderman">Spiderman</option>
<option value="TheHulk">The Hulk</option>
<option value="HitGirl">Hit Girl</option>
<option value="Meerminman">Meerminman</option></select></div></div>
<input type="submit" value="Naar betalen" data-action="formButton">
So if you make a selection and submit the form, it wil link to inschrijfformulie.php, this .php file contains:
<?php
$name = $_POST['teamnaam'];
$email = $_POST['email'];
$rekeninghouder = $_POST['rekeninghouder'];
$aantalspelers = $_POST['aantalspelers'];
$spelernamen = $_POST['spelernamen'];
$formcontent="Teamnaam: $name
Email: $email
Rekeninghouder: $rekeninghouder
Aantal spelers: $aantalspelers
Spelers: $spelernamen";
$recipient = "info@sidekickevents.nl";
$subject = "Inschrijfformulier";
$mailheader = "From: $email
";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
header("Location: https://www.ticketkantoor.nl/shop/bubbelvoetbal");
exit;
?>
This makes sure that i'm getting an email with the information they fill in. This works great, I also can see wich superhero they've chosen. Hopefully someone can explain it, because i'm new to php! Thanks in advance!
There is only one way to do it and it is related with server side. First you pick the user's choice:
Let's assume that your selectbox id is "heroes-combo" and you are using jQuery.
// this gives you the selected option's value.
$("#heroes-combo option:selected").attr("value");
Now send it to server side via ajax.
When a user enters the website you need to query your database which heroes are already selected. Lets say the database returns Ironman.
You then need to mark it as disabled like this:
$("#heroes-combo option[value='Ironman']").attr("disabled", true)
First, whenever an option is selected, save it in server. While drawing the list box value, consider the already selected (From Storage) and disable the option.
Check,
<option value="Mega Mindy" disabled>Mega Mindy</option>
<div>
<select>
<option value="Superman">Superman</option>
<option value="Batman">Batman</option>
<option value="X-Men">X-Men</option>
<option value="Mega Mindy" disabled>Mega Mindy</option>
<option value="Spiderman">Spiderman</option>
<option value="The Hulk">The Hulk</option>
<option value="Hit Girl">Hit Girl</option>
<option value="Meerminman">Meerminman</option></select></div></div>
You can use the code,
$('select').change(function(){
var value = $(this).val();
$(this).children('option').each(function() {
if ( $(this).val() === value ) {
$(this).attr('disabled', true);
}
});
});