表单数据中的对象处理不正确

object from form data not processing correctly

本文关键字:处理 不正确 对象 数据 表单      更新时间:2023-09-26

我正在尝试处理此表单。这是你的基本地址表。当它提交时,我会将它发送到底部的处理脚本中。不断出现的问题是,当我提交表单时,脚本只是一遍又一遍地重复第一个地址,等于输入的不同地址数据的数量。我使用.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
});

更新

另一种方式是使用CCD_ 1一次性返回CCD_。下面的代码将是你需要的一切:

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