私は処理しようとしているこのフォームを持っています。それはあなたの基本的な住所フォームです。送信したら、ここの下部にある処理スクリプトに送信します。発生し続ける問題は、フォームを送信すると、スクリプトが入力されたさまざまなアドレスデータの量に等しい最初のアドレスを何度も繰り返すことです。.each関数を使用して入力をトラバースし、それらを関数に配置して、データをオブジェクトに変換し、配列に格納しています。その後、そのデータを処理します。
以下は私が使用しているフォームです。ここでは何も問題はないと確信しています。名前がクラスに干渉していることだけが考えられますが、名前を呼び出さず、ajax呼び出しを使用していることを考えると、どの時点でもそれが発生していることはわかりません。サーバー側でデータを取得します。これははるかに大きなフォームのスニペットであることに注意してください。フォームタグが欠落していることを指摘しないでください。
<span class='address-form'>
<div class='row'>
<div class='form-group'>
<div class='col-md-6'>
<label>Street Name and Address</label>
<input type='text' class='form-control address not-empty' name='adress[]' value="<=$address?>">
</div>
</div>
</div>
<div class='row'>
<div class='form-group'>
<div class='col-md-6'>
<input type='text' class='form-control address2' name='address2[]'>
</div>
</div>
</div>
<div class='row'>
<div class='form-group'>
<div class='col-md-3'>
<label>City</label>
<input type='text' class='form-control city not-empty' name='city[]' value="<?=$city?>">
</div>
<div class='col-md-3'>
<label>State</label>
<select class='form-control state not-empty' name='state[]' value="<?=$state?>">
<option value="" selected>--State--</option>
<?=listStates($state, $us_states)?>
</select>
</div>
<div class='col-md-2'>
<label>Zip</label>
<input type='text' class='form-control zip not-empty' name='zip[]' maxlength='5' value="<?=$zip?>">
</div>
</div>
</div>
<div class='row'>
<div class='form-group'>
<div class='col-md-3'>
<label>From</label>
<div class='input-group app-input'>
<select class='form-control app-md-input addr_from_month not-empty' name='addr_from_month[]'>
<option value="" selected>mm</option>
<?
for($i = 1; $i < 13; $i++){
print "<option value='".$i."'>$i</option>";
}
?>
</select>
<select class='form-control app-md-input addr_from_year not-empty' name='addr_from_year[]'>
<option value="" selected>yyyy</option>
<?
$year = date("Y");
for($i = $year; $i > ($year - 25); $i--){
print "<option value=\"$i\">$i</option>\n";
}
?>
</select>
<span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span>
</div>
</div>
<div class='col-md-3'>
<label>To</label>
<div class='input-group app-input'>
<select class='form-control app-md-input addr_to_month not-empty' name='addr_to_month[]'>
<option value="" selected>mm</option>
<?
for($i = 1; $i < 13; $i++){
print "<option value='".$i."'>$i</option>";
}
?>
</select>
<select class='form-control app-md-input addr_to_year not-empty' name='addr_to_year[]'>
<option value="" selected>yyyy</option>
<?
$year = date("Y");
for($i = $year; $i > ($year - 25); $i--){
print "<option value=\"$i\">$i</option>\n";
}
?>
</select>
<span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span>
</div>
</div>
</div>
</div>
</span>
以下は検証スクリプトです。質問の前半で述べたように、私は.each関数を使用していますが、関数がどのように機能するかをさらに検討した後、それが正確であり、正常に機能していないことがわかり始めています。別の方法を試すかどうかはわかりません。また、アイテムの数が不定であるため、forループまたはforeachループを正確に使用することはできません。
var addresses = []; //holds array of address objects
$('.address').each(function() {
address = new newAddress($('.address').val(), $('.address2').val(), $('.city').val(), $('.state').val(), $('.zip').val(), $('.addr_from_month').val(), $('.addr_from_year').val(), $('.addr_to_month').val(), $('.addr_to_year').val());
addresses.push(address); //build the addresses array of objects
});
function newAddress(line1, line2, city, state, zip, from_month, from_year, to_month, to_year){
this.line1 = line1;
this.line2 = line2;
this.city = city;
this.state = state;
this.zip = zip;
this.from_month = from_month;
this.from_year = from_year;
this.to_month = to_month;
this.to_year = to_year;
}
事前にご意見・ご感想をお寄せいただき、誠にありがとうございます。必要に応じて編集や追加情報を提供します！
私のコメントの後、これはあなたの問題の迅速な解決策になると思います：
$('.address').each(function(index) {
address = new newAddress($('.address').eq(index).val(),
$('.address2').eq(index).val(),
$('.city').eq(index).val(),
$('.state').eq(index).val(),
$('.zip').eq(index).val(),
$('.addr_from_month').eq(index).val(),
$('.addr_from_year').eq(index).val(),
$('.addr_to_month').eq(index).val(),
$('.addr_to_year').eq(index).val());
addresses.push(address); //build the addresses array of objects
});
更新
別の方法は、一度.map()に返すためarrayに使用することです。以下のコードは、必要なものすべてです。
var addresses = $('.form-control').map(function (index, element) {
return {
line1: $('.address').eq(index).val(),
line2: $('.address2').eq(index).val(),
city: $('.city').eq(index).val(),
state: $('.state').eq(index).val(),
zip: $('.zip').eq(index).val(),
from_month: $('.addr_from_month').eq(index).val(),
from_year: $('.addr_from_year').eq(index).val(),
to_month: $('.addr_to_month').eq(index).val(),
to_year: $('.addr_to_year').eq(index).val()
};
}).get();
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加