jquery: get form elements of just one form

Given two forms:

 <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="testFo开发者_Go百科rm" 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>

and that I am passing the correct form to a function (checked via the console) why am I getting the elements for both forms in the code below?

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;

}

when I output formObj for the test form I get this, reversed for the login form:

Object { elementType="text", elementName="testforminput", elementLabel="Test Form Input"}

Object { elementType="radio", elementName="testformradiobutton", more...}

Object { elementType="radio", elementName="testformradiobutton", more...}

Object { elementType="checkbox", elementName="testformcheckbox", more...}

Object { elementType="text", elementName="username", elementLabel="User Name"}

Object { elementType="text", elementName="userpass", elementLabel="Password"}

These changes should fix your issues:

//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) {
    //...
}
//...

Note the key is that you've already set thisForm to be a jQuery object earlier in the method, so to get the input tags under it, you use find and then iterate over them using map as opposed to trying to make another selector.