javascript - 将 html 表单中的值保持在设定值以下

Question

在我的表格中，有 3 个捆绑包可供选择。让我们称它们为 Bundle 1、2 和 3。

表格看起来像这样......

最多选择 3 个捆绑包。输入您需要的最大数量 3 的总数：
捆绑 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>&lt;/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&auml;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&uuml;romitarbeiter</option>
        <option value="Receptionist">Sekret&auml;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&ouml;&szlig;e<span class="formAsterisk">*</span>:<br />
        <select title="Number of Employees" id="00N50000001puIH" class="textInput" name="00N50000001puIH">
        <option value="">--Ausw&auml;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>

例如，您只能输入 Bundle 1:0、Bundle 2:1 和 Bundle 3:2。

不确定这是否是使用文本输入框的最佳方式，但欢迎提出建议。

如何使用 Javascript 实现这一目标？

谢谢

score 3 · Accepted Answer

像这样的 jsFiddle 示例怎么样？

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>

score 1 · Accepted Answer

像这样的东西？

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

<form name="bundles">
<label for="bundle1">Bundle 1:<br /></label>
<input type="text" maxlength="1" size="10" id="bundle1" class="textInput" name="bundle1" onchange="countBundles()"/>
<label for="bundle2">Bundle 2:<br /></label>
<input type="text" maxlength="1" size="10" id="bundle2" class="textInput" name="bundle2" onchange="countBundles()"/>
<label for="bundle3">Bundle 3:<br /></label>
<input type="text" maxlength="1" size="10" id="bundle3" class="textInput" name="bundle3" onchange="countBundles()"/>
</form>

javascript - 将 html 表单中的值保持在设定值以下

2 回答 2

Related

Reference