如何使用查詢將動態表單數據從javascript保存到數據庫

Question

因此，我有一個腳本，該腳本可以生成動態表單內容，並且每個輸入的名稱都為“ field-1”，“ field-2”等，直到該腳本創建了最后一個輸入。

如何保存表格到數據庫？

我只知道如何以傳統方式執行此操作，在該方式中，您需要進行5個靜態輸入，並為它們提供靜態名稱和ID，然后使用post或get編寫mysql_query。

但就我而言，輸入范圍可以是3-200個輸入。 並且每個都有類似的名稱/ id“ field + num ++”

我的html代碼：

<form id="myForm">

我的JS代碼將附加到我的HTML表單中：

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*$/, '') +'" />';
    });
});

我的HTML代碼：

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

示例輸出為：

<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

那我想做些類似的事情

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

Answer 1

這是您可以使用HTML進行的一個很酷的技巧。 像這樣設置輸入：

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

在PHP中，您可以像這樣訪問它們：

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

Answer 2

我知道，您有一個腳本來創建帶有名稱的輸入字段，並且您想將所有字段發布到服務器。 您可以使用jQuery的ajax post方法。 檢查代碼。

$.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');
    }
})

我認為，這將為您使用。