Question

I have the following dynamically created HTML block:

<form class="standard settingsPage" method="post" enctype="multipart/form-data" name="account" style="background-color: rgb(61, 80, 133);">
<h2>Add New Account</h2>
<p>
<label class="" disabled="true">E-mail address:</label>
<input id="accountEmailAddress" class="" type="text" value="" name="accountEmailAddress"/>
</p>
<p>
<label class="" for="accountEmailPassword">Password:</label>
<input id="accountEmailPassword" type="password" name="accountEmailPassword"/>
</p>
<p class="submit">
<input type="button" onclick="checkEmailSettings();" value="Send" name="submit"/>
</p>
<p>
<label>Mail Server:</label>
<input id="mail2server" type="text" name="mail2server"/>
</p>
<p>
<label>Mail Type:</label>
<select id="mail2type" name="mail2type">
</select>
</p>
<p>
<label>Mail Security:</label>
<select id="mail2security" name="mail2security">
</select>
</p>
<p>
<label>Mail Server Port:</label>
<input id="mail2port" type="text" name="mail2port"/>
</p>
<p>
<label>Mail Username:</label>
<input id="mail2username" type="text" name="mail2username"/>
</p>
<p class="submit">
<input id="mailsend" type="button" name="mailsend" onclick="checkEmailSettings();" value="Send"/>
</p>
</form>

Which is appended to an existing form.

However when I do $(‘#mail2server’).val() it returns blank, even if there is something in the box. If I do $(‘#mail2server’).attr(‘name’) it returns the name, so it definitely recognizes that the element exists. Any ideas why this would be failing?

Cheers,
Gazler.

EDIT

function checkEmailSettings()
{
    var emailAddress=$("#accountEmailAddress").val();
    var emailPassword=$("#accountEmailPassword").val();
    var datastring = "emailaddress="+emailAddress+"&emailpassword="+emailPassword;
    if (additionalInfo == 1)
    {
        var mailserver = $("#mail2server").val();
        var mailtype = $("#mail2type").val();
        var mailsecurity = $("#mail2security").val();
        var mailport = $("#mail2port").val();
        var mailusername = $("#mail2username").val();
        alert($("#mail2server").val());
        datastring += "&mailserver="+mailserver+"&mailtype="+mailtype+"&mailsecurity="+mailsecurity+"&mailport="&mailport+"&mailusername="+mailusername;
    }
    $('input[type=text]').attr('disabled', 'disabled');
    $('input[type=password]').attr('disabled', 'disabled');
    $('input[type=button]').attr('disabled', 'disabled');
    $.ajax({
        type: "GET",
        url: "checkemailsettings.php",
        data: datastring,
        async: true,
        cache: false,
        timeout:50000, 

        success: function(data){
        switch(parseInt(data))
        {
                //SNIPPED
        case 4:
         alert("More information needed.");
         if (additionalInfo == 0)
        {
         var string = addTextToForm("Mail Server","mail2server");
         string += addOptionsToForm("Mail Type","mail2type", new Array("IMAP", "POP3"));
         string += addOptionsToForm("Mail Security","mail2security", new Array("NOTLS", "TLS", "SSL"));
         string += addTextToForm("Mail Server Port","mail2port");
         string += addTextToForm("Mail Username","mail2username");
         string += addButtonToForm("Send","mailsend", "checkEmailSettings();");
         alert(string);
         $('form[name=account]').append(string);
         additionalInfo = 1;
        }
          break;
        }
        },
    });
}

    function addTextToForm(strLabel, strID, strVal)
    {
    if (!strVal) {return "<p><label>"+strLabel+":</label><input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" /></p>";}
        return "<p><label>"+strLabel+":</label><input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" value=\""+strVal+"\"/></p>";
    }
    function addButtonToForm(strLabel, strID, functionName)
    {
        return "<p class=\"submit\"><input id=\""+strID+"\" value=\""+strLabel+"\" onclick=\""+functionName+"\" type=\"button\" name=\""+strID+"\"/></p>";
    }

    function addOptionsToForm(strLabel, strID, optionsArr)
    {
        var returnstring="<p><label>"+strLabel+":</label><select id=\""+strID+"\" name=\""+strID+"\">";
        for (i=0; i<optionsArr.length; i++)
        {
            returnstring += "<option>"+optionsArr[i]+"</option>";
        }
        returnstring += "</select></p>";
        return returnstring;
    }

Answer 1

The “alert” call says $('#mailserver'), not $('#mail2server')