Javascript 将html表单中的值保持在设定值以下
在我的表格中，有3个包可供选择。让我们把它们称为Bundle 1、Bundle 2和Bundle 3 表格看起来像这样 最多选择3个捆绑包。输入您所需的最大数量（共3个）：Javascript 将html表单中的值保持在设定值以下,javascript,html,forms,Javascript,Html,Forms,在我的表格中，有3个包可供选择。让我们把它们称为Bundle 1、Bundle 2和Bundle 3 表格看起来像这样 最多选择3个捆绑包。输入您所需的最大数量（共3个）： 捆绑包1[] 捆绑包2[] 束3[] 标记当前为： <div id="formArea"><label for="first_name">Vorname<span class="formAsterisk">*</span>:<br /> </l
捆绑包1[]
捆绑包2[]
束3[] 标记当前为：
<div id="formArea"><label for="first_name">Vorname<span class="formAsterisk">*</span>:<br />
</label> <input type="text" maxlength="40" size="40" id="first_name" class="textInput" name="first_name" /></div>
<div id="formArea"><label for="last_name">Nachname<span class="formAsterisk">*</span>:<br />
</label> <input type="text" maxlength="80" size="40" id="last_name" class="textInput" name="last_name" /></div>
<div id="formArea"><label for="company">Firma<span class="formAsterisk">*</span>:<br />
</label> <input type="text" maxlength="40" size="40" id="company" class="textInput" name="company" /></div>
<div id="formArea">An welchem Bundle sind Sie interessiert? (Max Qty 3)<span class="formAsterisk"> *</span>:<br />
<label for="bundle1">Bundle 1: <select name="bundle1">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></label> <label for="bundle2">Bundle 2: <select name="bundle2">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></label> <label for="bundle3">Bundle 3: <select name="bundle3">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></label></div>
<div id="formArea"><label for="email">Email<span class="formAsterisk">*</span>:<br />
</label> <input type="text" maxlength="40" size="40" id="email" class="textInput" name="email" /></div>
<div id="formArea"><label for="phone">Telefonnummer<span class="formAsterisk">*</span>:<br />
</label> <input type="text" maxlength="40" size="40" id="phone" class="textInput" name="phone" /></div>
<div id="formArea">Adresse<span class="formAsterisk">*</span>:<br />
<textarea type="text" id="00N50000001puIQ" class="textInput" wrap="soft" cols="40" name="00N50000001puIQ"></textarea></div>
<div id="formArea">Stadt<span class="formAsterisk">*</span>:<br />
<input type="text" maxlength="40" size="40" id="00N50000001puIC" class="textInput" name="00N50000001puIC" /></div>
<div id="formArea">PLZ<span class="formAsterisk">*</span>:<br />
<input type="text" maxlength="20" size="40" id="00N50000001puIZ" class="textInput" name="00N50000001puIZ" /></div>
<div id="formArea">Land<span class="formAsterisk">*</span>:<br />
<select title="Lead Country" id="00N50000001puID" class="textInput" name="00N50000001puID">
<option value="">--Auswählen--</option>
<option value="Austria">Austria</option>
<option value="Belgium">Belgium</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Ireland">Ireland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Spain">Spain</option>
<option value="Portugal">Portugal</option>
<option value="Switzerland">Switzerland</option>
<option value="Italy">Italy</option>
<option value="Netherlands">Netherlands</option>
<option value="Luxembourg">Luxembourg</option>
<option value="OTHER">OTHER</option>
</select></div>
<div id="formArea">Position<span class="formAsterisk">*</span>:<br />
<select title="Job Role" id="00N50000001puIX" class="textInput" name="00N50000001puIX">
<option value="Administrative assistant">Assistant/in</option>
<option value="Customer Services Manager">Callcenter Manager/in</option>
<option value="Director">Director</option>
<option value="Facilities Manager">Einkaufsleiter</option>
<option value="IT Manager">IT-Manager</option>
<option value="Office Manager">Personalleiter/in</option>
<option value="Office Worker">Büromitarbeiter</option>
<option value="Receptionist">Sekretärin</option>
<option value="Sales Manager / Representative">Vertriebsmitarbeiter</option>
<option value="Team Leader / Manager">Teamleiter</option>
<option value="Telecommunications Manager">Telekommunikationsmanager</option>
<option value="Other">Sonstiges</option>
</select></div>
<div id="formArea">Unternehmensgröße<span class="formAsterisk">*</span>:<br />
<select title="Number of Employees" id="00N50000001puIH" class="textInput" name="00N50000001puIH">
<option value="">--Auswählen--</option>
<option value="10 or less">10 oder weniger</option>
<option value="11-49">11-49</option>
<option value="50-99">50-99</option>
<option value="100-249">100-249</option>
<option value="250-499">250-499</option>
<option value="500 or more">500 oder mehr</option>
</select></div>
<div id="formArea"><label for="first_name"> <input type="checkbox" name="marketing" id="marketing" /> Opt-in for regular marketing<span class="formAsterisk">*</span><br />
</label></div>
<div id="formArea"><input type="submit" name="submit" value="Jetzt Testen" /></div>
Vorname*：
Nachname*：
菲尔玛*：
你有兴趣吗？（最多3个）*:
捆绑包1：
0
1.
2.
3.
捆绑包2：
0
1.
2.
3.
捆绑包3：
0
1.
2.
3.
电子邮件*：
Telefonnummer*：
地址*：
Stadt*：
PLZ*：
土地*：
--Auswä；赫伦--
奥地利
比利时
大不列颠联合王国
爱尔兰
法国
德国
西班牙
葡萄牙
瑞士
意大利
荷兰
卢森堡
其他
职位*：
助理/资讯科技
呼叫中心经理/in
经理
艾因考夫斯莱特
IT经理
个人登录
Bü；罗米塔贝特
Sekretä；林
Vertriebsmitarbeiter
提姆莱特
电信通信经理
桑斯蒂格斯
UNTERNEMENSGRö&斯兹利格；e*：
--Auswä；赫伦--
10奥德韦尼格尔酒店
11-49
50-99
100-249
250-499
500奥德梅尔
选择常规营销*
<script type="text/javascript">
function countBundles(){
var bundle1 = parseInt(document.getElementById('bundle1').value, 10);
var bundle2 = parseInt(document.getElementById('bundle2').value, 10);
var bundle3 = parseInt(document.getElementById('bundle3').value, 10);
if (bundle1+bundle2+bundle3>3){
alert("too many bundles");
}
}
</script>
函数countBundles（）{
var bundle1=parseInt（document.getElementById（'bundle1'）。值，10）；
var bundle2=parseInt（document.getElementById（'bundle2'）。值，10）；
var bundle3=parseInt（document.getElementById（'bundle3'）。值，10）；
如果（bundle1+bundle2+bundle3>3）{
警报（“捆绑包太多”）；
}
}
捆绑包1:
捆绑包2:
捆绑包3:
<script type="text/javascript">
function countBundles(){
var bundle1 = parseInt(document.getElementById('bundle1').value, 10);
var bundle2 = parseInt(document.getElementById('bundle2').value, 10);
var bundle3 = parseInt(document.getElementById('bundle3').value, 10);
if (bundle1+bundle2+bundle3>3){
alert("too many bundles");
}
}
</script>
函数countBundles（）{
var bundle1=parseInt（document.getElementById（'bundle1'）。值，10）；
var bundle2=parseInt（document.getElementById（'bundle2'）。值，10）；
var bundle3=parseInt（document.getElementById（'bundle3'）。值，10）；
如果（bundle1+bundle2+bundle3>3）{
警报（“捆绑包太多”）；
}
}
捆绑包1:
捆绑包2:
捆绑包3:
像这样的东西怎么样
jQuery
var x = 3;
$('select').change(function() {
var sum = 3;
$('select').each(function() {
sum = sum - $(this).val();
});
$('select').not($(this)).each(function() {
// console.log($(this).val());
$('option', this).each(function() {
$(this).prop('disabled',($(this).val() > sum)?true:false);
});
});
});
HTML
<label for="bundle1">Bundle 1:
<select name="bundle1">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></label>
<label for="bundle2">Bundle 2:
<select name="bundle2">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></label>
<label for="bundle3">Bundle 3:
<select name="bundle3">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></label>
Bundle 1：
0
1.
2.
3.
捆绑包2：
0
1.
2.
3.
捆绑包3：
0
1.
2.
3.
像这样的东西怎么样
jQuery
var x = 3;
$('select').change(function() {
var sum = 3;
$('select').each(function() {
sum = sum - $(this).val();
});
$('select').not($(this)).each(function() {
// console.log($(this).val());
$('option', this).each(function() {
$(this).prop('disabled',($(this).val() > sum)?true:false);
});
});
});
HTML
<label for="bundle1">Bundle 1:
<select name="bundle1">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></label>
<label for="bundle2">Bundle 2:
<select name="bundle2">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></label>
<label for="bundle3">Bundle 3:
<select name="bundle3">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></label>
Bundle 1：
0
1.
2.
3.
捆绑包2：
0
1.
2.
3.
捆绑包3：
0
1.
2.
3.
您是在使用算法还是javascript基础知识？能否显示表单标记？javascript。试图通过搜索该网站来寻找解决方案，但无法找到任何答案。你能对你迄今为止尝试过的内容稍加修改吗？@PedrodelSol添加了我目前拥有的标记。你是在与算法或javascript基础知识作斗争吗？你能显示你的表单标记吗？javascript。试图通过搜索该网站来寻找解决方案，但无法找到任何答案。请您对您迄今为止尝试的内容稍加修改好吗？@PedrodelSol添加了我目前的标记。我最终选择了您的解决方案，非常感谢，但。。。如果我在表单中添加其他下拉菜单选项，它将不再工作。我们怎样才能避开这个问题？谢谢，我需要看看你做了什么改变来决定。嗨，我刚刚在原始问题中添加了表单的完整标记。我相信它不起作用的原因实际上是因为其他的下拉列表。也许您的代码可以调整为指定bundle1、bundle2和bundle3？我现在正在查看。我能告诉你的第一件事是你的ID必须是唯一的。现在您正在复制一些（例如，formArea
），这就是您的问题所在。如果使用唯一ID，则可以引用特定的选择组。因此，不要使用$（'#select'）
，而是使用$（'#formarax select'）
，其中#formarax
是唯一的ID父分区。我最终选择了您的解决方案，非常感谢，但是。。。如果我在表单中添加其他下拉菜单选项，它将不再工作。我们怎样才能避开这个问题？谢谢，我需要看看你做了什么改变来决定。嗨，我刚刚在原始问题中添加了表单的完整标记。我相信它不起作用的原因实际上是因为其他的下拉列表。也许您的代码可以调整为指定bundle1、bundle2和bundle3？我现在正在查看。我能告诉你的第一件事是你的ID必须是唯一的。现在您正在复制一些（例如，formArea
），这就是您的问题所在。如果使用唯一ID，则可以引用特定的选择组。因此，不要使用$（'#select'）
，而是使用$（'#formarax select'）
，其中#formarax
是唯一的ID父div。