2 name attributes for a field in a form

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>

It depends very much on the server-side script that would receive this form. The browser has no problem to submit a form with several inputs sharing the same name; the receiving script however might have. For example, PHP does not support inputs sharing the same name, and will keep only the latest occurence, _unless_ you name the inputs `r[]` and `p[]`, in which case PHP will consider them as arrays of values and you can handle all of the entered values. — lanzz, Sep 19 '12 at 15:05
So, for example if I use name="p[]" and get the value by using $p=$_POST['p[]']; it should work ? — lStoilov, Sep 19 '12 at 15:17
No, if you use `name="p[]"`, on the PHP side you will receive it as `$_POST['p']`, which will be an array. How about [some documentation](http://www.php.net/manual/en/language.variables.external.php)? — lanzz, Sep 19 '12 at 19:25
Thanks lanzz, i read the info on the link and it is easy to do it if you have a . Can you give me an example what should be the and what should be the PHP $POST code to get the values. Sorry, I am not very good with php. thanks. — lStoilov, Sep 20 '12 at 05:48

score 1 · Answer 1 · answered Sep 20 '12 at 06:01

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.

answered Sep 20 '12 at 06:01

lanzz

42,060
10
89
98

Thanks again lanzz. I just found a better way to my solution. Instead using name attribute in the JScript I use id, so that way I can specify a different name for each input $('input[id=r],input[id=p]').change(function(e) { – lStoilov Sep 20 '12 at 20:24
Ok, now I managed to link everything to a db and it is working fine. I am facing another problem now... I need to fire up the calculation of the fields that the script is doing when you type the values, but it doesn't calculate when you take the values from a db. Any idea what should I alter in the script in order to calculate all the fields when they are already populated. Thanks – lStoilov Sep 21 '12 at 08:11
I'd suggest you post a separate question for this unrelated issue. – lanzz Sep 21 '12 at 11:32

2 name attributes for a field in a form

1 Answers1