Question

所以我为一个网站制作form，允许一个人在input标签中输入他们的信息进行注册，所以我需要信息（即姓名，地址，年龄）。我还想在屏幕底部有一个按钮，能够发出 AJAX 请求，将所有相同的input元素重新输入，这样用户就可以注册其他人去另一页我在一个form中执行此操作，因此我需要每个input都有一个唯一的名称，这样当我访问服务器端的信息时，我就能得到它。

所以这是我的代码：

<div id="registrationfield">
<div class="registerfield">
    <label>First Name:</label>
    <input type="text" id="first" name="first0" />
</div>
<div class="registerfield">
    <label>Last Name:</label>
    <input type="text" id="last" name="last0" />
</div>
<div class="registerfield">
    <label>Age:</label>
    <input type="text" id="age" name="age0" />
</div>
<div class="registerfield">
    <label>Gender</label>
        <select name="gender0" >
            <option></option>
            <option>Male</option>
            <option>Female</option>
        </select>
</div>
<div class="registerfield">
    <label>Email:</label>
    <input type="text" id="emailregistration" name="email0" />
</div>
<div class="registerfield">
    <label>Phone:</label>
    <input type="text" id="phone" name="phone0" />
</div>
<div class="registerfield">
    <label>Address:</label>
    <input type="text" id="address" name="address0" />
</div>
<div class="registerfield">
    <label>City:</label>
    <input type="text" id="city" name="city0" />
</div>
<div class="registerfield">
    <label>Zip Code:</label>
    <input type="text" id="zip" name="zip0" />
</div>
<div class="registerfield">
    <label>T-Shirt Size</label>
    <select id="tshirt" name="tshirt0" >
        <option>S</option>
        <option>M</option>
        <option>L</option>
        <option>XL</option>
        <option>XXL</option>
    </select>
    <button id="moreregistration">More</button>
</div>
</div>
</div>

这是我带来的 AJAX 请求的HTML：

<div class="registerfield">
    <label>First Name:</label>
    <input type="text" name="first" />
</div>
<div class="registerfield">
    <label>Last Name:</label>
    <input type="text" name="last" />
</div>
<div class="registerfield">
    <label>Age:</label>
    <input type="text" name="age"/>
</div>
<div class="registerfield">
    <label>Gender</label>
        <select name="gender">
            <option>Male</option>
            <option>Female</option>
    </select>
</div>
<div class="registerfield">
    <label>Email:</label>
    <input type="text" name="email" />
</div>
<div class="registerfield">
    <label>Phone:</label>
    <input type="text" name="phone" />
</div>
<div class="registerfield">
    <label>Address:</label>
    <input type="text" name="address" />
</div>
<div class="registerfield">
    <label>City:</label>
    <input type="text"  name="city" />
</div>
<div class="registerfield">
    <label>Zip Code:</label>
    <input type="text" name="zip" />
</div>
<div class="registerfield">
    <label>T-Shirt Size</label>
    <select name="tshirt" >
        <option>S</option>
        <option>M</option>
        <option>L</option>
        <option>XL</option>
        <option>XXL</option>
    </select>
</div>

我在主HTML文档中加载HTML后，我要做的是更改每个name和input元素的select属性，以便在结束。
例如，当发出第一个AJAX请求时，它会name="first"到name="first1"，并且每次发出请求时，该数字都会增加1。

现在，在我的 JavaScript 中，我发出警告，确保每个元素的属性都设置得如此，并且从警报中我得到SEEMS正确。

但是，我查看了 Google Chrome 中的源代码，name属性非常不正确。我不知道问题是什么。这是我的 jQuery ，非常感谢任何帮助。

$(document).ready(function () {
    //this is the variable that will be added on to the end of the form attribute
    var counter = 1;



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

        $.get("registerform.html", function (data) {
            $(data).appendTo('#registrationfield').hide().fadeIn();
        }).complete(function () {


            //this variable sets my index so I do not effect the input elements already in the html.
            var formElementIndexToInsert = (counter * 10);


            //loop through all elements for a single ajax request
            for (var j = formElementIndexToInsert; j <= formElementIndexToInsert + 9; j++) {

                alert(j);

                if ((j % 10 == 3) || (j % 10 == 9)) {


                    var formName = $('.registerfield').eq(j).children('select').attr('name');
                    formName = (formName + counter);
                    alert(formName);
                    $('.registerfield').eq(j).children('select').attr('name', formName);

                } else {
                    var formName = $('.registerfield').eq(j).children('input').attr('name');
                    formName = (formName + counter);
                    alert(formName);
                    $('.registerfield').eq(formElementIndexToInsert).children('input').attr('name', formName);

                }



            }
            counter++;
        });

    });

});

Answer 1

我发现了自己的错误。在我的if-else语句中，else中的最后一行“formElementIndexToInsert”需要为'j'

警报消息显示我的逻辑是正确的但谷歌chrome的html输出查看器显示不同

1 个答案: