CODEWITHSUNDEEP
phpjavascriptforms
user2288273
user2288273

Reputation: 15

JavaScript used to update price inside a form

I have a php file which is displaying price and quantities inside a form.

Upvotes: 0

Views: 203

Answers (3)

bestprogrammerintheworld
bestprogrammerintheworld

Reputation: 5520

First of all, set <form> outside of the while-loop. Skip the id="", instead use class="" because id of element must be unique.

<?php
echo '<form method ="post" action="price.php">';

while($queryresult = mysql_fetch_assoc($query)){    
    $id = $queryresult['id']; //assumption is that id is an autoincremental integer
    echo '<input type="text" name ="quant[' . $id . ']" class="quant" onblur="functionprice(' . $id . ')" />'; //Make quant-array (dynamically)
    echo '<input type="text" name ="price[' . $id . ']" class="price" onblur="functionprice(' . $id . ')" />'; //Make price-array (dynamically)
    echo '<input type="text" name="unitprice[' . $id . ']" id="unitprice" readonly="true" />';
}//while

echo "</form>"

?>//close php tag
?>

Then do something like this (I hope you get the concept)

<script type="text/javascript">
function functionprice(id)
{
    var price = parseFloat(document.getElementById ("quant[" + id + "]").value); //Get value of element in quant-array
    var quantity = parseFloat(document.getElementById ("price[" + id + "]").value); //Get value of element in price-array

    if (!(price == Number.NaN && quantity == Number.NaN))
        document.getElementById ("unitprice[" + id + "]").value = Number(price/quantity).toFixed(2);
}
</script>

When making code like this (above), you could use the built array when retrieving values server-side (very easily). The only downside with this - as I see it - is that if you have big resultsets (like >100.000 rows) - arrays could "eat up" memory on the server.

Example: If you put a submit-button after the while-loop and inside the <form> like this: ';

while($queryresult = mysql_fetch_assoc($query)){    
    $id = $queryresult['id']; //assumption is that id is an autoincremental integer
    echo '<input type="text" name ="quant[' . $id . ']" class="quant" onblur="functionprice(' . $id . ')" />'; //Make quant-array (dynamically)
    echo '<input type="text" name ="price[' . $id . ']" class="price" onblur="functionprice(' . $id . ')" />'; //Make price-array (dynamically)
    echo '<input type="text" name="unitprice[' . $id . ']" id="unitprice" readonly="true" />';
}//while

echo "<input type=\"submit\" value=\"Skicka\" />";
echo "</form>"

?>//close php tag
?>

then in price.php (after a submit) you get values by doing something like this: (validation should be done also of course so you get the expected values/arrays you want)

<?php
$quantArr = $_POST['quant'];
$priceArr = $_POST['price'];

//echo out a certain row from db (where id = 27)
echo 'quantity: ' . $quantArr[27];
echo 'price: ' . $pricearr[27];
?>

Upvotes: 0

mb21
mb21

Reputation: 39199

You mustn't have more than one element with the same id in the resulting HTML. One way out is this:

$counter = 0;
while($queryresult = mysql_fetch_assoc($query)){    
    echo '<form method ="post" action="price.php">';
    echo '<input type="text" name ="quant" id="quant'.$counter.'" onblur="functionprice('.$counter.')" />';
    echo '<input type="text" name ="price" id="price'.$counter.'" onblur="functionprice('.$counter.')" />';
    echo '<input type="text" name="unitprice" id="unitprice'.$counter.'" readonly="true" />';
    echo "</form>";
    $counter++;
}//while

and then invoke this updated JavaScript function with the line number you want to change, like functionprice(2);

<script type="text/javascript">
function functionprice(counter)
{
    var price = parseFloat(document.getElementById("quant"+counter).value);
    var quantity = parseFloat(document.getElementById("price"+counter).value);

    if (!(price == Number.NaN && quantity == Number.NaN))
        document.getElementById("unitprice"+counter).value = Number(price/quantity).toFixed(2);
}
</script>

Upvotes: 1

prabeen giri
prabeen giri

Reputation: 803

First of all its bad to have same ID over multiple elements which is not W3C complaint. Probably this is the reason other form elements is not getting updated. You can either append the number on the id like "quantity_1" ,"quantity_2" so that you can have better control over you javascript code

And also if you want to treat it as a single row in database , then use as per the comment above i.e name = 'price[]'

Upvotes: 0

Related Questions