Как правильно отправить все записи формы Dynami c, используя jQuery? - PullRequest
Новая
       2

Как правильно отправить все записи формы Dynami c, используя jQuery?

0 голосов
/ 11 июля 2020

В приведенном ниже коде успешно отображаются 3 записи.

Вот моя проблема. Когда я нажимаю кнопку отправки, чтобы отправить данные в базу данных, только первый ввод формы, содержащий Имя (Joe) и фамилия (Deo) , отправляется и вставляется в базу данных, а остальные 2 записи не подает. Как я могу обеспечить отправку всех трех строк записей во входных данных формы?

index. html

<!doctype html>
  <html>
   <head>
<script src="jquery.min.js"></script>

  </head>
  <body> 

 <h1>Send Record</h1>
<div id="record"></div> 
<div id="record_btn"></div>
<script>
var json = [{
    "firstName": "John",
        "lastName": "Doe"
}, {
    "firstName": "Anna",
        "lastName": "Smith"
}, {
    "firstName": "Peter",
        "lastName": "Jones"
}];

$(document).ready(function(){
 var len = json.length;
            for(var i=0; i<len; i++){
              
                var firstname = json[i].firstName;
                var lastname = json[i].lastName;
               

                var tr_str = "<div>" +
                    "<td align='center'>" + (i+1) + "</td>" +

                    "<input type='text' id='firstname' name='firstname' value="+ firstname +">" +
                      "<input type='text' id='lastname' name='lastname' value="+ lastname +">" +  
                      //"<td align='center'><button id='send1' name='send1'>submit individually</button></td>" +
                    "</div>";

                $("#record").append(tr_str);
            }

 $('#record_btn').html("<button id='send2' name='send2'>submit All</button>");

});



// submit form

$(document).ready(function(){
    $('#send2').click(function(){
//$(document).on( 'click', '#send1', function(){ 
//$(document).on( 'click', '#send2', function(){    
var firstname = $('#firstname').val();
var lastname = $('#lastname').val();

alert(firstname);
alert(lastname);


if(firstname ==''){
alert('empty');
}
else{
        
var rec = "firstname="+ firstname + "&lastname=" + lastname;
        
        $.ajax({
            
            type:'POST',
            url:'insert.php',
            data:rec,
            cache:false,
            success:function(data){
    
                            alert('Record Inserted Successfully.');         
            }
            
        });
        
        }   
})

});



</script>

  </body>
</html>

insert. php

<?php


// pdo_connect.php

$st = $db->prepare('INSERT INTO users(firstname,lastname) values (:firstname,:lastname)');
$st->execute(array( 
':firstname' => $_POST["firstname"],
':lastname' => $_POST["lastname"],
));




/*

        foreach ($_POST["firstname"] as $key => $value) {
$st = $db->prepare('INSERT INTO users(firstname,lastname) values (:firstname,:lastname)');
$st->execute(array( 
':firstname' => $_POST["firstname"],
':lastname' => $_POST["lastname"],
));
        }

*/


?>

Ответы [ 2 ]

0 голосов
/ 11 июля 2020

Почему первая пара имени и фамилии вставляется в базу данных?

Потому что атрибут name входных элементов firstname и lastname одинаков во всех трех парах. Вы должны использовать уникальное имя для всех элементов внутри формы.

Вы можете достичь своего решения с помощью нижеприведенного JS фрагмента 

const json = [{
"firstName": "John",
"lastName": "Doe"
}, {
"firstName": "Anna",
"lastName": "Smith"
}, {
"firstName": "Peter",
"lastName": "Jones"
}];
$(document).ready(function(){
   const len = json.length;
      for(let i=0; i<len; i++){

        const firstname = json[i].firstName;
        const lastname = json[i].lastName;


        const tr_str = "<div>" +
        "<td align='center'>" + (i + 1) + "</td>" +
        "<input type='text' id='firstname_"+ i +"' name='firstname_"+ i +"' value=" + firstname + ">" +
        "<input type='text' id='lastname_"+ i +"' name='lastname_"+ i +"' value=" + lastname + ">" +
        "</div>";

    $("#record").append(tr_str);
}

$('#record').append("<input id='send2' type='button' value='Submit all' name='send2'>/>");

$('#send2').click(function() {
    const userDetails = $("#userForm").serialize();
    $.ajax({
        type:'POST',
        url:'insert.php',
        data: userDetails,
        cache:false,
        success:function(data){
            alert('Record Inserted Successfully.');
        }
    });
})

});

И прочтите в PHP: 

echo $_POST['userDetails']['firstname_0'];
echo $_POST['userDetails']['lastname_0'];
........
0 голосов
/ 11 июля 2020

Вот решение:

Во-первых, вы захотите использовать другой идентификатор для ваших полей ввода. Атрибут id HTML должен быть уникальным для каждого документа. Я предлагаю использовать атрибут class HTML.

Во-вторых, вы захотите использовать строку в формате JSON для отправки вашей информации на сервер. Таким образом, вы можете легко передать массив имен без проблем.

Пример кода: 

var json = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "lastName": "Smith"
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];

var people = [];
var numberOfPeople = json.length;

for (var i = 0; i < numberOfPeople; i++) {
  people[i] = {};
  people[i].firstName = $(".firstname")[i].value;
  people[i].lastName = $(".lastname")[i].value;
}

var passThisToTheServer = JSON.stringify(people);
console.log(passThisToTheServer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="firstname" name="firstname" value="John">
<input type="text" class="lastname" name="lastname" value="Doe">

<input type="text" class="firstname" name="firstname" value="Anna">
<input type="text" class="lastname" name="lastname" value="Smith">

<input type="text" class="firstname" name="firstname" value="Peter">
<input type="text" class="lastname" name="lastname" value="Jones">

Вот как будет выглядеть ваш jQuery AJAX запрос: 

$.ajax({
    
    type:'POST',
    url:'insert.php',
    data:passThisToTheServer,
    cache:false,
    success:function(data){
        alert('Record Inserted Successfully.');         
    }
    
});

На стороне PHP (сервер side), просто используйте json_decode для доступа к строке JSON, поступающей со стороны клиента в виде массива PHP. После этого нужно провести рефакторинг вашего оператора SQL, чтобы вставить несколько строк (https://www.mysqltutorial.org/mysql-insert-statement.aspx/).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...