Question

I am self-learner and I am currently building (trying to build) a simple form that has a row with 3 fields, and which dynamically adds another row with the same fields depending on how many items the customer wants. It will have a limit of 20 items. I am using this html layout for the fields that are going to be added dynamically:

<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>

and this java script:

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>

My question is: How can I get the variables into PHP so I can send this form to a specific email.

please note: I have more fields on the form and to gather the information in php I am using the following php script:

$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'];

and to post it on the email i am using this to test:

$body = <<<EOD

---

---

Email: $email
Company Name: $company_name
Date: $date
Phone: $phone
$part1 | $description1 | $quantity1
EOD;

I know by gathering the variables of dynamic values, there needs to be a different code and I am stuck there. If someone can direct me to the right solution I will appreciate that very much.

Answer 1

You can use arrays:

<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>

Using following code you can remove and clone individual inputs:

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');
    }
});

See the fiddle.

You can now access individual inputs fields in PHP using array keys:

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);