How to pass jQuery generated input boxes with Ajax to PHP for insertion into MySQL?

Even-though I have tried the workarounds proposed on similar solutions, it still gives me 'Array' on the receiving PHP.

One thing I have to mention that is different from other postings that I've seen regarding this very topic, is that in my case, I am using a and jQuery to populate input text boxes for location and systems.

The way it should work is that the returned data should be inserted into a mySQL db. Each input text box has a unique name and id, but I have been struggling with just passing the information from jQuery to PHP.

So, I have some input boxes generated by click, and the idea is to pass them back after the form is validated. These locations and systems don't need to be validated, that is why the url of the ajax function is different from the开发者_如何转开发 action on the original form that holds it up and is unknown the amount of locations nor systems that the user is going to input in.

I have tried to insert an image to show but the system said that I need more reputation to do that. So any questions please feel free to ask

This function should take all the input texts with class 'locations'

            function updatenewval()
            {
            $("input.locations").each(function(){
            locations[$(this).attr("id")] = $(this).val();
                    $.ajax({
                        type: 'POST',
                        //dataType: 'text/html',
                    url: 'index.php?pag=project&op=list',
                    data: locations
                    });
            });
            }

This function should take all the input texts with class 'systems'

                function updatenewvalsys()
                {
                $("input.systems").each(function(){
                systems[$(this).attr("id")] = $(this).val();
                    $.ajax({
                            type: 'POST',
                            //dataType: 'text/html',
                            url: 'index.php?pag=project&op=list',
                            data: systems
                        });

                });
                }

On the PHP file there is a <div id="content">Add a Location</div> calling add_locations with parameters 0,0 first location, first system

            function add_location(num,sys)
            {
            num++;
            sys++;
            $('#content').append("<div id=location"+num+"></div>");
            $('#location'+num).append("<br>Location:&nbsp;<input type='text' name=location"+num+" onchange=\"updatenewval()\" onfocus=\"clearMe(this);\" class='locations' value=Location&nbsp;"+num+"  id=location"+num+" size=31 maxlength=31><br><br><div id='system1' class=\"add\"><a href='javascript:add_system("+num+","+sysorg+");' >Add a System&nbsp;<img src=\"images/plus1.gif\" style=\"border:0px\" alt=\"Add a System\"></a></div>");
            $('#inslocation').remove();
            $('#content').before("<div id='inslocation' class=\"add\"><a href=\"javascript:add_location("+num+","+sysorg+");\" class=\"add\">Add a Location&nbsp;<img src=\"images/plus1.gif\" style=\"border:0px\" alt=\"Add a Location\"></a></div>");        
            }

The function to bring call systems, I know the code is not elegant at all but I care right now for functionality mainly as I have been struggling to pass the data correctly.

            function add_system(num,sys)
            {
            newsystem=sys+1;
            $('#location'+num).append("<br>System:&nbsp;<input type='text' name=system"+num+newsystem+" class='systems' id=system"+num+newsystem+" value=System&nbsp;"+newsystem+"&nbsp;@&nbsp;Location"+num+" onchange=\"updatenewvalsys()\"  onfocus=\"clearMe(this);\" size=32 maxlength=32><div id='insystem' class=\"add\"><a href='javascript:add_system("+num+","+newsystem+");' >Add a System&nbsp;<img src=\"images/plus1.gif\" style=\"border:0px\" alt=\"Add a System\"></a></div>");
            $('#system1').remove();
            $('#insystem').remove();
            $('#insystem'+num+sys).hide();
            $('#location'+num).append("<div id=insystem"+num+newsystem+" class=\"add\"><a href='javascript:add_system("+num+","+newsystem+");' >Add a System&nbsp;<img src=\"images/plus1.gif\" style=\"border:0px\" alt=\"Add a System\"></a></div>");
            }

I was trying the approach mentioned above, and it does not seem to be passing any value. On the PHP, op=list

    if (isset($_POST['locations']))
    {
    parse_str($_POST['locations'], $locations);

                foreach ($locations as $key => $value) {
                echo "$value<br>\n";
                }
        }

Any pointers would be greatly appreciated and as this is related to jQuery -> PHP` serialize object. Thanks in advance!

---

I think when you do your post you want to do something along the lines of:

function updatenewval() {

    var locations = $("input.locations").serializeArray();

     $.ajax({
        type: 'POST',
        url: 'index.php?pag=project&op=list',
        data: locations
     });
}

which would serialize all input textboxes and their values and pass them in the http parameter data. At that point your PHP code should deserialize the array... to process it.