www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript form - need help

  1. #1
    Join Date
    Nov 2011
    Posts
    2

    Javascript form - need help

    Hi guys, I realllly need some help with javascript coding. I'm completely lost when it comes to javascript (our class started like 3 days ago) and professor wants this assignment due tomorrow. I can't stop stressing.

    here's my HTML code for the form:

    <body>

    <form action="nextPage.html" method="post">
    <!-- inputs -->



    <label style="width:100px; display:inline-block">Item Name</label>
    <input type="text" name="user" value=""/> <br/>

    <label style="width:100px; display:inline-block">Item Number</label>
    <input type="text" name="user" value=""/> <br/>

    <label style="width:100px; display:inline-block">Description</label>
    <textarea name="comments"></textarea><br />

    <label style="width:100px; display:inline-block">Stock Quantity</label>
    <input type="text" name="user" value=""/> <br/>


    <label style="width:100px; display:inline-block">Price</label>
    <input type="password" name="pass" value=""/>
    <br/>

    <input type="hidden" name="hidden_var" value="2011-10-20"/>



    <input type="submit" name="submit" value="Add Item"/>



    </form>
    </body>

    when the "add item" button is pressed it should call a function that will store all the fields of the form inside an array and return false to the form.

    I need to add another button that will "display Inventory." This should call a function using a loop that will display the list of items previously added with the form. These should be listed inside a table.

    I have no idea where to start and I'd be forever grateful for any help.

    Thanks guys.
    - yonkerkz

  2. #2
    Join Date
    Jul 2007
    Posts
    245
    First of all, you should use different names for the text fields, unless you want to use this: name="user[]" which would have an array for item name, item number and stock quantity.

    But in this case, better do something like this:

    HTML Code:
    <form action="nextPage.html" method="post" onsubmit="return getData(this);">
    PHP Code:
         <script type="text/javascript">
               function 
    getData(form) {
                      var 
    data = new Array();
                      for (var 
    0form.elements.lengthi++) {
                           var 
    key form[i].name;
                           var 
    val form[i].value;
                           var 
    element = {};
                           
    element[key] = val;
                           
    data.push(element);
                      }
                      return 
    false;
                }

        
    </script> 
    EXPLANATION:

    The onsubmit event handler expects a boolean true or false to eventually submit the form or not. You prevent it from being sent by returning false.

    The function:
    It is passed this, which refers to the element in which the function call is located: the form element.

    data will be the array to store the field names and their values.

    You will want to loop through the form elements, via the elements property, and as Javascript lacks associative arrays, that is arrays whose indexes can be strings, which would be perfect to map each pair 'element_name' -> 'element_value', Javascript makes use of object literals, which are elements like this:

    PHP Code:
    var object = {
                        
    'property1' 'value1',
                        
    'property2' 'value2',
                        ...
                        
    'propertyN' 'valueN'
                      
    }; 
    it is like a generic object whose properties are created and populated dynamically.

    you will access them this way:
    object.property1 // dot notation
    or
    object['property1'] // square brackets notation

    this helps simulating associative arrays.
    You can combine this with arrays if you want to keep an array notation:

    PHP Code:
    var list = [
                 {
    'name' 'name1''value' 'value1'},
                 {
    'name' 'name2''value' 'value2'},
                 ...
                 {
    'name' 'nameN''value' 'value3'}
                 ]; 
    // literal array creation, without the need of the constructor (new Array()) 
    in this case you will access them like this:
    list[0].name <--- list[0].value
    or
    list[0]['name'] <--- list[0]['value']

    A last thing to mention is that in this function, this wouldn't work:

    var element = {key : val};
    the square brackets notation must be used instead, as seen above.

    Hope this helps!
    Last edited by Jazztronik; 11-22-2011 at 05:22 PM.

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