How can I store dynamically created form inputs to a database using ajax

Question

I have asked a similar question but the answers didn't really help me in solving or think of a solution.

I have my JS script upload a file (using PHP as its callback) then take the data from the upload.php and reformat it using the JS code snippet below to show the user the inputs.

When the data is presented to the user it looks like this as an example:

input type="text" class="r" name="scene" value="1" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="2" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Outside" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="3" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="4" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="NIGHT" />

...

this output can range from 100 to 400 sets of inputs. One set is grouped into 4 inputs.

I'm trying to have each dynamic set fit into a query like this

mysql_query("INSERT INTO (`project_id`, `scene_number`, `int_ext`, `scene_description`, `day_night`) VALUES (10, '{$scene_num}', '{$int_ext}', '{$scene_desc}', '{$day_night}')");

Before anyone points out, In my code I am filtering and cleaning the inputs before inserting them into the database

My problem is I can't be creative enough to insert each scene information into the database like I envision it.

In my PHP code I echo out the line:

if(!$word)
    return NULL;

if(preg_match_all($pattern, $contents, $matches))
{
    foreach($matches as $match) {
        $list = "<li><div class='int'>".implode("</div></li><li><div class='int'>", $match)."</div></li>\n";
    }
}else{
    $list = "No matches found";
}

In my JS code I split out the line and divide it into the 4 inputs:

$int.html(function(i, html) {
    return html.replace(/(\d+)(.+)/,function(str,s1,s2){
        var text = s2.split('.');
        var text2 = text[1].split('-');
        var text3 = text2[1].split(' ');
        return '<input class="r" name="scene" value="'+ s1.replace(/^\s*/, '').replace(/\s*$/, '') +'" />' +
            '<input class="r" name="int_ext" value="'+ text[0].replace(/^\s*/, '').replace(/\s*$/, '') +'" />' +
            '<input class="r" name="scene_desc" value="'+ text2[0].replace(/^\s*/, '').replace(/\s*$/, '') +'" />' +
            '<input class="r" name="day_night" value="'+ text3[1].replace(/^\s*/, '').replace(/\s*$/, '') +'" />';
    });
});

I'm trying to form an AJAX request to send the values to a PHP page for processing, I'm not sure how to grab the data I need and send it off via AJAX (I know how to perform AJAX request, but in this case I don't know how to grab a dynamic number of inputs to be processed).

Any tips?

use scene_desc[] etc. as your input names to pass an array instead of single values — roman
– roman, Commented Mar 7, 2011 at 20:02
Just a Thought: It seems a bit odd to me that your user is going to put data in 100 to 400 input boxes. This may not be the best option. — Markus
– Markus, Commented Mar 7, 2011 at 21:12
The thing that is happening is that Once the data is collected from an uploaded file, the PHP/JS works together to make those inputs so that the user can edit the results if the PHP was inaccurate with the extraction of elements in the file. If everything is correct, then they can go ahead and save their import. — Eli
– Eli, Commented Mar 7, 2011 at 21:20

Riley Dutton · Accepted Answer · 2011-03-07 20:16:42Z

3

Option A:

Use standard PHP.

HTML code should be:

<input type="text" class="r" name="scene[]" value="1" />
<input type="text" class="r" name="int_ext[]" value="INT" />
<input type="text" class="r" name="scene_desc[]" value="Bedroom" />
<input type="text" class="r" name="day_night[]" value="DAY" />

<input type="text" class="r" name="scene[]" value="2" />
<input type="text" class="r" name="int_ext[]" value="EXT" />
<input type="text" class="r" name="scene_desc[]" value="Outside" />
<input type="text" class="r" name="day_night[]" value="DAY" />

<input type="text" class="r" name="scene[]" value="3" />
<input type="text" class="r" name="int_ext[]" value="INT" />
<input type="text" class="r" name="scene_desc[]" value="Bedroom" />
<input type="text" class="r" name="day_night[]" value="DAY" />

<input type="text" class="r" name="scene[]" value="4" />
<input type="text" class="r" name="int_ext[]" value="EXT" />
<input type="text" class="r" name="scene_desc[]" value="Bedroom" />
<input type="text" class="r" name="day_night[]" value="NIGHT" />

Then on the PHP side of things you can do this:

<?php

foreach($_POST['scene'] as $k=>$scene) {
    $int_ext = $_POST['int_ext'][$k];
    $scene_desc = $_POST['scene_desc'][$k];
    $day_night = $_POST['day_night'][$k];

   mysql_query("INSERT INTO (`project_id`, `scene_number`, `int_ext`, `scene_description`, `day_night`) VALUES (10, '{$scene}', '{$int_ext}', '{$scene_desc}', '{$day_night}')");
}

?>

I don't think Javascript should factor into this at all. Just submit it using a normal form tag with method="post".

Option B:

Use AJAX to submit, but this will necessitate the use of JSON and other advanced techniques.

HTML Code:

<input type="text" class="r" name="scene" value="1" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="2" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Outside" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="3" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="4" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="NIGHT" />

Javascript:

$("#submitbutton").click(function() {
    var data = {};
    $("input[name=scene]").each(function() {
        data[$(this).val()] = {
            intext: $(this).next("input[name=int_ext]").val(),
            desc: $(this).next("input[name=scene_desc]").val(),
            daynight: $(this).next("input[name=day_night]").val()
        };
    });
    $.post("/submit.php", {data: JSON.stringify(data)}, function(resp) {
        //success
    });
});

PHP:

<?php

$scenes = json_decode($_POST['data']);

print_r($scenes); //you should be able to figure out what to do with it from there...

?>

edited Mar 7, 2011 at 20:16

answered Mar 7, 2011 at 20:06

Riley Dutton

7,7452 gold badges26 silver badges26 bronze badges

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

5 Comments

Eli Over a year ago

Hmmmm ya that was one route, but because I am loading the data in via AJAX when I submit the from the page will refresh tot he post back page loosing all current page data before the submit.

Riley Dutton Over a year ago

@s2xi Maybe give a little more detail in the original question regarding how the data is originally being loaded in and your requirements after submission? I think this is the best way to do it based on what you've given us to work with so far...but there may be a better way if you give us more information.

Eli Over a year ago

In my submission I have added that I am loading in the content from an ajax request using that bit of js code I provided. The PHP does the upload and output work, the JS grabs the line from PHP and splits it into 4 input fields. Now I need the 3rd step, to submit the form using another AJAX request.

Eli Over a year ago

hmmm, I understand what you are showing me here ;) I can user the JSON response in this scenario. I just need to do the server side processing with PHP and use JS to send the data to PHP for that and also to send out a Success, Thank you message.

Riley Dutton Over a year ago

@s2xi Sounds like you've got it. Basically the JS is just sending a big JSON bundle with all your data to PHP for processing.

DefyGravity · Accepted Answer · 2011-03-07 20:24:03Z

1

Diodeus is right, but it appears that you want jQuery to help out your php as much as possible...

<form>
    <fieldset>
        <legend>group 1</legend>
<input type="text" class="r" name="scene" value="1" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />
        </fieldset>
<fieldset>
        <legend>group 2</legend>
<input type="text" class="r" name="scene" value="2" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Outside" />
<input type="text" class="r" name="day_night" value="DAY" />
  </fieldset>
<fieldset>
        <legend>group 3</legend>
<input type="text" class="r" name="scene" value="3" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />
  </fieldset>
<fieldset>
        <legend>group 4</legend>
<input type="text" class="r" name="scene" value="4" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="NIGHT" />
  </fieldset>
    <input type="button" name="mybutton" value="submit me">
  </form>

javascript to Ajax posts 4 inputs at a time, asynchronously:

$(document).ready(
    function(event){
        $("input :button").click(
            $("fieldset").each(
                function(index, elem){
                    $.post("your Url", $(this).find("input").serializeArray(), function(text,data,xhr){
                    alert("post completed!");
//recommend a 'message' section to your page to append any errors for each 4 pack inserted.  maybe removing all successful fieldset blocks and only leaving errored sections?
                    });
                }
            );

        );
    }
);

answered Mar 7, 2011 at 20:24

DefyGravity

6,0915 gold badges35 silver badges48 bronze badges

3 Comments

Eli Over a year ago

woah, thats cool. The only problem is that it feels like it can easily be overwhelmed by the number of request its going to need to make dont you think? If I have 300 fieldsets, won't it lag or possibly crash the browser?

Riley Dutton Over a year ago

@s2xi Yes, this would work okay for 4 or 5 groups, but at 300 groups it would be very slow, not to mention your server probably isn't equipped to handle 300 concurrent requests.

Markus Over a year ago

I'm not sure/don't have the time to write it...but you could collect 10 fields...AJAX post...collect next 10 fields...AJAX post...till you get through your 300. It would take a long time, but you would be able to inform the user they have 290 of 300 fields left to process.

Diodeus - James MacFarlane · Accepted Answer · 2011-03-07 20:02:52Z

-1

jQuery is a client-side tool that has nothing to do with server-side database functionality.

You're basically posting a form. PHP handles the form in the server, not jQuery. This is a PHP question, not a jQuery question.

answered Mar 7, 2011 at 20:02

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

1 Comment

Eli Over a year ago

I know that, I needed to know how to use an ajax request in my case to send data to a processing block oh PHP code.

Collectives™ on Stack Overflow

How can I store dynamically created form inputs to a database using ajax

3 Answers 3

5 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related