jquery val() failing on dynamically generated input

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 definately recognises 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

I created a sample page that dynamically added the code you had above and everything worked just fine. There must be something else going on, perhaps in the function that your submit button is calling?

Answer 2

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

Answer 3

I think it's good to add "return false;" at the end of the onclick attribute in the input buttons.