how to save dynamic form data from javascript to database with a query

Question

So I have a script that makes dynamic form content and each input has a name of "field-1", "field-2", etc. up until the last input is created by the script.

How can I save the form made to the database?

I only know how to do this in a traditional way where you make like 5 static inputs and give them static names and ids then use the either post or get go formulate the mysql_query.

But in my case, the inputs can range from 3 - 200 inputs. and each have a similar name/id of "field+num++"

My html code:

<form id="myForm">

My JS code that will append to my HTML form:

var $int = $('div.int');
$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-"' + s1 + ' value="'+ s1.replace(/^\s*/, '').replace(/\s*$/, '') +'" />' +
        '<input class="r" name="int_ext-"' + s1 + ' value="'+ text[0].replace(/^\s*/, '').replace(/\s*$/, '') +'" />' +
        '<input class="r" name="scene_desct-"' + s1 + ' value="'+ text2[0].replace(/^\s*/, '').replace(/\s*$/, '') +'" />' +
        '<input class="r" name="day_night-"' + s1 + ' value="'+ text3[1].replace(/^\s*/, '').replace(/\s*$/, '') +'" />';
    });
});

My HTML code:

<input type="submit" value="Submit" />
</form>

a sample output is:

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

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

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

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

...

more are created on the fly with the script, this can make like 300 sets of these 4 inputs

then I would like to do something like

mysql_query("INSERT INTO `table` (`scene_num`, `int_ext`, `scene_desct`, `day_night`) VALUES ('{$scene}', '{$int_ext}', '{$scene_desct}', '{$day_night}')");

Thomas Hunter II · Accepted Answer · 2011-03-04 00:39:12Z

2

Here's a cool trick that you can do using HTML. Set the inputs up like this:

<input name="dynamic[]" value="fish" />
<input name="dynamic[]" value="cat" />
<input name="dynamic[]" value="dog" />
<input name="dynamic[]" value="moose" />

And in PHP, you can access them like so:

<?php
foreach($_POST['dynamic'] AS $key => $value) {
    doSomethingWith($value); # fish, cat, dog, moose
}
?>

answered Mar 4, 2011 at 0:39

Thomas Hunter II

5,2317 gold badges39 silver badges57 bronze badges

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

3 Comments

Eli Over a year ago

oh hmmm, yes... rings a bell lol. Updated my post to show a more complete explaination

Thomas Hunter II Over a year ago

Do the foreach I mention, all of your inputs would use a [] at the end. Iterate over one of the four types of data (e.g. scene) and in each of the foreach bodies you would execute a mysql.

Eli Over a year ago

wouldn't that make more INSERT INTO than it needs to? I imagine it making a mysql_query for each input generating a query per input.

Fatih Acet · Accepted Answer · 2011-03-03 23:34:22Z

I understand that, you have a script that creates input fields with names and you want to post all fields to server. You can use jQuery's ajax post method. Check the code.

$.ajax({
    type: 'POST', // we will post something
    dataType: 'json', // and we want to catch the server response as json
    url: 'yourPostUrl', // write your post url here
    data: $('#myForm').serialize(), // give an id to your form and serialize it. this will prepeare the form fields to post like &field1=lol&field2=lollol ...
    success: function(data) { // data will give you server request as json
        // do your stuff in here, for an example show an alert, says everyting is OK
        alert(data.message); // consider your reply has a message 
    },
    failure: function (data) {
        // handle your Ajax request's failure in here
        alert('Please try again');
    }
})

I think, this will use for you.

Collectives™ on Stack Overflow

how to save dynamic form data from javascript to database with a query

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related