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

Question

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!

bleepzter · Accepted Answer · 2011-02-16 17:57:32Z

1

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.

answered Feb 16, 2011 at 17:57

bleepzter

10.1k12 gold badges44 silver badges67 bronze badges

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

2 Comments

Jean G.T Over a year ago

I think the problem is with the url parameter within the $.ajax as it has pag and op and Firebug is telling me no Post information. However, when I try to pass it to a test.php it does contain with your approach the input name and value for the field modified only. But the test.php only shows up array(0){} The Firebug information when the function is triggered (when an input text field's value changes is)

Jean G.T Over a year ago

Parametersapplication/x-www-form-urlencoded system11 test to the first field system21 System 1 @ Location2 system22 System 2 @ Location2 system23 test to the field Source system11=test+to+the+first+field&system21=System%C2%A01%C2%A0%40%C2%A0Location2&system22=System%C2%A02%C2%A0%40%C2%A0Location2&system23=test+to+the+field --> this is for the POST but the RESPONSE keeps being array(0){}

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related