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

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.
    Share on Google+

  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>
    ...
    Share on Google+

  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?
    Share on Google+

  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.
    Share on Google+

  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).
    Share on Google+

  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?
    Share on Google+

  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.
    Share on Google+

  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.
    Share on Google+

  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.
    Share on Google+

  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()">
    Share on Google+

  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..?
    Share on Google+

  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
    Share on Google+

  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.
    Share on Google+

  14. #44
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Share on Google+

  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?
    Share on Google+

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12092 seconds
  • Memory Usage 3,046KB
  • Queries Executed 15 (?)
More Information
Template Usage (37):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (8)bbcode_code
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (15)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (15)postbit
  • (15)postbit_onlinestatus
  • (15)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (74):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates