1

USA と CANADA を表す 2 つのラジオ ボタンがあります。USA ラジオ ボタンを選択した場合、div タグに Address1、Address2、County、State、Email、および 2 つのチェック ボックスを表示する必要がありました。1 つは電子メールのニュース レターを選択するオプションで、もう 1 つは Twitter の更新を選択するオプションです。

また、CANADA ラジオ ボタンを選択すると、住所 1、都道府県、電子メールの div タグと、電子メール ニュース レター用の 1 つのチェック ボックスが必要でした。注: ここでは、住所 2、郡のテキスト ボックス、および Twitter のチェックボックスは必要ありません。

ユーザーが必要な情報を入力したら、spring:bind を使用して、選択した国のラジオの値を含むすべての値を myRegistrationForm.address (アドレスは、address1、address 2、county、state、email、country の String プロパティと emailNewsLetter、twitterUpdates ブール プロパティを持つ複雑なオブジェクトです) にキャプチャしたいと考えました。

これが私が達成しようとしているサンプルスニペットです。助けてくれてありがとう。

<td>
<spring:bind path="registerForm.address">
<input type="radio" name="country" value="USA" <c:if test='${status.value == "USA"}'>checked</c:if>> USA
<!-- If above radio is selected I need  dynamic div table with some textboxes and 2 check boxes and needs to be captured -->
<c:if test='${status.value == "USA"}'>
    <div id="address-usa">
        Address 1: <input type="text" name="addressOne"/>
        Address 2: <input type="text" name="addressTwo"/>
        County: <input type="text" name="county"/>
        State: <input type="text" name="state"/>
        Email: <input type="email" name="email"/>
        <input type="checkbox" value="NEWSLETTER">E-Mail News Letter
        <input type="checkbox" value="twitter">Twitter Updates
    </div>
</c:if> 

<input type="radio" name="country" value="CANADA" <c:if test='${status.value == "CANADA"}'>checked</c:if>> CANADA
<c:if test='${status.value == "CANADA"}'>
    <div id="address-canada">
        Address 1: <input type="text" name="addressOne"/>
        <!-- Note I dont need address 2 and county for canada -->
        State: <input type="text" name="state"/>
        Email: <input type="email" name="email"/>
        <input type="checkbox" value="NEWSLETTER">E-Mail News Letter
        <!-- No twitter updates for canada customers -->
    </div>
</c:if> 
</spring:bind>
</td>

より正確に言うと、次のようにラップされた html/jsp コードを怒鳴りつけたかった<spring:nestedPath/> <spring:bind> <c:foreach> <c:if>

http://jsfiddle.net/eKFrW/298/を使用して次のコードを実行できます。

<label><input id="rdb1" type="radio" name="toggler" value="1" />USA</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />CANADA</label>

<div id="blk-1" class="toHide" style="display:none">
    Address 1: <input type="text" name="addressOne"><br/>
    Address 2: <input type="text" name="addressTwo"><br/>
    County : <input type="text" name="county"><br/>
    Email : <input type="email" name="email"><br/>
    E-mail News Letter: <input type="checkbox" name="emailLetter">
    Twitter Updates : <input type="checkbox" name="twitterUpdates">
</div>
<div id="blk-2" class="toHide" style="display:none">
    Address 1: <input type="text" name="addressOne"><br/>
    Email : <input type="email" name="email"><br/>
    E-mail News Letter: <input type="checkbox" name="emailLetter">
</div>​

関連する Java スクリプト:

$(function() {
    $("[name=toggler]").click(function(){
            $('.toHide').hide();
            $("#blk-"+$(this).val()).show('slow');
    });
 });​
4

0 に答える 0