Search code examples
phpjqueryformsdynamicform

Dynamically adding form elements depending on user selection

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:

  1. staff clicks a button to add an item
  2. a pop up will display the items menu
  3. 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.

Solution

  • 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.