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 =“username”，elementLabel =“用户名”} Object {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迭代它们而不是试图创建另一个选择器。

jquery：获取一个表单的表单元素

1 个答案: