Adding and Deleting Form Items

[antwan1986]

Hi everyone and thanks for reading.

I'll give you a quick insight into my project and desired goal. I've a client who wants a purchase order system that will send purchase orders in the form of emails, and log them into a database. PHP and SQL are my core skills but I've not had much exposure to JavaScript and the AJAX revolution!

What I'm wanting to accomplish is to have an HTML form that has rows of items to be ordered. A row would contain a reference field, a description field and a quantity field. I want the client to be able to add and delete rows as they please, so if the client is ordering four things this time, and I've hard-coded two rows in, then they could press an add button twice to get two more rows to appear. Also if there was some way of deleting the rows too, that'd be great.

I've attached a sample form below to give you all an idea of the HTML involved, it's simple enough!

<form id="purchaseOrder" name="purchaseOrder" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="reference01">Reference</label>
<input name="reference01" id="reference01" type="text" />

<label for="quantity01">Quantity</label>
<input name="quantity01" id="quantity01" type="text" />

<label for="details01">Details</label>
<input name="details01" id="details01" type="text" />

<br /> <br />

<label for="reference02">Reference</label>
<input name="reference02" id="reference02" type="text" />

<label for="quantity02">Quantity</label>
<input name="quantity02" id="quantity02" type="text" />

<label for="details02">Details</label>
<input name="details02" id="details02" type="text" />
</form>

Thanks very much everyone,

Anthony

[antwan1986]

Ok i've been trying this myself a little and I was thinking that If I had a secret text box like this:

<input name="counter" id="counter" type="text" value="2" />

then when I add a new textbox (still not worked that one out), I could increment this hidden field, and it would be passed to PHP, and then PHP would know how many form variables to expect. Of course when I delete the end set of boxes, the counter would decrement. I came up with this:

function Add() {
// I setup a variable which uses the parseInt() function to convert the textbox value to an integer.
var counter = parseInt(document.purchaseOrder.counter.value);
// I increment the value by one.
counter = counter + 1;
// I then update the value of the textbox with the added sum.
document.purchaseOrder.counter.value = counter;
}

function Delete() {
// I setup a variable which uses the parseInt() function to convert the textbox value to an integer.
var counter = parseInt(document.purchaseOrder.counter.value);
// I increment the value by one.
if (counter > 2) {
counter = counter - 1;
}
// I then update the value of the textbox with the added sum.
document.purchaseOrder.counter.value = counter;
}

This seems to work and it has a failsafe of not going below two boxes. Now all I need is to figure out how to use this counter to add an actual box based on the counters integer i.e. reference2, reference3 etc..

Anthony

[antwan1986]

Hello again to anyone reading!

I've got this counter sorted, and I know how I will integrate these dynamic boxes with PHP, but I still don't know how to generate them dynamically. I've been looking all over the net but all I find are old tutorials, although most of them seem to use addChild and removeChild, can anyone help me?

[antwan1986]

To anyone still reading, I solved this problem myself (and quite proudly). If anyone comes across this thread having similar problems then I'll guide you by telling you that I used a combination of the following JavaScript functions:

innerHTML()
appendChild()
removeChild()

Look these up and see how they work. For further reading I recommend this link:
http://abeautifulsite.net/notebook/30. The functions there didn't work right away for me so I stripped out the arguments and hard-coded values into the functions to get them working basically and then took it from there.

Good Luck,

Anthony

[jonnyhitek]

hi and thanks for your persistence with this one. i've found it quite helpful - i am having a similar problem i am creating a expenses form using javscript and i need to be able to add more form rows dynamically and still be able to make the necessary calculations. any help would be appricated heres my code:

html:

<form name="form" >
   <label>Date</label>
   <input type="text" onClick="autoDate()" name="currentDate" size=8>

   <label>Mileage Rate</label>
    <input name="mileageRate" onChange="updateMileage()" size="4" />

   <label>Miles</label>
    <input name="miles" onChange="updateMileage()" size="6" />

    <label>Details</label>
    <input name="details" size="20" />

 <label>Mileage £</label>
  <input name="Mileage" readonly size="6">

 <label>General Expenses</label>
 <input name="generalExpenses" onChange="calculateTotal()" size="6" />

  <label>Subsistence</label>
  <input name="subsistence" onChange="calculateTotal()" size="6"  />

  <label>Accomodation</label>
  <input name="accomodation" onChange="calculateTotal()" size="6"  />

  <label>Travel (incl. taxis)</label>
  <input name="travel" onChange="calculateTotal()" size="6"  />

  <label>Ent.(business)</label>
  <input name="entBusiness" onChange="calculateTotal()" size="6" />

  <label>Ent.(staff)</label>
  <input name="entStaff" onChange="calculateTotal()" size="6"  />
  <br />
  <label>Taxable Sundries</label>
  <input name="taxableSundries" onChange="calculateTotal()" size="6"  />

  <label>VAT</label>
  <input name="vat" onChange="calculateTotal()" size="6"  />

  <label>Total Amount Claimed</label>
  <input name="totalAmountClaimed" onChange="calculateTotal()" readonly="readonly" size="6" />
  <br /><br /><br />
  <label>Total Mileage</label>
  <input name="totalMileage" size="6"  />


  </form>

and the javascript

// auto insert of the current date - currently set to onClick 

function autoDate() {
var mydate=new Date()
var theyear=mydate.getYear()
if (theyear < 1000)
theyear+=1900
var theday=mydate.getDay()
var themonth=mydate.getMonth()+1
if (themonth<10)
themonth="0"+themonth
var theday=mydate.getDate()
if (theday<10)
theday="0"+theday

var displayfirst=theday
var displaysecond=themonth
var displaythird=theyear

 document.form.currentDate.value=displayfirst+"-"+displaysecond+"-"+displaythird 
}

//calculate total mileage by muliplying mileage rate and number of miles

function updateMileage() {
    document.form.Mileage.value = (document.form.mileageRate.value -0) * (document.form.miles.value -0);
    }

// calculate total amount claimed - per line

function calculateTotal() {
    var totalAmount1 = document.form.totalAmountClaimed.value = (document.form.Mileage.value -0) 
    + (document.form.generalExpenses.value -0) + (document.form.subsistence.value -0)
    + (document.form.accomodation.value -0) + (document.form.travel.value -0) 
    + (document.form.entBusiness.value -0) + (document.form.entStaff.value -0)
    + (document.form.taxableSundries.value -0) + (document.form.vat.value -0);
}

cheers in advance