AJAX Libraries - Continuous Forms

[eluser]Kyle Johnson[/eluser]
Hello Everyone!

I'm starting to realize the project I'm working on is going to have a high demand for AJAX type integration. Most notably with the forms that need to be filled out by the user.

A great number of forms are used to enter "one-to-many" types of related data into the database. (ie., one shipment will have many items)

I would like the user to be able to enter all the information on one form instead of being required to enter the "one" part of information and then each subsequent item on a new form.

What do you think is the best way to get to this? I'm thinking each form item will have "array" names. So instead of <input type="text" name"item" /> it will be <input type="text" name"item[]" /> which fails XHTML validation, but it's a necessary evil.

Does anyone know of any prebuilt script out there that will create more form items as each "line" of the form is filled in. Preferably that will autocreate a new "name" for the form item with the array position (ie., "item[1]", "item[2]", etc..) I just don't want it to duplicate each div id just because someone started to enter something into a form item.

Which script library would best suit my needs? I also have the need to perform autocomplete input boxes, and I am currently using a version of JQuery for that.

Thanks for any help!

[eluser]slowgary[/eluser]
I'm not sure if this fits what you're looking for, but you could just have a button to add a new field. So:

Code:

<form id='items_form'>
     <input type='text' name='items[]'/>
</form>
<button id='add_new_item'>Add an Item</button>

&lt;script type='text/javascript'>
$('#add_new_item').bind('click', function(){
     $('#items_form').append("&lt;input type='text' name='items[]'/&gt;");
});
&lt;/script>

I'm probably totally missing your point.

[eluser]Kyle Johnson[/eluser]
You get the point of what I'm trying to do. Essentially each additional "line" will have multiple fields, so I'd have to extend the ".append" section to encompass that. But, yes, you did get the general direction of what I'm trying to accomplish.

What I'm hoping for is to have this done dynamically as the user enters data so that they are not inconvenienced by the need to click a button (I know, it's not that big of a deal, but needing to click 50-100 times on one shipment adds up).

I've not yet figured out how to trigger the script (like you've shown) in a smart enough manner so that it only creates the additional form element when it's needed. I've tried throwing in the "onBlur" event, "onFocus" etc... I'd also find it incredibly useful if the script added the number to the array name of the form.

Also.. when it comes time to edit the information stored in the database, it will pull back the same form and repopulate the data, with one additional "new" line below. I'd prefer the users to not be required to enter information one at a time, or edit one at a time if I can get away with it simply.

[eluser]slowgary[/eluser]
The change event would probably be better suited, e.g. 'onChange'. That way just clicking in and out of fields wouldn't cause a new field to appear. Also, you'd want to do a check before creating a new field to make sure there's no already an empty one (so users won't trigger the event just by editing a previous item).

You can use jQuery to get the number of fields:

Code:

var num_items = $("input[name='item[]']").length;

I'm not sure of the purpose of your app, but if you're expecting users to enter 50-100 orders or shipments or whatever, you might want to go about it a different way. There are a lot of downsides to using all these text inputs. What about a user that enters 50 lines of an order, then decides they need to wait until tomorrow to have their supervisor verify something?

I think you'd be better off using a textarea and creating a parser in PHP, sort of like how UPS does it. They allow you to enter up to 25 tracking numbers, 1 per line into a textarea. I know if I had to enter that mauch data into a form, I'd prefer not to have to tab between 100 text inputs. Also, a textarea would allow users to have their own software generate an 'order', and they could just copy and paste the data into your textarea.

Give us some more details about exactly what you're creating, maybe there are more creative ways to make it user friendly.

[eluser]Kyle Johnson[/eluser]
Well each "line item" can have the following information: (generally)
Model / Qty / Serial Number / Asset Number / Description

I was thinking of doing something like the parsing with the Serial Number/Asset Number fields and let the QTY field be dynamically created if the "Model" shows up as "Serialized" in the database.

Usually our orders are very small. 1-5 items, but we do have the occasional large shipments that I needed to consider too. Actually the tabbing between form fields shouldn't be a huge issue because we have scanners attached to each station that we have programmed to tab after they scan a barcode.

I realised(English spelling) that I could write a "foreach" loop when creating the form and reading data from the database. then add a single blank line afterward.

This looks promising as well, using JavaScript DOM. http://www.dustindiaz.com/add-remove-elements-reprise/

[eluser]slowgary[/eluser]
The code in that link could be much simpler using jQuery.

It sounds like what you're doing is in a closed environment like a POS. If you're using barcode scanners then this should all be a no-brainer, as there's no typing involved.

The most flexible method would be to have a set of fields where you could "add one", like in the example, but also have a bulk entry where you'd allow the user to enter their orders into a very tall textarea in a certain format, and you'd parse the data and create the order from that. The textarea would be great not only for the barcode scanners, but also for people who have advanced skills and would rather just paste their large order than have to retype it into a bunch of small text inputs.

[eluser]Kyle Johnson[/eluser]
Closed environment?

The application will be distributed to clients as well as internal employees. The idea of a "one-to-many" form exists in multiple locations within the application. Not just shipments. Other examples include item repairs, where one unit can use many parts; or, one customer request can include many different instructions.

Generally, I like the idea of having a text-area where each line should use comma separated values and then the "\n" character would represent a new database entry. Obviously the parser would have to become sophisticated enough to not allow user errors which is why I prefer to use AJAX and form fields to capture errors. I just imagine a lot of data entry errors if they don't get to "choose" the right model number from the system. I suppose I could make a form validation callback parser to have a similar outcome.

Sadly, not everything is barcoded, but a great majority is. Serial Number and Asset Number, yes. Model Number - not usually.

[eluser]slowgary[/eluser]
I do see the downside of the textarea method. It works well for someone like UPS because the syntax is very simple - 1 tracking number per line. In your case the users would have to learn an order syntax before they could use the bulk input, which I agree is asking too much.

I think though that a better method of "adding form fields" is to not add form fields, but add submission to a list. In other words, instead of allowing them to add a new set of fields to the form, why not reuse the form again and again, but add each submission to the page's DOM.

I whipped up an example, which can be seen here -> http://www.aaroncicali.com/kyle.html

This is just a basic prototype to illustrate, but you could make the code append new text inputs also if you'd prefer. It would also need to clear the fields on every add, but I didn't do that so that you could easily add multiples.

[eluser]slowgary[/eluser]
And for anyone who comes across this post in the future, here's the source for that link:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

&lt;html &gt;

&lt;head&gt;
    &lt;title&gt;&lt;/title>
    &lt;meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' /&gt;
    &lt;style type='text/css'&gt;
    body {
        font-size: 12px;
        font-family: sans-serif;
    }

    #item_list {
        list-style-type: none;
    }

    .item {
        margin-bottom: 20px;
    }

    .remove {
        display: inline;
        cursor: pointer;
        color: #F00;
        font-weight: bold;
    }

    .remove:hover {
        background: #FCC;
    }

    #submit_order {
        margin-top: 20px;
    }
    &lt;/style&gt;
    &lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'>&lt;/script>
    &lt;script type='text/javascript'>
    $(document).ready(function(){
        $('#order_form').bind('submit', function(event){
            event.preventDefault();
            if($('#item_list').length == 0)
            {
                $('#items').append("<ul id='item_list'></ul>");
            }

            $('#item_list').append("<li class='item'><ul><li>Model: "
                                    + $('#model').val()
                                    + "</li><li>Qty: "
                                    + $('#qty').val()
                                    + "</li><li>Serial #: "
                                    + $('#serial').val()
                                    + "</li><li>Asset #: "
                                    + $('#asset').val()
                                    + "</li><li>Descripition: "
                                    + $('#desc').val()
                                    + "</li><li class='remove'>remove this item</li></ul></li>");
        });

        $('.remove').live('click', function(){
        $(this).parents('.item').hide('fast', function(){
            $(this).remove();
        });
        });

        $('#submit_order').bind('click', function(event){
            event.preventDefault();
            $('#order_form').unbind();
            $('#order_form').submit();
        });
    });
    &lt;/script>
&lt;/head&gt;

&lt;body&gt;
&lt;form action='your_server_side_script.php' id='order_form' method='post'&gt;
    <table>
        <tr>
            <td>
                <strong>Model:</strong>
            </td>
            <td>
                &lt;input type='text' id='model' name='model'/&gt;
            </td>
        </tr>
        <tr>
            <td>
                <strong>Quantity:</strong>
            </td>
            <td>
                &lt;input type='text' id='qty' name='qty'/&gt;
            </td>
        </tr>
        <tr>
            <td>
                <strong>Serial #:</strong>
            </td>
            <td>
                &lt;input type='text' id='serial' name='serial'/&gt;
            </td>
        </tr>
        <tr>
            <td>
                <strong>Asset #:</strong>
            </td>
            <td>
                &lt;input type='text' id='asset' name='asset'/&gt;
            </td>
        </tr>
        <tr>
            <td>
                <strong>Description:</strong>
            </td>
            <td>
                &lt;input type='text' id='desc' name='desc'/&gt;
            </td>
        </tr>
    </table>
    <div>
        &lt;input type='submit' value='Add to Order &raquo;'/&gt;
    </div>
    <div id='items'>
    </div>
    <div>
        &lt;input type='submit' value='Submit Order &raquo;' id='submit_order'/&gt;
    </div>
&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;

[eluser]Kyle Johnson[/eluser]
That is a beautiful piece of coding!

Funny thing is I had something like that setup at one point, except using the CodeIgniter session (database version) to store the data of each submit, but I like yours a lot better. The reason I stopped with the session version was the extreme overheard of processing the session variables from the database.

Should I then start storing each of those items in their own form elements? (Perhaps even hidden elements) So that when the form is submitted, it get submitted with the $_POST data?