Using javascript to create table rows containing form elements

Printable View

Show 40 post(s) from this thread on one page

01-22-2008, 11:21 AM
tdob

Thanks for the reply, I did try that, but still no luck. Feel like ive been staring at the same code forever, this is the part of the form:

Code:

<script type="text/javascript"> function madeSelection(f){ var sel=f['deparment[]'], i=0, s; while(s=sel[i++]){ if(s.value == 'Department'){ alert('Please Choose Something'); s.focus(); return false; } } } </script> </head> <body> <form id="form-expense" action="?link=summary.php" method="post" onsubmit="return madeSelection(this)"> <div id="myDiv"> <div> <br> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr align="center"> <td>Department</td> <td>Account</td> <td>Description</td> </tr> <tr aligin="center"> <td align="center"> <input type="hidden" name="id[]" /> <select name="department[]"> <option selected value=Department>Department</option> <option value=Administration>Administration</option> <option value=Customer Service>Customer Service</option> <option value=Executive>Executive</option> <option value=Finance>Finance</option> <option value=I.T.>I.T.</option> <option value=Marketing>Marketing</option> <option value=Materials Management>Materials Management</option> <option value=Product Development>Product Development</option> <option value=Selling>Selling</option> </select></td>
01-23-2008, 01:57 AM
Kor

Typo

Code:

var sel=f['department[]'], i=0, s;

Note: it is a good habit to quote the HTML attributes' values:

Code:

... <option selected value="Department">Department</option> <option value="Administration">Administration</option> <option value="Customer Service">Customer Service</option> ...
01-23-2008, 08:38 AM
tdob

Quote:

Originally Posted by Kor

Typo

Code:

var sel=f['department[]'], i=0, s;

Note: it is a good habit to quote the HTML attributes' values:

Code:

... <option selected value="Department">Department</option> <option value="Administration">Administration</option> <option value="Customer Service">Customer Service</option> ...

Thank you so much, I feel stupid for not seeing a simple typo.. arggh..

Yes, I got burned with the quotations in HTML yesterday as the wrong values were getting passed, so I fixed that up.

I suppose to close this once and for all, to check other fields should I create a brand new function, or is there a way to include it in this one?
01-23-2008, 08:54 AM
tdob

Unfortunately, now it seems to prompt whenever I click the submit button, whether or not it actually equals "Department"?? However, this only happens when there is one row, if a user inserts another row or two it acts as it should.

This is going to be the death of me!
01-23-2008, 08:56 AM
Kor

You may use a single function... but, as, most of the time, a validation function is a "personalized" one, I need to know what kind of elements you need to validate and for what (empty values, lack of options' selection, numbers... and so on).
01-23-2008, 09:21 AM
tdob

Quote:

Originally Posted by Kor

You may use a single function... but, as, most of the time, a validation function is a "personalized" one, I need to know what kind of elements you need to validate and for what (empty values, lack of options' selection, numbers... and so on).

I need to validate and ensure a selection has been made from the selection boxes in department[] and account[]. The default selection is "Department" and "Account" respectively.

I also have a input box named amount[], I would like to ensure there is a numeric value in this input.

Im not sure if you saw the last message (sorry if you did) but it seems the validation doesnt work correctly if there is only 1 row. Upon clicking submit it always prompts to select a value even if you have, however if you insert other rows it works as desired?
01-24-2008, 11:26 AM
tdob

i hate to bump my issue, but i was wondering if someone with a little more knowledge could help me out?

thanks to everyone.
01-24-2008, 01:43 PM
Kor

Is it so hard to understand the pattern of the code and try to use/modify it?... Have you tried? Can we see your trial?

No offense, but... really, we can not fulfill your whole work, can we? Should we?
01-24-2008, 02:56 PM
tdob

Yes, I have tried. I am really new to javascript but very good with PHP and MySQL, this is my first attempt to merge all 3 together. Sorry for the questions.

What I am saying right now, is the validation you helped me with doesnt work for the first set of inputs. However, if I choose to input another row of inputs, the validation works as desired. It seems as though the validation process is expecting a second row straight away.

The only other issue I had was having is adding more inputs to validate once it works. I dont need you to code it all out for me, I just need an example like you gave me that uses more than one. I have tried many different things that failed (last 2 days) but I didnt see the value in posting them.

Here is my relevant code after php has did its thing filling in values:

Code:

<script type="text/javascript"> var clone; function cloneDiv(){ var divs=document.getElementById('myDiv').getElementsByTagName('div'); clone=divs[divs.length-1].cloneNode(true); } function addDiv(){ var root=document.getElementById('myDiv'); var divs=root.getElementsByTagName('div'); root.appendChild(clone); clone=divs[divs.length-1].cloneNode(true); } onload=cloneDiv function madeSelection(f){ var sel=f['department[]'], i=0, s; while(s=sel[i++]){ if(s.value == 'Department'){ alert('Please Choose Something'); s.focus(); return false; } } } </script> </head> <body> <form id="form-expense" action="?link=summary.php" method="post" onsubmit="return madeSelection(this)"> <div id="myDiv"> <div> <br> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr align="center"> <td>Department</td> <td>Account</td> <td>Description</td> </tr> <tr aligin="center"> <td align="center"> <input type="hidden" name="id[]" /> <select name="department[]"> <option selected value="Department">Department</option><option value="Administration">Administration</option><option value="Customer Service">Customer Service</option><option value="Executive">Executive</option><option value="Finance">Finance</option><option value="I.T.">I.T.</option><option value="Marketing">Marketing</option><option value="Materials Management">Materials Management</option><option value="Product Development">Product Development</option><option value="Selling">Selling</option> </select></td> <td align="center"> <select name="account[]"> <option selected value="Account">Account</option><option value="ADMIN CHARGES FOR LATE DELIVERIES & SHORTAGES">ADMIN CHARGES FOR LATE DELIVERIES & SHORTAGES</option><option value="AUDIT FEES">AUDIT FEES</option><option value="BAD DEBT EXPENSE">BAD DEBT EXPENSE</option><option value="BANK CHARGES">BANK CHARGES</option><option value="BANK PENALTY & INTEREST">BANK PENALTY & INTEREST</option><option value="CELLUAR PHONE">CELLUAR PHONE</option><option value="CONSULTANT SERVICES">CONSULTANT SERVICES</option><option value="CONVENTIONS/TRADE SHOWS">CONVENTIONS/TRADE SHOWS</option><option value="COPIER CHARGES">COPIER CHARGES</option><option value="COURIER">COURIER</option><option value="CREDIT BUREAU CHARGES">CREDIT BUREAU CHARGES</option><option value="DONATIONS">DONATIONS</option><option value="EDP COMMUNICATION">EDP COMMUNICATION</option><option value="EDUCATION">EDUCATION</option><option value="EMPLOYEE UNIFORMS">EMPLOYEE UNIFORMS</option><option value="FAX">FAX</option><option value="FAX CHARGES">FAX CHARGES</option><option value="FOREIGN X - REALIZED">FOREIGN X - REALIZED</option><option value="FORWARDING & DOC'N CHRG">FORWARDING & DOC'N CHRG</option><option value="HARDWARE EXPENSES">HARDWARE EXPENSES</option><option value="INTEREST INCOME">INTEREST INCOME</option><option value="LEGAL FEES">LEGAL FEES</option><option value="LUNCH ROOM">LUNCH ROOM</option><option value="MAIL ROOM">MAIL ROOM</option><option value="MEALS & ENTER. SALES">MEALS & ENTER. SALES</option><option value="MEALS & ENTERTAINMENT">MEALS & ENTERTAINMENT</option><option value="MEETINGS">MEETINGS</option><option value="MEMBERSHIPS & DUES">MEMBERSHIPS & DUES</option><option value="NUTRITIONAL ANALYSIS - R&D">NUTRITIONAL ANALYSIS - R&D</option><option value="OUTSIDE CONTRACTS">OUTSIDE CONTRACTS</option><option value="PENSION CONSULTING">PENSION CONSULTING</option><option value="PRODUCT TEST TRIALS - R&D">PRODUCT TEST TRIALS - R&D</option><option value="R&M BUILDING">R&M BUILDING</option><option value="R&M BUILDING (GENERAL)">R&M BUILDING (GENERAL)</option><option value="R&M EDP HARDWARE">R&M EDP HARDWARE</option><option value="R&M EDP SOFTWARE">R&M EDP SOFTWARE</option><option value="RECRUITING">RECRUITING</option><option value="RENT">RENT</option><option value="SANITATION/CLEANING">SANITATION/CLEANING</option><option value="SOFTWARE EXPENSE">SOFTWARE EXPENSE</option><option value="SPECIAL EVENTS">SPECIAL EVENTS</option><option value="SUBSCRIPTIONS">SUBSCRIPTIONS</option><option value="SUPPLIES - OFFICE">SUPPLIES - OFFICE</option><option value="SUPPLIES - QUALITY SERVICE">SUPPLIES - QUALITY SERVICE</option><option value="SUPPLIES - R&D">SUPPLIES - R&D</option><option value="SUPPLIES - SHIPPING">SUPPLIES - SHIPPING</option><option value="TELEPHONE">TELEPHONE</option><option value="TEMPORARY HELP">TEMPORARY HELP</option><option value="TRAVEL">TRAVEL</option><option value="VEHICLES/MILEAGE/RENTALS">VEHICLES/MILEAGE/RENTALS</option> </select></td> <td align="center"><input type="text" name="description[]" size="30" value=" " /></td> </tr> <tr><td colspan="3"> </td></tr> </table> <table border="1" cellpadding="0" cellspacing="0" width="80%"> <tr align="center"> <td>Amount</td> <td>GST</td> <td>PST</td> <td>Other Tax</td> <td>Total</td> <td>Currency</td> <td>Receipt</td> </tr> <tr align="center"> <td><input type="text" name="amount[]" size="4" /></td> <td><input type="text" name="gst[]" value="0" size="4" /></td> <td><input type="text" name="pst[]" value="0" size="4" /></td> <td><input type="text" name="other_tax[]" value="0" size="4" /></td> <td><input type="text" name="total[]" value="?" readonly size="4" /></td> <td><select name="currency[]"><option>CDN</option><option>USD</option></select></td> <td><select name="receipt[]"><option>YES</option><option>NO</option></select></td> </tr> </table> </div> </div> <br><br> <p align="center"><input name="button" type="button" value="Insert another expense" onclick="addDiv()"> <input name="submit" type="submit" value="Submit"> </form> </body>

I have tried messing with the javascript but im unable to get it to work. Perhaps I should just scrap it as im not familiar with it and dont wont to keep bothering you guys.
01-25-2008, 03:03 AM
Kor

Code:

function madeSelection(){ var names=['department[]','account[]'], n, sel, s, i, j=0; while(n=names[j++]){ sel=document.getElementsByName(n); i=0; while(s=sel[i++]){ if(s.selectedIndex==0){alert('Please Choose Something');s.focus();return false;} } } }

Code:

<form id="form-expense" action="?link=summary.php" method="post" onsubmit="return madeSelection()">
01-25-2008, 08:27 AM
tdob

I would just like to say thank you very much, you have really shown me some creative ways to do things, i have read up on some of these things and hopefully this can be a good starting point for me.

thanks again, im sorry if I was a bit persistent, hate it when I cant get something to work.

do you know a good book (or heck, have you written) one that specializes in javascript working with webforms, etc..?
01-25-2008, 09:05 AM
Kor

You are welcome...:)
Regarding the books, no, I don't know books specialized in javascript working with webforms...

Everything I know, I know from some "classical" sites of standards as:
http://www.w3.org/
http://www.ecma-international.org/pu...s/Ecma-367.htm

some good tutorials:

http://www.w3schools.com/
http://www.quirksmode.org/
http://www.howtocreate.co.uk/

... and, of course, from Web Forums like this one :)
07-12-2008, 09:05 AM
rajnath

Hi the example is working fine. But only one problem.

I want the options list as
<option value="item1" >item1</option>
<option value="item2">item2</option>
<option value="item3" selected="selected">item3</option>
<option value="item4">item4</option>
<option value="item5">item5</option>

"item 3 " shouldbe selected. But i tried n number way , always it is showint the selected item as "item1" (i.e. the one that present in the first option).

Can you please help me.
07-13-2008, 01:10 PM
Kor

And your whole code is?
07-20-2008, 04:28 PM
tdob

Quote:

Originally Posted by Kor

You are welcome...:)
Regarding the books, no, I don't know books specialized in javascript working with webforms...

Everything I know, I know from some "classical" sites of standards as:
http://www.w3.org/
http://www.ecma-international.org/pu...s/Ecma-367.htm

some good tutorials:

http://www.w3schools.com/
http://www.quirksmode.org/
http://www.howtocreate.co.uk/

... and, of course, from Web Forums like this one :)

Hi Kor,

Ive been using this code and I have the need for something that seems so simple but yet so hard. I need to keep track of (and display) the number of the current row.

For example, when a user clicks to insert another row of elements, I would like to be able to display that it is Row 2, or Row 3. I have been unable to find a way to do this and display it in PHP, im thinking it is not possible?

Show 40 post(s) from this thread on one page