AJAX function and Bootstrap Modal

Question

I am trying to add a product to the basket, but if the user doesn't choose any option from a certain select input, I want that select to appear in the Bootstrap Modal Window that shows when the user clicks 'Add to basket' without selecting any option. Then, the user will continue ONLY if he chooses an option. The code so far:

$('#button-cart').bind('click', function() {
    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
        dataType: 'json',
        success: function(json) {
            $('.success, .warning, .attention, information, .error').remove();

            if (json['error']) {
                if (json['error']['option']) {
                    for (i in json['error']['option']) {

                         $('#deleteMessage').modal();
                         $('.modal-body').after('<span class="error">' + json['error']['option'][i] + '</span>');

                    }
                }
            } 

            if (json['success']) {
                $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

                $('.success').fadeIn('slow');

                $('#cart-total').html(json['totalProducts']);

                $('html, body').animate({ scrollTop: 0 }, 'slow'); 
            }   
        }
    });
});

Any idea on how to do that will be greatly appreciated! Thank you!

Answer 1

you can do this by checking before you open the modal dialog for the the selected values, if the user did not selected a set of values then you can just show those dropdowns inside the modal dialog so the user can selected them. After the user will click on the save button you are going to validate it on the client or on the server, or on both, your choice. If the user did not select any values even though he has the modal dialog opened, you can just show him an alert() with a message that he should select a value and only after that he can proceed.

If you really wont be able to solve it, i`ll provide the code for it.

UPDATE

I come with an update to this, here is the code, if you need something different please tell

http://jsfiddle.net/xrQzR/