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

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开发者_Go百科="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?

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...

?>

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?
                    });
                }
            );

        );
    }
);

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.