jQuery .load（）を使用して入力からPHPに配列をロードしますか？

Question

私は2週間ほど前に探して探していましたが、私はまだ何を把握する必要があるのか​​正確には分かっていないので、今は専門家に尋ねる時間です！

私は広告管理システムに取り組んでいます。リクエストフォームの1つは、広告の開始日と終了日を選択することです。ユーザーには日付を追加するオプションが与えられます。

それが動的に多くの入力を追加するオプションです下だから、initallyある二つの入力...

<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（）を使用して配列として送信する方法はありますか？ 私は...それは送信と次のコードでの入力の1セットのための情報を表示してい

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

私はちょうど100％がこれを行う方法を理解していないと思います。私は過去2週間私の脳をぶら下げてきましたが、私がやっていることに完全に関連する何かを見つけることはできません。

しかし、私がする必要があるのは、すべてのstartDateとendDateの入力からデータの配列を作り、それを.load（）とcheckSpots.phpページにスローし、それぞれに情報を表示させることです開始日と終了日のセット。

これとは別の方法がありますか？多分もっと効率的な方法でしょうか？または、誰かがこの壊れたjQueryのnoobに少しの光を当てることができれば、私は非常に感謝しています！ ：D

Answer 1

• デモ：http://jsbin.com/etihaw/3

$(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 
    } 
?> 

Answer 2

ロジックに重大な欠陥があります。すべてのid属性はドキュメント内で一意である必要があります。複数のIDを複数回使用すると、うまく動作しないか、予期しない結果が生じることがあります。

Answer 3

まず最初のもの、ユニークであるためにIDの必要性、新しい日付のペアが追加されたときに、IDの末尾に修飾子を追加します。

<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のブードゥー教を適用することができます。

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

}); 

注：上記のコードはテストされていません。

希望があればああ、obligatory Family Guy reference。

Answer 4

まず、1つのHTMLページ内の複数の要素に同じIDを使用しないでください。それはあらゆる種類の予期しない動作を引き起こします。その代わりにクラスを使用します。

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

Answer 5

私はint型のTHIをぶつけ最近問題が発生し、私はaSeptikソリューションが非常に便利だとわかりました。

しかし間違いがあります。 jQuery documentationから：データを対象として提供される場合

要求メソッド

POSTメソッドが使用されます。それ以外の場合は、 GETとみなされます。

.serialze（）関数の結果がstringであるため、.load（）メソッドは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 
    } 
?>