JQuery: получить элементы формы только одной формы - PullRequest
Новая
       6

JQuery: получить элементы формы только одной формы

2 голосов
/ 15 апреля 2011

Дано две формы: 

 <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 = "Ввод формы теста"}
Object {elementType = "radio", elementName = "testformradiobutton", подробнее ...}
Object {elementType = "radio", elementName = "testformradiobutton", подробнее ...}
Object {elementType = "checkbox", elementName = "testformcheckbox", подробнее ...}
Object {elementType = "text", elementName = "username", elementLabel = "User Name"}
Object {elementType = "text", elementName = "userpass", elementLabel = "Password"}

1 Ответ

2 голосов
/ 15 апреля 2011

Эти изменения должны исправить ваши проблемы: 

//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, а не пытаетесь сделать другой селектор.

...