www.webdeveloper.com
Page 3 of 7 FirstFirst 12345 ... LastLast
Results 31 to 45 of 93

Thread: Using javascript to create table rows containing form elements

  1. #31
    Join Date
    Jan 2008
    Posts
    40
    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>
    Last edited by tdob; 01-22-2008 at 12:23 PM.

  2. #32
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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>
    ...

  3. #33
    Join Date
    Jan 2008
    Posts
    40
    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?

  4. #34
    Join Date
    Jan 2008
    Posts
    40
    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!
    Last edited by tdob; 01-23-2008 at 09:57 AM.

  5. #35
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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).

  6. #36
    Join Date
    Jan 2008
    Posts
    40
    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?

  7. #37
    Join Date
    Jan 2008
    Posts
    40
    i hate to bump my issue, but i was wondering if someone with a little more knowledge could help me out?

    thanks to everyone.

  8. #38
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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?
    Last edited by Kor; 01-24-2008 at 02:46 PM.

  9. #39
    Join Date
    Jan 2008
    Posts
    40
    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">&nbsp;</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.
    Last edited by tdob; 01-24-2008 at 03:58 PM.

  10. #40
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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()">

  11. #41
    Join Date
    Jan 2008
    Posts
    40
    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..?

  12. #42
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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

  13. #43
    Join Date
    Jul 2008
    Posts
    1
    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.

  14. #44
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    And your whole code is?

  15. #45
    Join Date
    Jan 2008
    Posts
    40
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles