0

php/CodeIgniter アプリを継承しています。理由をすべて説明することなく、値を textarea フィールドにフィードする必要があるため、大量のデータをグループ化して別のアプリ/外部ベンダーのフィールドに送信できます。今回が初めてですが、これが最後ではないと思いますので、備えておきたいと思います。

詳細：

多数のフィールドを含む Web フォーム。これは、クライアントが制御する自己生成 php/CodeIgniter アプリであるため、フィールドはクライアントごとに異なります。

特定のクライアントは、フォーム内のフィールドの 3、5、7 などから、1 つのフィールドのすべてのデータを受信する外部ベンダーにデータを送信する必要がある場合があります。つまり、jQuery を使用して、特定のフィールドからテキストエリア フィールドにデータを送信したいと考えています。

たとえば、センター タイトル、フル ネーム、フルーツを、それぞれの末尾に改行を付けて textarea フィールドに送りたいとします。もちろん、ユーザーがフィールドを空にすると、その項目は textarea フィールドから削除されます。

私の jsFiddle デモを表示するには、ここをクリックしてください。

HTML の例:

<form method="post">
<br />
<br />
<fieldset name="Group1" style="border: thin; border-color: green">
    <legend>General Information</legend>
    <table style="width: 100%">
        <tr>
            <td style="width: 249px">Center Title:</td>
            <td>
                <select name="centers" id="centers">
                    <option value="Corp 1">Corp 1</option>
                    <option value="Shamrock Gold">Shamrock Gold</option>
                    <option value="Hensin Way">Hensin Way</option>
                </select>
            </td>
        </tr>
        <tr>
            <td style="width: 249px">Full Name:</td>
            <td>
                <input name="fullname" id="fullname" type="text" size="20" />
            </td>
        </tr>
        <tr>
            <td style="width: 249px">Job Title:</td>
            <td>
                <input name="jobtitle" id="jobtitle" type="text" />
            </td>
        </tr>
        <tr>
            <td style="width: 249px">Known Alergies:</td>
            <td>
                <input name="knownAllergies" id="knownAllergies" type="checkbox" value="Yes" />Yes
                <input name="knownAllergies" id="knownAllergies" type="checkbox" value="No" />No
            </td>
        </tr>
        <tr>
            <td style="width: 249px; height: 102px;">How Many?:</td>
            <td style="height: 102px">
                <select multiple="multiple" name="Select2">
                    <option value="one">one</option>
                    <option value="two">two</option>
                    <option value="three">three</option>
                </select>
            </td>
        </tr>
        <tr>
            <td style="width: 249px">Fruits:</td>
            <td>
                <input name="Fruit[]" id="Fruit[]" type="radio" checked="checked" value="Apple" />Apple<br />
                <input name="Fruit[]" id="Fruit[]" type="radio" value="Orange" />Orange<br />
                <input name="Fruit[]" id="Fruit[]" type="radio" value="Fruit" />Fruit
            </td>
        </tr>
    </table>
    <label>Complete Info:</label>
    <textarea name="allVendorInfo" id="allVendorInfo" cols="50" rows="7"></textarea><br />
    <br />
</fieldset>
</form>
​
4

3 に答える 3

1

次のコードを使用して、選択項目/ユーザー入力にアクセスできます

 $(document).ready(function(){
    $("input").change(function(e){
        if($(this).is(':checked')){
        }else{                                  
        };
        var old = $('#allVendorInfo').val();
        $('#allVendorInfo').val(old+ "%" + $(this).attr('name') + '|'+$(this).val() + "%");

    });
    $("select").change(function(e){
        var old = $('#allVendorInfo').val();
        $('#allVendorInfo').val(old+ "%" + $(this).attr('name') + '|'+$(this).val() + "%"); 
    });     
});​
于 2012-04-17T14:58:49.010 に答える
1

編集:元のフィドルが何らかの理由で壊れていたため、リンクを更新しました

私はこれに沿って何かを考えていました: http://jsfiddle.net/JRwzz/3/

これの「トリガー」は、もちろん、Run JS ボタン以外のものである可能性があります。たとえば、送信またはその他のユーザー アクションにあると思います。

最初にテキストエリアをクリアし、要素のタイプ (チェックボックス、ラジオ、選択など) に応じて、すべての入力と選択をループします。わずかに異なる方法を使用して値を取得します (たとえば、チェックボックスの場合は、取得したいだけです)。チェックされたものからの値)

チェックボックス グループの値をすべて 1 行にまとめるには、少し洗練が必要ですが、アイデアを得るにはこれで十分だと思います。

次に、見つかったものごとにそれをテキストエリアに追加し、最後に改行を置きます。

テキストエリアに含める前に、別の属性 (例: data-export="yes") をチェックする条件を追加することはそれほど難しくありません。

すべてのフォームが動的であるとあなたが言ったので、私はそれをこのように考えたので、IDや名前に頼る必要がないようにしました. フォームを生成して、テキストエリアに含めたい属性を html に出力するコードを取得できる場合 (および、管理エリアに適用するものをクライアントが選択する方法)、それは 'クライアントごとに JS をいじる手間を省くことができます。

于 2012-04-17T15:18:34.623 に答える
0

次のようなことを試してください：

$("select, input").bind("change keyup", function() {
var form = $("<form>");
var data = new Object();

form.append($(":checked").clone());

$.each($("select"), function(i, item) {
    if ($(item).val() != null) {
        form.append(($(item).clone()));
    }
});

$.each($("input[type='text']"), function(i, item) {
    if ($(item).val().length > 0) form.append(($(item).clone()));
});

$("#allVendorInfo").val(form.serialize());

}).first().trigger("change");​
于 2012-04-17T15:30:10.097 に答える