How do I access data of dynamic created text boxes

Question

1.00/5 (1 vote)

See more:

I created a page in html where by i was adding (item,price and quantity) text boxes dynamically. Then i have a button to calculate the price so i wanted to return all the information back to the text boxes after i am done calculating the prices and also return the item,price and quantity back to the text boxes.

What I have tried:

This is the web page.

<HTML>
<HEAD>
<TITLE>THABOERA IT SOLUTION</TITLE>
<LINK href="style.css" rel="stylesheet" type="text/css" />
<SCRIPT src="http://code.jquery.com/jquery-2.1.1.js"></SCRIPT>
<SCRIPT>
function addMore() {
$("<DIV>").load("input.php", function() {
$("#product").append($(this).html());
});
}
function deleteRow() {
$('DIV.product-item').each(function(index, item){
jQuery(':checkbox', this).each(function () {
if ($(this).is(':checked')) {
$(item).remove();
}
});
});

}

function getValues()
{
//var items= array();
//var item = document.getElementById("item").value;

var count = $(":input[id^=item]").length;
$("#item").each(function () {
item += $(this).val() + "\n";
});
var i;
// var feild + = $(this).val();

// for(i = 0;i < count;i++){
//var item = document.getElementById("item").value;

//items = item;
alert(item);
//alert(feild);
// item++;
// }

return true;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="frmProduct" method="post" action="index.php">
<DIV id="outer">
<DIV id="header">
<div class="input-group">

<label style="width:150px;font-size:16px;font-weight:bold;margin-left:30px;">Client Name</label></br>
<input type="text" name="client" id="perc" maxlength="100" style="margin-left:14px;"value="<?php //echo $vatP ?>" >

</div>
<div class="input-group">

<label style="width:150px;font-size:16px;font-weight:bold;margin-left:30px;">Contact Person</label></br>
<input type="text" name="person" id="perc" maxlength="100" style="margin-left:14px;"value="<?php //echo $vatP ?>" >

</div>
<div class="input-group">

<label style="width:150px;font-size:16px;font-weight:bold;margin-left:30px;">Phone</label></br>
<input type="text" name="phone" id="perc" maxlength="100" style="margin-left:14px;"value="<?php //echo $vatP ?>" >

</div>
<div class="input-group">

<label style="width:150px;font-size:16px;font-weight:bold;margin-left:30px;">Email</label></br>
<input type="text" name="email" id="perc" maxlength="100" style="margin-left:14px;"value="<?php //echo $vatP ?>" >

</div>
<DIV class="float-left"> </DIV>
<DIV class="float-left col-heading" style="margin-left:30px;">Item </DIV>
<DIV class="float-left col-heading" style="margin-left:30px;">Price</DIV>
<DIV class="float-left col-heading" style="margin-left:30px;">Quantity</DIV>
</DIV>
<DIV id="product">
<?php require_once("input.php");
for ($i = 0; $i < $itemCount;$i++)
{
?>
<DIV class="float-left" style="margin:auto;" ><input type="checkbox" name="item_index[]" /></DIV>
<DIV class="float-left"><input type="text" id="item" name="item_name[]" value = "<?php echo $item[$i] ?>" /></DIV>

<DIV class="float-left"><input type="text" name="item_price[]" value = "<?php echo $unitPrice[$i] ?>" /></DIV>
<DIV class="float-left"><input type="text" name="quantity[]" value = "<?php echo $quantity[$i] ?>" /></DIV><br>

<?php

}

?>

</DIV>

<DIV class="btn-action float-clear">
<input type="button" name="add_item" value="Add More" onClick="addMore();" />
<input type="button" name="del_item" value="Delete" onClick="deleteRow();" />
<span class="success"><?php if(isset($message)) { echo $message; }?></span>
</DIV>

<div class="input-group">

<label style="width:150px;font-size:16px;font-weight:bold;margin-left:30px;">VAT</label></br>
<input type="text" name="perc" id="perc" maxlength="100" style="margin-left:14px;"value="<?php //echo $vatP ?>" ><label style="width:150px;font-size:16px;font-weight:bold;">%</label>

</div>

<div class="button">
<input type="submit" id="calc" name="submit" value="Calculate" style="background-color:green;color:white;font-weight:bold;margin-left:14px; " onClick="return getValues()">
</div>

<div class="input-group">
<label style="width:150px;font-size:16px;font-weight:bold;margin-left:30px;">Total Price</label></br>
<label style="width:150px;font-size:16px;font-weight:bold;">R</label><input type="text" name="sum" maxlength="100" value="<?php echo number_format((float)$OVERIDE,2,'.','') ?>">

</div>

<div class="input-group">
<label style="width:150px;font-size:16px;font-weight:bold;margin-left:30px;">Vat Price</label></br>
<label style="width:150px;font-size:16px;font-weight:bold;">R</label><input type="text" name="vat" maxlength="100" value="<?php echo number_format((float)$vat,2,'.','') ?>">

</div>
<?php //number_format((float)$foo, 2, '.', '') ?>
<div class="input-group">
<label style="width:150px;font-size:16px;font-weight:bold;margin-left:30px;">Total Amount</label></br>
<label style="width:150px;font-size:16px;font-weight:bold;">R</label><input type="text" name="amount" maxlength="100" value="<?php echo number_format((float)$overall,2,'.','') ?>">

</div>

<DIV class="footer">
<input type="submit" name="save" value="Save" />
</DIV>
</DIV>
</form>
</BODY>
</HTML>

THIS IS input.php file to access the create input dynamically

<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV>
<DIV class="float-left"><input type="text" id="item" name="item_name[]" /></DIV>
<DIV class="float-left"><input type="text" name="item_price[]" /></DIV>
<DIV class="float-left"><input type="text" name="quantity[]" /></DIV>
</DIV>

THIS IS PHP TO CALCULATE

<?php

$vatP = 0.00;

$vat = 0.00;

$overall =0.00;
$itemValues=0;

$OVERIDE = 0.00;
$overide2 ="";
$itemCount =0;
$item[$itemCount] = "";
if(isset($_POST['submit']))
{

$itemCount = count($_POST["item_name"]);
$clients[$itemCount] = "";
$item[$itemCount] = "";
$quantity[$itemCount] = 0.00;
$unitPrice[$itemCount] = 0.00;
$vatP = 0.00;
$totalPrice[$itemCount] = 0.00;
$vat = 0.00;
$TOTAL[$itemCount] =0.00;
$overall =0.00;
$itemValues=0;
$subTotal[$itemCount] = 0.00;
$unitPrice[$itemCount] = 0.00;
$OVERIDE = 0.00;
$overide2 ="";

for($i=0;$i<$itemCount;$i++) {
//if(!empty($_POST["item_name"][$i]) || !empty($_POST["item_price"][$i])||!empty($_POST["quantity"][$i])) {

//$clients = $_POST['clients'];
$item[$i] = $_POST["item_name"][$i];
$quantity[$i] = $_POST["quantity"][$i];
$actualPrice[$i] = $_POST["item_price"][$i];
$vatP = $_POST['perc'];
// $subTotal =0.00;
//$overall=0.00;

$subTotal[$i] = $actualPrice[$i] * 0.10;
$unitPrice[$i] = $actualPrice[$i] + $subTotal[$i];
$vatPerc = $vatP / 100;

$totalPrice[$i] = $unitPrice[$i] * $quantity[$i];

$vat = $totalPrice[$i] * $vatPerc;

$TOTAL[$i] = $totalPrice[$i] + $vat;

$OVERIDE = $TOTAL[$i];
$itemValues++;
//echo number_format((float)$TOTAL,2,'.','')

//echo "ITEM: ".$item[$i]." TOTAL: ".number_format((float)$TOTAL[$i],2,'.','')." VAT: ".number_format((float)$vat,2,'.','')." SUBTOTAL : ".number_format((float)$totalPrice[$i],2,'.','')."</br>";
if($itemCount > 1)
{
$overall = $overall + $TOTAL[$i];
}
else
{
$overall = $TOTAL[$i];
}
$overide2 = $item[$i];

//echo "OVERALL TOTAL" . number_format((float)$overall,2,'.','');

//}
// $itemValues++;

}
//echo "OVERALL TOTAL" . number_format((float)$overall,2,'.','');

}

?>

Posted 6-Dec-18 1:43am

Member 14079832

Updated 6-Dec-18 3:57am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Accepted Answer · 2018-12-06T03:57:00

I'm not going to read through all of that code. The answer works the same in any case:

1 - when you generate a control give it an id (an name if in form)
2 - these ID's should be serialized (that is, numbered in order)

e.g.: item_1, item_2, item_3, . . .

3 - keep track of the count and update a (hidden) control with the count every time you make a control.

Now you have the count and they can be accessed using javascript and php by building the id (or name) and using it as an index. The start and end values are handled by you stored count value.

Just like non-dynamically created controls