0

私は自己学習者であり、現在、3 つのフィールドを持つ行を持ち、顧客が必要とするアイテムの数に応じて同じフィールドを持つ別の行を動的に追加する単純なフォームを構築しています (構築しようとしています)。20点限定とさせていただきます。動的に追加されるフィールドにこの html レイアウトを使用しています。

<div id="input1" style="margin-bottom:4px;" class="clonedInput">
        Part #: <input name="part'+i+'" type="text" id="part1" size="10" maxlength="15" />
        Description: <input name="description'+i+'" type="text" id="description1" size="30" maxlength="50" />
        Qty: <input name="quantity'+i+'" type="text" id="quantity1" size="5" maxlength="5" />
    </div>
    <p>&nbsp;</p>
    <div>
        <input type="button" id="btnAdd" onclick="dupForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="add item" />
        <input type="button" id="btnDel" onclick="rmForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="remove item" />
    </div>

そしてこのJavaスクリプト：

function trimNums(stringToTrim) { return stringToTrim.replace(/\d+$/,""); }

    function dupForm(divId, divClass, btnAdd, btnRm)
    {
    //alert(divId+'   '+divClass);
        var num     = $(divClass).length;
        var newNum  = new Number(num + 1);
        var i;

        var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).fadeIn('slow');

        for (i=0; i < newElem.children().length; i++)
        {
            var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
            var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));

            newElem.children(':eq('+i+')').attr('id', attrId + newNum).val('');
        }
        $('#' + divId + num).after(newElem);
        $('#' + btnRm).attr('disabled','');

        if (newNum == 20)
            $('#' + btnAdd).attr('disabled','disabled');
    }

    function rmForm(divId, divClass, btnAdd, btnRm)
    {
        var num = $(divClass).length;

        $('#' + divId + num).remove();
        $('#' + btnAdd).attr('disabled','');

        if (num-1 == 1)
            $('#' + btnRm).attr('disabled','disabled');
    }
    </script>

私の質問は、このフォームを特定の電子メールに送信できるように、変数を PHP に取り込むにはどうすればよいかということです。

注意してください: フォームにはさらにフィールドがあり、php で情報を収集するために、次の php スクリプトを使用しています。

$emailField = $_POST['email'];
$company_nameField = $_POST['company_name'];
$dateField = $_POST['date'];
$phoneField = $_POST['phone'];

$part1Field = $_POST['part1'];
$part2Field = $_POST['part2'];

$description1Field = $_POST['description1'];
$description2Field = $_POST['description2'];

そして、これをテストに使用している電子メールに投稿するには：

$body = <<<EOD


メールアドレス: $email
会社名: $company_name
日付: $date
電話番号: $phone
$part1 | $description1 | $quantity1
EOD;

動的値の変数を収集することで、別のコードが必要であり、そこで立ち往生していることがわかります。誰かが私を正しい解決策に導くことができれば、私はそれをとても感謝しています.

4

1 に答える 1

2

配列を使用できます：

<div id="inputContainer">
    <div class="clonedInput">
        Part #: <input name="part[]" type="text" class="part" size="10" maxlength="15" />
        <button type="button" class="remove">Remove</button>
        <button type="button" class="clone">Clone</button>
    </div>
</div>
<div id="toolbar">
        <button type="button" class="add">Add new</button>
</div>

次のコードを使用すると、個々の入力を削除して複製できます。

var limit = 20;
$('#inputContainer').on('click', '.clonedInput>.remove', function(e) {
    $(this).parent().fadeOut().remove();
    if ($(this).parent().parent().length < limit) {
        $('#toolbar>.add').removeAttr('disabled');
    }
});

$('#toolbar').on('click', '.add', function(e) {
    var newElem = $('<div class="clonedInput">\
        Part #: <input name="part[]" type="text" class="part" size="10" maxlength="15" />\
        <button type="button" class="remove">Remove</button>\
        <button type="button" class="clone">Clone</button>\
    </div>');


    $('#inputContainer').append(newElem);
    if($('#inputContainer').length == limit) {
        $('#toolbar>.add').attr('disabled', 'disabled');
    }
});

$('#inputContainer').on('click', '.clonedInput>.clone', function(e) {
    var newElem = $(this).parent().clone().fadeIn('slow');

    $(this).parent().after(newElem);
    if ($(this).parent().parent().length == limit) {
        $('#toolbar>.add').attr('disabled', 'disabled');
    }
});

フィドルを参照してください。

配列キーを使用して、PHP の個々の入力フィールドにアクセスできるようになりました。

echo $_POST['part'][0]; // first 'part' field

// print all fields
$mailData = '';
for($i = 0; $i < count($_POST['part']); $i++) {
    $mailData .= '#' . $_POST['part'][$i] . ' | ';
    $mailData .= $_POST['description'][$i] . ' | ';
    $mailData .= $_POST['quantity'][$i] . PHP_EOL;//or replace PHP_EOL for "<br>\n" it will work just fine

}

$body = <<<EOD
Email: $email
Company Name: $company_name
Date: $date
Phone: $phone
$mailData
EOD;


your_mail_function($body);
于 2013-01-21T20:46:16.897 に答える