javascript - 設定された量より下のhtml形式で値を保持します

Question

私のフォームでは、3つのバンドルから選択する必要があります。それらをバンドル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>

したがって、たとえば、バンドル1：0、バンドル2：1、およびバンドル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