选择一次后禁用下拉选项

时间:2017-12-06 08:42:28

标签: javascript php html5

我正在一个人们可以报名参加活动的网站上工作。我们有8个不同的团队,基于超级英雄。每个团队都应该选择8个超级英雄中的1个,但是不应该选择相同的超级英雄。

在有人选择那个超级英雄后,是否可以编写一些代码来禁用一个选项(对于网站的每个新访问者)?

因此,如果2个人选择了超级英雄,那么只剩下6个选择。这些选择的选项是可见的,但不可点击。

所以我的html表单代码是(某些标题/名称是荷兰语;)):

<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">

因此,如果你做出选择并提交表格,它将链接到inschrijfformulie.php,这个.php文件包含:

<?php 
$name = $_POST['teamnaam'];
$email = $_POST['email'];
$rekeninghouder = $_POST['rekeninghouder'];
$aantalspelers = $_POST['aantalspelers'];
$spelernamen = $_POST['spelernamen'];
$formcontent="Teamnaam: $name \nEmail: $email \nRekeninghouder: $rekeninghouder \nAantal spelers: $aantalspelers \nSpelers: $spelernamen";
$recipient = "info@sidekickevents.nl";
$subject = "Inschrijfformulier";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
header("Location: https://www.ticketkantoor.nl/shop/bubbelvoetbal");
exit;
?>

这确保我收到他们填写的信息的电子邮件。这很有效,我也可以看到他们选择的超级英雄。 希望有人可以解释一下,因为我是php的新手! 提前谢谢!

1 个答案:

答案 0 :(得分:0)

让html禁用OPTION

<select name="teamnaam">
    <option value="a">A</option>
    <option value="b" selected="selected">B</option>
    <option value="c" disabled="disabled">C</option>
    <option value="d">D</option>
</select>

对于javascript来禁用OPTION

var dropDown = document.getElementsByName("teamnaam");
var dropDownOptions = dropDown[0].getElementsByTagName("OPTION");
for( var optIdx in dropDownOptions ){
    if(dropDownOptions[optIdx].value == 'd' ){
        dropDownOptions[optIdx].setAttribute("disabled", "disabled");
    }
}

备注,它只处理UI ,限制英雄选择计数的数量的逻辑应由PHP处理。