Can't get right value for element id in jquery

Question

I need to get the value of the id attribute of an element.

javascript:

function checkPhoneZip() {
$.get(encodeURI("checkPhoneZip.aspx?mobilePhone=" + $("#mobilePhone").val() + "&postalCode=" + $("#postalCode").val()), function (data) {
    $("#ajaxResults").html(data);
})
    .done(function () {

        var divs = $("#ajaxResults").find('div');
        if (divs.length == 1) {
            if ($("#ajaxResults").html() == "<div>dbEmpty<div>") {
                $("#emailGetError").text("Cannot find an email address for the information entered");
            }
            else {
                $("#user").val($("#ajaxResults").text())
                $("#user").focus();
                $("#emailRecovery").slideUp();
            }                
        }
        else {
            var options = "";
            for (i = 0; 1 < divs.length; i++) {
                options += "<option value='" + $(divs[i]).attr("id") + "'>" + $(divs[i]).text() + "</option>";
            }
            $("#companies").html("<option selected>Select which business you are</option>" + options);
            $("#companies").slideDown('fast');
        }
    })
    .fail(function () { alert("Failed to contact Database. Please try again in a few seconds"); })
;

}

html

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="passwordReset.aspx.cs" Inherits="passwordReset" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
    <script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet' type='text/css'/>
    <style type="text/css">
        .link{text-decoration:underline;cursor:pointer}
    </style> 
</head>
<body>
    <form id="form1" runat="server">
        <div id="getCode" runat="server">
            <div>Enter the email address associated with your account and a verification code will be texted to the mobile phone number you used to sign up.</div>
            <div>
                <input id="user" runat="server" type="email" />
                <div id="userError"></div>
            </div>
            <div>
                <button type="button" id="getCodeButton">GET CODE</button>
            </div>
            <div class="link" id="forgotEmail">Forgot email address?</div>
        </div>
        <div id="emailRecovery" style="display:none">
            <div>Enter the mobile phone number you registered with</div>
            <div><input type="tel" id="mobilePhone" /></div>
            <div>Enter the postal code you registered with</div>
            <div><input type="text" id="postalCode" /></div>
            <div>
                <button type="button" id="getEmailButton">GET EMAIL</button>
            </div>
            <div id="emailGetError"></div>
            <div id="chooseCompany" style="display:none">
                <select id="companies"></select>
            </div>
        </div>
        <div id="code" runat="server" style="display:none">
            <div>A text message with a verification code has been sent to <span id="msgPhone"></span>.<br />Enter the code you received below.</div>
            <div><input type="text" id="codeInput" /></div>
            <div id="codeInputError"></div>
            <div>
                <button type="button" id="sendCodeButton">SEND CODE</button>
            </div>
        </div>
        <div id="changePass" style="display:none">
            <div>Enter new password</div>
            <div><input type="text" id="pwInput1" /></div>
            <div id="pwInput1Error"></div>
            <div>Enter new password again</div>
            <div><input type="text" id="pwInput2" /></div>
            <div id="pwInput2Error"></div>
            <div>
                <button type="button" id="changePassButton">UPDATE</button>
            </div>
        </div>
        <div id ="ajaxResults" style="display:none"></div>
    </form>
    <script type="text/javascript" src="passwordReset.js"></script>
</body>
</html>

This part, $(divs[i]).attr("id"), comes back as undefined in the debugger. I'm trying to get the value of the id attribute of each div inside of #ajaxResults, and each div does have an id attribute. Something wrong with my syntax or understanding.

Answer 1

You're biggest problem is your for loop is checking 1 < divs.length instead of i < divs.length .

Use this instead:

for (i = 0; i < divs.length; i++) {
    options += "<option value='" + $(divs[i]).attr("id") + "'>" + $(divs[i]).text() + "</option>";
}

Can't get right value for element id in jquery

Question

1 answers

solution1
1 2016-01-20 20:49:10

Can't get right value for element id in jquery

Question

1 answers

solution1 1 2016-01-20 20:49:10

solution1
1 2016-01-20 20:49:10