表单中字段的2个名称属性

Question

I have a script that calculates the values in each and shows the calulated values. At the end it also calculates the already calculated values from all div's

Here is the html code:

<td>
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value />
<input name="p" class="pack" type="text" maxlength="255" size="5" value />
<span class="amount"></span>
</div>
</td>

<td>
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value />
<input name="p" class="pack" type="text" maxlength="255" size="5" value />
<span class="amount"></span>
</div>
</td>

The problem is that I want to put all fields in a form and then submit them to a database. However, all divs contain two input fields with name "r" and "p".

So, I am kind of stuck here because I cannot figure out how to make the names unique or how to have them passed to the DB using POST.

This is what the calculating script looks like:

<script type="text/javascript">//<![CDATA[ 

//any time the amount changes
$(document).ready(function() {
    $('input[name=r],input[name=p]').change(function(e) {
        var total = 0;
        var $row = $(this).parent();
        var rate = $row.find('input[name=r]').val();
        var pack = $row.find('input[name=p]').val();

        total = parseFloat(rate * pack);
        //update the row total
        $row.find('.amount').text(total);

        var total_amount = 0;
        $('.amount').each(function() {
            //Get the value
            var am= $(this).text();
            console.log(am);
            //if it's a number add it to the total
            if (IsNumeric(am)) {
                total_amount += parseFloat(am, 10);
            }
        });
        $('.total_amount').text(total_amount);
    });
});

//isNumeric function Stolen from: 
//http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric

function IsNumeric(input) {
    return (input - 0) == input && input.length > 0;
}
//]]>  

</script>

Answer 1

HTML:

<input type="text" name="r[]">
<input type="text" name="p[]">
<hr>
<input type="text" name="r[]">
<input type="text" name="p[]">
<hr>
<input type="text" name="r[]">
<input type="text" name="p[]">

PHP:

for ($i = 0; $i < count($_POST['p']); $i++) {
    $rate = $_POST['r'][$i];
    $pack = $_POST['p'][$i];
    // do something with $rate and $pack
}

Since the browser submits all inputs (even if no value has been entered) and by specification it submits them in the order they are defined in the HTML code, you can rely that the elements in the two $_POST arrays will line up and the corresponding rate and pack will be received at the same index in the respective array.