jquery：获取仅一种表单的表单元素

Question

给定两种形式：

 <div id="loginModal" title="Log In">

    <!--user login form-->
<form name="loginForm" id="loginForm">

        <p class="formLabel"><label for="username" id="usernameLabel" labelText="User Name">User Name</label></p>
        <p class="formInput"><input type="text" size="20" id="username" name="username"></p>
        <p class="formLabel"><label for="password" id="userpassLabel" labelText="Password">Password</label></p>
        <p class="formInput"><input type="text" size="20" id="userpass" name="userpass"></p>
        <p class="formBtn"><a href="javascript:void(0);" class="submitBtn">Submit</a><a  href="javascript:void(0);" class="cancelBtn">Cancel</a></p>

    </form>

</div>


    <form name="testForm" id="testForm">

        <p class="formLabel"><label for="testforminput" id="testforminputLabel" labelText="Test Form Input">Test Form Input</label></p>
        <p class="formInput"><input type="text" size="20" id="testforminput" name="testforminput"></p>
        <p class="formLabel"><label for="testformradiobutton" id="testformradiobuttonLabel" labelText="Test Form Radio Button">Test Form Radio Button</label></p>
        <p class="formRadio"><input type="radio" id="testformradiobutton" name="testformradiobutton" value="radiobutton1">&nbsp;Button 1&nbsp;<input type="radio" id="testformradiobutton" name="testformradiobutton" value="radiobutton2">&nbsp;Button 2&nbsp;</p>
        <p class="formLabel"><label for="testformcheckbox" id="testformcheckboxLabel" labelText="Test Form Checkbox">Test Form Checkbox</label></p>
        <p class="formRadio"><input type="checkbox" id="testformcheckbox" name="testformcheckbox" value="checkbox1">&nbsp;Checkbox 1&nbsp;</p>
        <p class="formBtn"><a href="javascript:void(0);" class="submitBtn">Submit</a></p>

    </form>

并且我将正确的形式传递给函数（通过控制台检查），为什么我在下面的代码中获取两种形式的元素？

function getFormData(thisForm) { 

    //declare two objects
    var formObj = new Object;
    var tempObj = new Object;

    //get the form object
    var thisForm = $("#" + thisForm);

    //declare an integer to iterate with
    var x=0; 

    //loop through the form object getting all element objects
    var formToGet = $(thisForm);
    var thisFormElements = $(thisForm + " input").map(function(i, e) {


        x++;

        //place element objects into the temp object
        tempObj['elementType'] = e.type;
        tempObj['elementName'] = e.name;
        tempObj['elementValue'] = $(e).val();

        //get the element label
        var labelText = $("#" + e.name + "Label").attr("labelText");
        tempObj['elementLabel'] = labelText;

        //place temp object into the form object
        formObj[x] = tempObj;

        //clear out tempObj
        tempObj = {};
    });


    return formObj;

}

当我为测试表单输出 formObj 时，我得到了这个，对于登录表单则相反：

Object { elementType="text", elementName="testforminput", elementLabel="Test Form Input"}
对象 { elementType="radio", elementName="testformradiobutton", 更多...}
对象 { elementType="radio", elementName="testformradiobutton", 更多...}
对象 { elementType="checkbox", elementName="testformcheckbox", 更多...}
对象 { elementType="text", elementName="用户名", elementLabel="用户名"}
对象 { elementType="text", elementName="userpass", elementLabel="Password"}

Answer 1

这些更改应该可以解决您的问题：

//get the form object
var thisForm = $("#" + thisForm);

//declare an integer to iterate with
var x=0; 
// no need to wrap thisForm as a jQuery object again here the way you have
// in your original code
var thisFormElements = thisForm.find("input").map(function(i, e) {
    //...
}
//...

请注意，关键是您已经在方法的前面将 thisForm 设置为 jQuery 对象，因此要获取其下的输入标签，您可以使用 find ，然后使用 map 来迭代它们，而不是使用尝试制作另一个选择器。