如何通過Ajax在php中插入具有相同名稱的多個輸入

Question

我有允許插入多個輸入的html表單。 我只能插入第一個輸入。 如何通過ajax在php插入多個值，我的HTML格式如下。

<tr>
    <th>ID</th>
    <td><input type="number" id="navid"></td>
</tr>
<tr>
    <th>Menu IN</th>
    <td><input type="text" name="menuin"></input></td>
</tr>
<tr>
    <th>Menu ENG</th>
    <td><input type="text" name="menueng"></input>
    </td>
</tr>

用戶可以動態添加輸入字段（動態添加已由jquery完成） 如果只有一個輸入組，則通過不是問題。 但是，如果用戶添加多個輸入，我想傳遞多個輸入。

我已經傳遞了價值

$("#submit").click(function(){
    var navid = $("#navid").val();
    var menuin = $("input[name='menuin']").val();
    var menueng = $("input[name='menueng']").val();
    $.ajax({
        url: 'insert_nav.php',
        type: 'post',
        data: {navid:navid,menuin:menuin,menueng:menueng},
        success: function(data){
            alert(data);
            $('#nav')[0].reset();
        }
    });
});

我插入了ajax傳遞的輸入值，如下所示

if (isset($_POST["navid"]) && !empty($_POST["navid"])) {
        $query1 =$con->prepare("INSERT INTO menu(cid, title, en_title) VALUES (:navid, :menuin, :menueng)");
        $query1->bindParam(':menuin',$_POST["menuin"]);
        $query1->bindParam(':menueng',$_POST["menueng"]);
        $query1->bindParam(':navid', $_POST["navid"]);
        $query1->execute();
        $msg1 = 'Menu has inserted';    
    }

現在，我想插入多個值。 怎么做 ？

Answer 1

HTML：

<form id="the_form">
<tr>
    <th>ID</th>
    <td><input type="number" name="navid[]" id="navid"></td>
</tr>
<tr>
    <th>Menu IN</th>
    <td><input type="text" name="menuin[]"></input></td>
</tr>
<tr>
    <th>Menu ENG</th>
    <td><input type="text" name="menueng[]"></input>
    </td>
</tr>
<input type="submit" value="Submit Form" id="submit"/>
</form>

我為您的ID添加了一個name ，以便在您提交表單時將其包括在內。我剛剛添加了一個表單標簽，因為它不在您的問題中。

JS：

  Read about serialize 
  (https://stackoverflow.com/questions/15173965/serializing-and-submitting-a-form-with-jquery-post-and-php)


$("#submit").click(function(){
    var form_data = $("#the_form").serialize();
    $.ajax({
        url: 'insert_nav.php',
        type: 'post',
        data: {form_data:form_data},
        success: function(data){
            alert(data);
            $('#nav')[0].reset();
        }
    });
});

PHP //由於提交的數據現在是數組的集合，您將不得不遍歷它，以將其保存在數據庫中，因為您無法將數組直接保存在數據庫中。

if (!empty($_POST["navid"])) {
    for($counter = 0; $counter < sizeof($_POST["navid"]); $counter++){
        $query1 =$con->prepare("INSERT INTO menu(cid, title, en_title) VALUES (:navid, :menuin, :menueng)");
        $query1->bindParam(':menuin',$_POST["menuin"][$counter]);
        $query1->bindParam(':menueng',$_POST["menueng"][$counter]);
        $query1->bindParam(':navid', $_POST["navid"][$counter]);
        $query1->execute();
        $msg1 = 'Menu has inserted'; 
    }    
 }

Answer 2

您必須在輸入字段中為多個輸入元素應用數組。 並通過ajax傳遞數組，並使用foreach循環插入數據庫。

HTML

<tr>
    <th>ID</th>
    <input type="number" name="navid[]" id="navid">
</tr>
<tr>
    <th>Menu IN</th>
    <td><input type="text" name="menuin[]"></input></td>
</tr>
<tr>
    <th>Menu ENG</th>
    <td><input type="text" name="menueng[]"></input>
    </td>
</tr>

阿賈克斯

$("#submit").click(function(){
    var navid = [];
    $('input[name="navid[]"]').each( function() {
        navid.push(this.value);
    });
    var menuin = [];
    $('input[name="menuin[]"]').each( function() {
        menuin.push(this.value);
    });
    var menueng = [];
    $('input[name="menueng[]"]').each( function() {
        menueng.push(this.value);
    });
        $.ajax({
            url: 'insert_nav.php',
            type: 'post',
            data: {navid:navid,menuin:menuin,menueng:menueng},
            success: function(data){
                alert(data);
                $('#nav')[0].reset();
            }
        });
});

PHP

foreach ($_POST["navid"] AS $key => $item){               
    $query1 =$con->prepare("INSERT INTO menu(cid, title, en_title) VALUES (:navid, :menuin, :menueng)");
    $query1->bindParam(':menuin',$_POST["menuin"][$key]);
    $query1->bindParam(':menueng',$_POST["menueng"][$key]);
    $query1->bindParam(':navid',$item);
    $query1->execute();
    $msg1 = 'Menu has inserted';     
}