Adding placeholder to dynamically created elements by JS in IE8

Question

I have the below code to show a form for admin to create, suspend accounts

echo "<FORM name=\"admin\" action=\"\" enctype=\"multipart/form-data\">";
echo "<select onchange=\"ChangeType();\" name=\"action\" id=\"action\">";
echo "<option value=\"select\">--Select--</option>";
echo "<option value=\"create\">Create Account</option>";
echo "<option value=\"suspend\">Suspend Account</option>";
echo "</select><br><br>";
echo "<div id=\"data\">";
echo "</div>";
echo "<input type=\"button\" name=\"button\" onclick=\"AccountAction()\" value=\"Submit\">";
echo "<input type=\"reset\" id=\"reset\" value=\"Reset\" onclick=\"ResetForm();\">";
echo "</FORM>";

and the javascript to dynamically create elements within the DOM when the user calls ChangeType()

function ChangeType()
{
    var type = document.getElementById("action").options[document.getElementById("action").selectedIndex].value;
    if(type=="select")
    {
        document.getElementById('data').innerHTML = "";
    }
    if(type=="create")
    {
        document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
        document.getElementById('data').innerHTML += "<input id=\"password\" placeholder=\"Password\" type=\"password\" name=\"password\"><br><br>";
        return;
    }
    if(type=="suspend")
    {
        document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
        return;
    }
}

the code works fine however i cannot get the placeholder for the dynamically created username and password input types

i have already looked at Adding jQuery placeholders to dynamically created form elements

but it doesn't help as the placeholders only appear when i click within the textarea once and then click outside.

Answer 1

You have to do like this :

document.getElementById('data').setAttribute("placeholder", "placeholder value");

In your code :

function ChangeType() {
var type = document.getElementById("action").options[document.getElementById("action").selectedIndex].value;
if (type == "select") {
    document.getElementById('data').innerHTML = "";
    document.getElementById('data').setAttribute("placeholder", "placeholder value");
}
if (type == "create") {
    document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
    document.getElementById('data').innerHTML += "<input id=\"password\" placeholder=\"Password\" type=\"password\" name=\"password\"><br><br>";
    document.getElementById('data').setAttribute("placeholder", "placeholder value");
    return;
}
if (type == "suspend") {
    document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
    document.getElementById('data').setAttribute("placeholder", "placeholder value");
    return;
}}

Using Jquery (browser compatible solution) :

$("#data").attr("placeholder", "placeholder value");

Answer 2

Works for me:

HTML

<FORM name="admin" action="" enctype="multipart/form-data">
    <select onchange="ChangeType();" name="action" id="action">
    <option value="select">--Select--</option>
    <option value="create">Create Account</option>
    <option value="suspend">Suspend Account</option>
    </select><br><br>
    <div id="data"></div>
    <input type="button" name="button" onclick="AccountAction()" value="Submit">
    <input type="reset" id="reset" value="Reset" onclick="ResetForm();">
    <!--This button alerts all palceholder attributes for all input tags within the div-->
    <input type="button" name="button" onclick="checkPlaceHolder()" value="Check Placeholder Values">
</FORM>

Javascript

function AccountAction(){}
function ResetForm(){}

function ChangeType() {
    var type = document.getElementById("action").options[document.getElementById("action").selectedIndex].value;
    if(type=="select")
    {
        document.getElementById('data').innerHTML = "";
    }
    if(type=="create")
    {
        document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
        document.getElementById('data').innerHTML += "<input id=\"password\" placeholder=\"Password\" type=\"password\" name=\"password\"><br><br>";
        return;
    }
    if(type=="suspend")
    {
        document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
        return;
    }
}

function checkPlaceHolder() {
    $( '#data input' ).each(function(o) {
        alert('Placeholder : ' + $(this).attr('placeholder'));
    });
}

The function checkPlaceHolder alerts all the input tag placeholder attributes within the div tag. Hope this helps.