Ajax + PHP in multi row

Question

I created a simple webpage to add product one at a time. User only need to input the product name and all product info will be get thru AJAX. I used jQuery AJAX and it works.

user select product and the sell price, suggested discount will be shown automatically

But Now user want to have a button at the end of the row so that they can add many products in the same page. so when they want to add one more product, then can just click the button and a new row will appear below for them to add product.

How can I do that to pass data to PHP? what's the name for each textbox? In PHP, how do I can all these products info? In array?
How can I use ajax to put the received info to different row? IE. when user select row two product, how to make put the product info back to row two fields?
If I use AJAX, I know we can pass multiple data to server by using JSON. Can I receive multiple Data too? Now I am using separator only.

any example?

Thanks

Can you please be more clear in your writing? It's hard to make sense because of your English. — ProEvilz
– ProEvilz, Commented Jan 10, 2015 at 13:49
Perhaps some code examples of what you currently have at the moment too? Are you using MySQL to store the data? — ProEvilz
– ProEvilz, Commented Jan 10, 2015 at 13:49
If you have 5 lines, you want to save the information at one shot that means, it will have only one btn save, or you will have independent save btn for each row? — IgorAlves
– IgorAlves, Commented Jan 10, 2015 at 14:17

IgorAlves · Accepted Answer · 2015-01-10 15:40:36Z

There is a lot of possibilities to do that. This is one. I dont know where you want to calculate your subtotal. And discount. It could be done in javascript or it could be done by php. It is your choice.

$(document).on("change", ".cboProdc", function(e){ // As you change the select box element
    $("*").removeClass("active");//Remove active class from all elements in the DOM

    $(this).parent().addClass("active");//Add active for  a div container parent

    //Add active for  each input som form active div
    $(".active .txtPrice").addClass("active");
    $(".active .txtDisc").addClass("active");
    $(".active .txtSugDisc").addClass("active");
    $(".active .txtQt").addClass("active");
    $(".active .txtStot").addClass("active");

    //Make your AJAX request to PHP.
    //Send to PHP id product like this $("option:selected", this).val();

        var dt={                   
                  productId: $("option:selected", this).val()
                };

        //Ajax      
         var request =$.ajax({//http://api.jquery.com/jQuery.ajax/
                                url: "yourServer.php",
                                type: "POST",
                                data: dt,
                                dataType: "json"
                            });




//Retrieve all information through JSON and put it in each active element.
//Ajax Done catch JSON from PHP 
            request.done(function(dataset){
                for (var index in dataset){ 
                     txtPrice=dataset[index].Price;
                     txtDisc=dataset[index].Discount;
                     txtSugDisc=dataset[index].SugDisc;
                     txtQt=dataset[index].Quanty;
                     txtStot=dataset[index].Stot;//If you want to use php to perform the calculus
                 }

                 //JavaScript conditions. Here you can control the behaivior of your html object, based on your PHP response and pass values to acvive elements

                    $(".active .txtPrice").val(txtPrice);
                    $(".active .txtDisc").val(txtDisc);
                    $(".active .txtSugDisc").val(txtSugDisc);
                    $(".active .txtQt").val(txtQt);
                    $(".active .txtStot").val(txtStot);

         });//End of request.done(... 

});//End of $(document).on("change",


///////////////////////////////////////////////////////////////////////////////////
//Your php code
//Make your query at database
//Return like this:

        $arrToJSON = array(
        "Price"=>"the price",
        "Discount"=>"the Discount",
        "SugDisc"=>"the SugDisc",
        "Quanty"=>"the Quanty",
        "txtStot"=>"the txtStot",  
        );  
        return json_encode(array($arrToJSON));
//////////////////////////////////////////////////////////////////////////////////////

To save all information make a .each() http://api.jquery.com/each/ for each element, retiereve each information an use separator to send to php. Exemple "*" In php you can use explod http://php.net/manual/en/function.explode.php Here you have a fiddle http://jsfiddle.net/hp5kbtce/1/ to see how to select elements for each product row

Thanks zwitterion. I like the idea of adding .active class to control everything. I changed the code a bit to fit my requirement. Thanks.

Collectives™ on Stack Overflow

Ajax + PHP in multi row

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related