Добавление одного скрытого входного значения для каждого ввода формы в вызове ajax

У меня есть форма с кнопкой, которая может добавлять динамические поля ввода, и это создает проблему с ajax. Мой пост ajax дает мне 500 ошибок Но мой консольный журнал данных сейчас таков: enter image description here

но мне нужно вставить их как

insert into ticker_content (ticker_id, content)
     values (1, 'one'), (1, 'two');

Если в этом есть смысл.

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

Однако мне нужно, чтобы мой массив содержал элементы, каждый из которых имеет входное текстовое значение и идентификатор тикера. Поэтому для каждого созданного и заполненного ввода мне также нужно присвоить ему значение скрытого ввода этой формы, чтобы я мог отправлять их парами в свой цикл foreach и вставлять.

Вот мой файл addticker.php, который вызывается для вставки:

$items = $_POST['Items'];
$tickerID = $_POST['tickerID'];

foreach ($items as $item){

    $addTicker = "
        INSERT INTO ticker_content (tickerID, content)
        values ('$tickerID', '$item');
     "
     $mysqlConn->query($addTicker);
}

Итак, в основном для каждого значения Items [] мне нужно вставить одно и то же скрытое поле.

Вот моя форма и код JS для справки. Первый блок JS предназначен в основном для функциональности динамического добавления входных данных, но последний блок JS - это ajax, использующий serializeArray ();

<?php foreach($tickerDisplays as $key => $ticker):?>

    <form id="Items" method="post">   
        <label id="ItemLabel">Item 1: </label>
        <input type="text" name="Items[]"><br/> <!--form starts with one input-->
        <button type="button" class="moreItems_add">+</button> <!--button dynamically adds input, up to 10 per form-->

        <input type="hidden" name="tickerID" id="tickerID" class="tickerIdClass" value="<?php echo $ticker['ticker'] ?>"><!--hidden input used for tickerID-->
        <input type="submit" name="saveTickerItems" value="Save Ticker Items">  <!--submit button-->
    </form>

<?php endforeach;?>




<!-- This is the functionality for each form to click the '+' button and create new inputs -->
<script type="text/javascript">

$("button.moreItems_add").on("click", function(e) {
var tickerID = $(this).closest('form').find('.tickerIdClass').val(); //get value of hidden input for form
  var numItems = $("input[type='text']", $(this).closest("form")).length;
  if (numItems < 10) {
    var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
    html += '<input type="text" name="Items[]"/><br/>';
    $(this).before(html);
    console.log(tickerID);
  }
});

</script>

<!-- This is the ajax call to send all filled out and created inputs from form along with the hidden input -->
<script type="text/javascript">
$("#Items").submit(function(e) {
    e.preventDefault();
    var data = $("#Items").serializeArray();
    console.log(data);

$.ajax({
       type: "POST",
       url: "addticker.php",
       data: $("#Items").serializeArray(), // serializes the form's elements.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

});

</script> 

addticker.php возвращает ошибку 500, что означает: «Внутренняя ошибка сервера», обычно из-за синтаксической ошибки в PHP. В конце строки запроса я вижу недостающий полустолбец. Когда вы получаете ошибку 500, вы обычно можете увидеть, в чем проблема, в журнале ошибок PHP. Вас предупреждали о SQL-инъекции? Ваш код уязвим.

KIKO Software 13.09.2018 20:29

Хорошо, хороший улов. Я добавил точку с запятой и получил 200, но без вставки. Есть ли лучший способ проверить это на предмет результатов на странице или в консоли? Я просто чувствую, что он не вставит так, как я ожидал, особенно с несколькими входами

Whisou138 13.09.2018 20:42

Что касается отладки после того, как вы добавили полуколонку, вы можете использовать инструменты разработчика вашего браузера. См .: browserstack.com/developer-tools Перейдите на вкладку «сеть» и проверьте параметры и вывод, чтобы увидеть, что сделал ваш вызов ajax. В целях отладки вы можете захотеть повторить что-то на вашем addticker.php, чтобы сказать себе, что происходит.

KIKO Software 13.09.2018 20:48

За это большое спасибо!

Whisou138 13.09.2018 20:49
0
4
364
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, в вашем коде отсутствует точка с запятой (что, вероятно, вызывает ошибку 500).

Во-вторых, если вы хотите объединить все поля формы в один запрос, следующий запрос построит запрос, аналогичный тому, что вы отметили ранее в своем вопросе, как:

INSERT INTO ticker_content (ticker_id, content) VALUES(1, 'one'), (1, 'two'), ...

$items = $_POST['Items'];
$tickerID = $_POST['tickerID'];

$addTicker = "INSERT INTO ticker_content (tickerID, content) values";
foreach ($items as $item){
    $addTicker .= "('$tickerID', '$item'),";
}
$addTicker = substr($addTicker, 0, -1); // Eat that last comma

$mysqlConn->query($addTicker);

Ваш HTML также требует некоторой доработки, потому что атрибут id должен быть уникальным на странице. Поскольку вы дублируете форму, вам следует сделать что-то вроде следующего:

<form id="Items<?php echo $ticker['ticker']?>" class="tickerform" method="post">   

А затем обновите свой javascript:

// Using $(this) in Jquery allows you to access the 
// element that is making the method call (in this case, the form)
$(".tickerform").submit(function(e) {
    e.preventDefault();
    var data = $(this).serializeArray(); 
    console.log(data);
    $.ajax({
       type: "POST",
       url: "addticker.php",
       data: data, // Don't need to serialize again, 'var data' is still in scope.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
    });
});

Итак, я действительно заставил его работать с несколькими полями в одной форме! Он вставил по одной записи для каждого с правильным идентификатором. Однако в других формах также есть кнопка отправки, которая не работает (вероятно, из-за идентификатора на входе отправки в моей форме?). Вы можете мне помочь? Чтобы сколько бы форм ни было, функциональность была одинаковой?

Whisou138 13.09.2018 20:49

Итак, в основном отправка первой формы работает нормально функционально, но мне может понадобиться счетчик или что-то еще на кнопке отправки, чтобы она работала в каждой форме.

Whisou138 13.09.2018 20:54

@ Whisou138 Обновленный ответ.

Justin Pearce 13.09.2018 21:01

Ты лучший! Спасибо

Whisou138 13.09.2018 21:17

Другие вопросы по теме