Dynamically adding form elements depending on user selection

Question

Good day..

I have a problem that is grinding my gears for a week and I can not find a solution that will completely fit the requirement I have.

I am building an application with php that aims to allow staff to take orders and submit them to the appropriate department (similar to a shopping cart, but slightly different).

Submitting the order and assigning it to the department is something that I have sorted. what I have in mind is something like this:

staff clicks a button to add an item
a pop up will display the items menu
the staff can select one item at a time, and once the item is selected it's added to the order items.

Items will be populated from the database.

The issue that I have is that for some items I need to have the option to have multiple sub-items. For example, if I have a promo pack that contains there items I will need to add the promo item to the order list with the sub-items below.

the following link has something similar to what I want, what I need is that the number of form elements added to be different depending on the item the staff selects:

http://www.daveismyname.com/demos/dynamic-form-elements-with-jquery/

Any ideas or pointers on how to accomplish this would be highly appreciated.

Edit: Code Removed since it was revised in a major way. I will post the end result once it is complete.

Ranty · Accepted Answer · 2013-03-13 16:37:23Z

1

When staff clicks a button to add an item, your script fires AJAX call that gets data about the items from a PHP script. This data should contain the amount of subitems for each product. So when staff picks an item, you populate the order with item and subitems.

The key is to use AJAX to get the data, I assume right now you generate the items menu when the page is loaded and show it with change of css rules on "add an item" click. If you will change that to AJAX, you will have the data about subitems and therefore can populate order properly.

Update:

User clicks "add an item" link. AJAX request is fired and php script returns JSON array with data about items available. That array has all the details, including dependencies (sub-items, that need to be added to order when you select the main item). Example php script:

$list_of_items[] = array(
    'name' => 'Promo pack',
    'image' => '/images/promopack.jpg',
    'subitems' => array(
        array(
            'name' => 'Promo pack item 1',
            'image' => '/images/promopackitem1.jpg'
            ),
        array(
            'name' => 'Promo pack item 2',
            'image' => '/images/promopackitem2.jpg'
            )
        )
);
echo json_encode($list_of_items);

Then you decode that data in JavaScript with parseJSON.

If user clicks on an item without sub-items, you just add it to the order. If user clicks on an item with sub-items, you add the item itself and all the sub-items. Since you have that data as a simple array (thanks to JSON format) you can work with the data simply by accessing that array's elements.

edited Mar 13, 2013 at 16:37

answered Mar 12, 2013 at 11:21

Ranty

3,3833 gold badges26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MDChaara Over a year ago

Thanks Ranty. So what you are suggesting is that I design the script as follows: 1: use AJAX to get the item details from a php script 2: Once the details are selected, I return them using jQuery to the parent The main page will have the jQuery element to remove, so once it is clicked, it will remove all the form elements within that container. did i get it right?

Ranty Over a year ago

@MDChaara Updated the answer with further details.

MDChaara Over a year ago

Thanks Ranty, I'm half way there now :) got to do some research on parseJSON.

Collectives™ on Stack Overflow

Dynamically adding form elements depending on user selection

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related