AJAX Libraries - Continuous Forms

[eluser]slowgary[/eluser]
That's what I was thinking, hidden form elements. That way you can have the items look nice and formatted, but you still get everything submitted via post.

You'd probably also want to add something to clear the form elements after adding an item:

Code:

$('#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>");

            $("#order_form input[type='text']").val(''); //added this line to clear the form inputs after adding an item
        });

[eluser]Kyle Johnson[/eluser]
Again, wonderful code to work with. I appreciate what you've provided to me.

I updated the code to insert hidden fields. Also, I removed the 'name' attributes from the original form items so that they do not get submitted with the form. I suppose I let them be submitted and compare them to the values in the array so that if the user submits the form with only the first form entered it uses that, or if they hit submit after adding many items I could check the singular values to the array values to see if it was previously entered (if it was, discard it, if not, then add it to the array).

Code:

$('#item_list').append("<li class='item'><ul>"
                                + "<li>Model: "
                                + $('#model').val()
                                + "&lt;input type='hidden' name='model[]' value='"
                                + $('#model').val()
                                + "' /&gt;&lt;/li>"
                                + "<li>Qty: "
                                + $('#qty').val()
                                + "&lt;input type='hidden' name='qty[]' value='"
                                + $('#qty').val()
                                + "' /&gt;&lt;/li>"
                                + "<li>Serial #: "
                                + $('#serial').val()
                                + "&lt;input type='hidden' name='serial[]' value='"
                                + $('#serial').val()
                                + "' /&gt;&lt;/li>"
                                + "<li>Asset #: "
                                + $('#asset').val()
                                + "&lt;input type='hidden' name='asset[]' value='"
                                + $('#asset').val()
                                + "' /&gt;&lt;/li>"
                                + "<li>Descripition: "
                                + $('#desc').val()
                                + "&lt;input type='hidden' name='desc[]' value='"
                                + $('#desc').val()
                                + "' /&gt;&lt;/li>"
                                + "<li class='remove'>remove this item</li></ul></li>");


            $("#order_form #serial, #order_form #asset, #order_form #desc").val(''); // clear these values for the next form, leave others to speed data entry.
            $("#order_form #qty").val('1'); // reset this value to 1
        });

[eluser]slowgary[/eluser]
Oops! I spelled description wrong.

[eluser]Kyle Johnson[/eluser]
So what I realized when I tried to add the .length method to my array of elements (ie., "model[]") and then get the count and put it inside the array name like "model[0]".. The .length method now believed that the length of model[] was 0.

Any idea how to get that under wraps?

I really think that the jQuery you provided me will get me over a huge hump in my coding. I have been pondering the best approach to the problem for a while, and I had half of it when I stored it in a list element like you had here, but the addition of the jQuery stuff makes life so much nicer.

[eluser]slowgary[/eluser]
What selector are you using to get the count? It sounds like it might be wrong, because it's not finding any elements. You could add a class to each of your hidden elements to make it easier.

Where are you trying to put the length? If you're trying to sequentially number each of your hidden fields, I don't think you need to do that. I'm not positive, but I believe that when you name your input fields with brackets, you end up with an array (and it's probably already sequentially numbered.)

So if your form looks like this:

Code:

<input type='text' name='model[]'/>
<input type='text' name='model[]'/>
<input type='text' name='model[]'/>

<input type='text' name='cereal[]'/>
<input type='text' name='cereal[]'/>
<input type='text' name='cereal[]'/>

<input type='text' name='asset[]'/>
<input type='text' name='asset[]'/>
<input type='text' name='asset[]'/>

You should be able to do this in your code:

Code:

<?php

$items['model'] = $this->input->post('model');
$items['serial'] = $this->input->post('serial');
$items['asset'] = $this->input->post('asset');

for($i = 0; $i < count($items['model']); $i++)
{
    echo
        'Model: '.$items['model'][$i].'<br/>'.
        'Serial: '.$items['serial'][$i].'<br/>'.
        'Asset: '.$items['asset'][$i].'<br/><hr/>';
}

?&gt;

[eluser]Kyle Johnson[/eluser]
I wonder what was on your mind this morning? Hungry? :-P
[quote author="slowgary" date="1244229731"]

Code:

<input type='text' name='model[]'/>
<input type='text' name='model[]'/>
<input type='text' name='model[]'/>

<input type='text' name='cereal[]'/>
<input type='text' name='cereal[]'/>
<input type='text' name='cereal[]'/>

<input type='text' name='asset[]'/>
<input type='text' name='asset[]'/>
<input type='text' name='asset[]'/>

[/quote]

Let me try to find out what I was doing with the .length property. I decided it wasn't too useful for what I was doing and didn't really affect the outcome.

[eluser]Kyle Johnson[/eluser]
There must be a better way to animate the loading of each new .item class.

Code:

$(document).ready(function(){
        $('#order_form').bind('submit', function(event){
            event.preventDefault();
            if($('#item_list').length == 0)
            {
                $('#items').append("<ul id='item_list'></ul>");
            }
            var countItemList = $('.item').length;
            var newItemList = "<li class='item' id='item_"+countItemList+"'><ul>"
                                + "<li>Model: "
                                + $('#model').val()
                                + "&lt;input type='hidden' name='model[]' value='"
                                + $('#model').val()
                                + "' /&gt;&lt;/li>"
                                + "<li>Qty: "
                                + $('#qty').val()
                                + "&lt;input type='hidden' name='qty[]' value='"
                                + $('#qty').val()
                                + "' /&gt;&lt;/li>"
                                + "<li>Serial #: "
                                + $('#serial').val()
                                + "&lt;input type='hidden' name='serial[]' value='"
                                + $('#serial').val()
                                + "' /&gt;&lt;/li>"
                                + "<li>Asset #: "
                                + $('#asset').val()
                                + "&lt;input type='hidden' name='asset[]' value='"
                                + $('#asset').val()
                                + "' /&gt;&lt;/li>"
                                + "<li>Descripition: "
                                + $('#desc').val()
                                + "&lt;input type='hidden' name='desc[]' value='"
                                + $('#desc').val()
                                + "' /&gt;&lt;/li>"
                                + "<li class='remove'>remove this item</li></ul></li>"
            $('#item_list').append(newItemList);
            $('#item_' + countItemList).hide();
            $('#item_' + countItemList).fadeIn("medium");
            
            $("#order_form #serial, #order_form #asset, #order_form #desc").val('');
            $("#order_form #qty").val('1');
            
        });
        

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

        $('#submit_order').bind('click', function(event){
            event.preventDefault();
            $('#order_form').unbind();
            $('#order_form').submit();
        });
    });

Any suggestions?

[eluser]Kyle Johnson[/eluser]
I found some interesting read while searching for .append effects.

http://www.learningjquery.com/2009/03/43...-correctly

It seems like doing += within javascript will KILL some browsers. I'm gonna keep that in mind from now on.

[eluser]slowgary[/eluser]
Interesting article. The += wasn't the big speed killer of the article, it was appending a new node to a new node and then appending them both to an existing node VS appending a whole strong of markup to an existing node. It makes sense though as the first method is creating separate objects. Either way, in your case it won't play a big role as you're not doing any of it 1000 times inside a loop.

What are you trying to do? Animate the addition of elements too? Sheesh. ;-)

Rather than call the hide() method on the newly appended item, I'd just specify display: none for .item in your CSS, that way every item is hidden by default. Then you can call show() or fadeIn().

How does that work so far? Do you have it live anywhere?

[eluser]slowgary[/eluser]
I'm not sure how you have things laid out, but you could consider prepend() for new items so they go to the top of the list, then you could even make the item absolute positioned and animate the left and top coordinates so the item 'flies' over to the list. Then just take away it's absolute positioning and it should pop into the list.