How to insert multiple inputs with same name in php through ajax

I have html form that allowed to insert multiple input. I am able to insert only first input. How to insert multiple value in php passing through ajax, My HTML form is as below.

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

User can add input field dynamically(dynamic add has be done by jquery) enter image description here It is not problem to pass if only one input group. But I want to pass multiple input if user add more than one.

And I've passed value as

$("#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();
        }
    });
});

I've inserted input values passed by ajax as below

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';    
    }

Now I want to insert multiple values. How to do ?

2 answers

  • answered 2018-05-16 05:36 hungrykoala

    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>
    

    I added a name for your ID so that it will be included when you submit the form, I just added a form tag since it was not present in your question.

    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 //Since the submitted data is now a collection of an array you'll have to loop through it to save them in the database as you cannot save an array directly in a DB.

    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'; 
        }    
     }
    

  • answered 2018-05-16 10:01 Dipak Ojha

    You have to apply array in input field for multiple input element. And pass array through ajax and insert to database using foreach loop.

    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>
    

    Ajax

    $("#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';     
    }