Отправьте несколько данных из формы Dynami c с помощью PHP

Question

Я пытаюсь отправить несколько входных данных, сгенерированных с помощью метода jQuery append (), в той же общей форме. Я новичок в jquery и AJAX.

эта форма HTML близка к моей.

<form id="dynamic_form" method="POST">
    <select name="account1" id="account1">
        <option>Choose option</option>
        <option>Option 1/option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </select><br>
    <select name="task1" id="task1">
        <option>Choose option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select><br>
    <textarea name="note1" id="note1" required="required"></textarea><br>

    <button type="button" id="addbtn">Add</button>
    <button type="reset">Reset</button>
    <input type="Submit" id="submit" value="Submit"/>
</form>

это мой jquery код формы

$(document).ready(function(){
        var i = 1;
        $('#addbtn').click(function(){
            i++;
        $('#dynamic_form').append('<select name="account'+i+'" id="account'+i+'"><option>Choose option</option><option>Option 1/option><option>Option 2</option> //etc ...');
});

при нажатии кнопки добавления я получаю новые раскрывающиеся меню и поля ввода с увеличивающимися идентификаторами.

я не знаю, как мне использовать AJAX в моей ситуации для отправки мои данные в «отправка. php» и отправить их на мой sql сервер базу данных

Answer 1

Вы можете использовать метод serialize() для построения строки запроса всего содержимого в form. Затем вы можете предоставить это свойству data запроса $.ajax(), чтобы отправить информацию на ваш PHP logi c.

Также обратите внимание, что, поскольку вы используете PHP, вы не Не нужно беспокоиться о создании дополнительных атрибутов name и id во время выполнения. Просто добавьте к каждому имени поля суффикс [], а PHP будет интерпретировать значения как массив. В свою очередь, это означает, что все элементы учетной записи select идентичны, поэтому вместо них вы можете просто clone(). Это делает JS намного более аккуратным и лаконичным.

Наконец, при использовании append() в form новое содержимое помещается после кнопок. Вы можете выбрать последний элемент account[] и использовать вместо него insertAfter():

jQuery($ => {
  let $form = $('#dynamic_form').on('submit', function(e) {
    e.preventDefault();
    let data = $(this).serialize();
    console.log(data);

    /*
    $.ajax({
      url: 'yourpage.php',
      method: 'post',
      data: data,
      success: function() {
        console.log('It worked!');
      }
    });
    */
  });

  $('#addbtn').click(function() {
    let $last = $form.find('select[name="account[]"]:last');
    $last.clone().insertAfter($last);
  });
});

select,
textarea {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="dynamic_form" method="POST">
  <select name="account[]">
    <option>Choose option</option>
    <option>Option 1/option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
      <option>Option 5</option>
  </select>
  <select name="task[]">
    <option>Choose option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <textarea name="note" required="required"></textarea>

  <button type="button" id="addbtn">Add</button>
  <button type="reset">Reset</button>
  <input type="Submit" id="submit" value="Submit" />
</form>