Загрузить массив из входов в PHP с помощью jQuery .load ()? - PullRequest
Новая
       14

Загрузить массив из входов в PHP с помощью jQuery .load ()?

5 голосов
/ 07 декабря 2011

Хорошо, я искал и искал около 2 недель, и мне еще предстоит найти именно то, что мне нужно выяснить, так что сейчас время спросить экспертов!

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

Итак, есть два входа, которые есть изначально ... 

<input type="text" name="startDate[]" id="startDateInput">
<input type="text" name="enddate[]" id="endDateInput">

Затем, под этим есть возможность динамически добавлять больше входов. Когда пользователь добавляет больше входных данных, он просто копирует эти начальные входные данные, поэтому мы получаем больше экземпляров. Например: 

<input type="text" name="startDate[]" id="startDateInput">
<input type="text" name="enddate[]" id="endDateInput">

<input type="text" name="startDate[]" id="startDateInput">
<input type="text" name="enddate[]" id="endDateInput">

Есть ли способ отправить результаты этих входных данных в виде массива, используя .load ()? У меня есть отправка и отображение информации для одного набора входов с кодом ниже ... 

var startDate = $("#startDateInput").val();
var endDate = $("#endDateInput").val(); 
$("#adBooking").show().load('../scripts/checkSpots.php', { startDate: startDate, endDate: endDate});

Полагаю, я просто не на 100% понимаю, как это сделать. Последние две недели я ломал голову, но не могу найти ничего, что имело бы отношение к тому, что я делаю.

Но мне нужно сделать массив данных из всех входных данных startDate и endDate, а затем перебросить их через .load () на страницу checkSpots.php и отобразить информацию для каждого набора. даты начала / окончания.

Есть ли другой способ сделать это? Может быть, более эффективный способ? Или, если кто-нибудь может пролить немного света на этот сломанный jQuery noob, я был бы очень признателен! : D

Ответы [ 5 ]

2 голосов
/ 07 декабря 2011 
$(function() {
    $("#add-date").click(function(e) {
        var i = $('.end-date').length + 1;
        $('<p class="dates">' + 
          '<input class="start-date" name="startDate[' + i + ']" id="startDate' + i + '" />' + 
          '<input class="end-date" name="endDate[' + i + ']" id="endDate' + i + '" />' + 
          '</p>').insertAfter('.dates:last');
          e.preventDefault();
    });
    $('#my-form').submit(function() {
        var post_data = $(this).serialize();
        //$("#adBooking").show().load('../scripts/checkSpots.php', post_data);
        alert(post_data);
        return false;
    });

PHP 

<?php
   foreach($_POST['startDate'] as $key => $val ) {
         echo $key;  // 1
         echo $val; // 07/12/2011
    }
   foreach($_POST['endDate'] as $key => $val ) {
         echo $key;  // 1
         echo $val; // 09/12/2011
    }
?>
1 голос
/ 07 декабря 2011

Перво-наперво, идентификаторы должны быть уникальными, поэтому, когда добавляется новая пара дат, добавьте классификатор в конце идентификатора: 

<input type="text" name="startDate[]" id="startDateInput1">
<input type="text" name="enddate[]" id="endDateInput1">

<input type="text" name="startDate[]" id="startDateInput2">
<input type="text" name="enddate[]" id="endDateInput2">

Или еще лучше, используйте класс: 

<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">

<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">

Затем вы можете применить jQuery voodoo в любое время (нажатие кнопки, отправка и т. Д.): 

$('#myButton').click(function(){

    // Our ajax post data. For example, $_POST['startDates'][2] would 
    // give you the 3rd start date in your php file.
    var data = {
        startDates: new Array(),
        endDates: new Array()
    };

    // Loop through each date pair, extract its value, and add it to our post data
    $('.startDateInput').each(function(){
        data.startDates.push(this.val());
    });
    $('.endDateInput').each(function(){
        data.endDates.push(this.val());
    });

    // Load it!
    $('#result').load('doSomething.php', data);

});

Примечание: вышеуказанный код не тестируется, простопример одного возможного решения.

Надеюсь, это поможет.Да, и обязательный справочник Family Guy .

0 голосов
/ 06 июня 2013

В последнее время я столкнулся с этой проблемой, и обнаружил, что aSeptik решение очень полезно.

Но в этом есть ошибка.Из документации jQuery :

Метод запроса

Метод POST используется, если данные предоставляются как объект;в противном случае предполагается GET.

Поскольку результатом функции .serialze () является строка, метод .load () будет использовать GET.

JS-код (такой же): 

$(function() {
    $("#add-date").click(function(e) {
        var i = $('.end-date').length + 1;
        $('<p class="dates">' + 
          '<input class="start-date" name="startDate[' + i + ']" id="startDate' + i + '" />' + 
          '<input class="end-date" name="endDate[' + i + ']" id="endDate' + i + '" />' + 
          '</p>').insertAfter('.dates:last');
          e.preventDefault();
    });
    $('#my-form').submit(function() {
        var post_data = $(this).serialize();
        //$("#adBooking").show().load('../scripts/checkSpots.php', post_data);
        alert(post_data);
        return false;
    });

PHP скрипт с _GET: 

<?php
   foreach($_GET['startDate'] as $key => $val ) {
         echo $key;  // 1
         echo $val; // 07/12/2011
    }
   foreach($_GET['endDate'] as $key => $val ) {
         echo $key;  // 1
         echo $val; // 09/12/2011
    }
?>
0 голосов
/ 07 декабря 2011

Во-первых, вы не должны использовать один и тот же идентификатор для нескольких элементов на одной html-странице. Это вызовет все виды непредсказуемого поведения. Вместо этого используйте класс так: 

<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">

<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">

Затем вам нужно запросить все входные элементы, используя цикл jquery для каждого элемента и присвоить его значение соответствующему массиву. 

var myEndDateArray = [], myStartDateArray = [];
$(".endDateInput").each(function() {
     myEndDateArray.push($(this).val())

});
$(".startDateInput").each(function() {
     myStartDateArray.push($(this).val())

});

Наконец, вы должны опубликовать данные массива на своей странице в совместимом формате записи. 

$("#adBooking").show().load('../scripts/checkSpots.php', { 'startdate[]': myStartDateArray, 'enddate[]': myEndDateArray});
0 голосов
/ 07 декабря 2011

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

...