1

個人用と法人用に別々のフォーミュラリーを作ろうとしています

訪問者が「個別」ラジオボタンをチェックすると、フォームが表示されます

訪問者が「法人」ラジオボタンをチェックすると、別のフォームが表示されます

 <fieldset>
                    <input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important">
                    <strong>Individual Form</strong><br/>

                    <input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important">
                    <strong>Corporation Form</strong>

            <!-- If Individual Form is checked -->
            <legend>Personal Data</legend>
            <label for="Name">Full Name</label>
            <input id="Name" type="text" />
            <label for="City">City</label>
            <input id="City" type="text" />
            <label for="Email">Email</label>
            <input id="Email" type="text" />

            <!-- If Corporation Form is checked -->
            <legend>Corporation Data</legend>
            <label for="Name">Name</label>
            <input id="Name" type="text" />
            <label for="City">City</label>
            <input id="City" type="text" />
            <label for="Email">Email</label>
            <input id="Email" type="text" />

        </fieldset>

Ps: 他の JavaScript のため<fieldset>、既存のもの以外は使用できません。

4

1 に答える 1

2

<div>ID を持つタグだけでも、表示/非表示を切り替えるには、フィールドの周りに何かをラップする必要があります。

次に、ラジオ ボタンにonchange&onmouseupイベント ハンドラーを追加します (クリックして値を変更したり、キーボードを使用したりする人を考慮するため)。例えば。

<script type="text/javascript">
function onchange_handler(obj, id) {
    var other_id = (id == 'personal')? 'corporate' : 'personal';
    if(obj.checked) {
        document.getElementById(id + '_form_fields').style.display = 'block';
        document.getElementById(other_id + '_form_fields').style.display = 'none';
    } else {
        document.getElementById(id + '_form_fields').style.display = 'none';
        document.getElementById(other_id + '_form_fields').style.display = 'block';
    }
}
</script>
<fieldset>
    <input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onchange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');">
    <strong>Individual Form</strong><br/>

    <input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');">
    <strong>Corporation Form</strong>

    <!-- If Individual Form is checked -->
    <div id="personal_form_fields">
        <legend>Personal Data</legend>
        <label for="Name">Full Name</label>
        <input id="Name" type="text" />
        <label for="City">City</label>
        <input id="City" type="text" />
        <label for="Email">Email</label>
        <input id="Email" type="text" />
    </div>

    <!-- If Corporation Form is checked -->
    <div id="corporate_form_fields" style="display: none;">
        <legend>Corporation Data</legend>
        <label for="Name">Name</label>
        <input id="Name" type="text" />
        <label for="City">City</label>
        <input id="City" type="text" />
        <label for="Email">Email</label>
        <input id="Email" type="text" />
    </div>
</fieldset>
于 2013-02-19T23:31:32.930 に答える