I have a script that applies the label text as a placeholder attribute on the input, however I have one select dropdown field where i need the first option, which is currently just blank, to contain the label name. In this case region
I have thought about using another label.querySelectorAll("option"); But i don't know how to just get the top one.
Current JS:
var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
var label = labels.item(i);
var text = label.textContent;
label.parentNode.classList.contains("required") && (text += " *");
label.nextElementSibling.setAttribute("placeholder", text);
label.parentNode.removeChild(label);
}
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i){
el.parentNode.removeChild(el);
});
The HTML
<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
<p class="form-field first_name pd-text required ">
<input type="text" name="25492_61230pi_25492_61230" id="25492_61230pi_25492_61230" value="" class="text" size="30" maxlength="32" onchange="" placeholder="First Name *">
</p>
<div id="error_for_25492_61230pi_25492_61230" style="display:none"></div>
<p class="form-field last_name pd-text required ">
<input type="text" name="25492_61232pi_25492_61232" id="25492_61232pi_25492_61232" value="" class="text" size="30" maxlength="32" onchange="" placeholder="Last Name *">
</p>
<div id="error_for_25492_61232pi_25492_61232" style="display:none"></div>
<p class="form-field company pd-text required ">
<input type="text" name="25492_61234pi_25492_61234" id="25492_61234pi_25492_61234" value="" class="text" size="30" maxlength="100" onchange="" placeholder="Company *">
</p>
<div id="error_for_25492_61234pi_25492_61234" style="display:none"></div>
<p class="form-field Mobile pd-text ">
<input type="text" name="25492_61236pi_25492_61236" id="25492_61236pi_25492_61236" value="" class="text" size="30" maxlength="65535" onchange="" placeholder="Phone">
</p>
<div id="error_for_25492_61236pi_25492_61236" style="display:none"></div>
<p class="form-field email pd-text required ">
<input type="text" name="25492_61238pi_25492_61238" id="25492_61238pi_25492_61238" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61238, 12536766);" placeholder="Email *">
</p>
<div id="error_for_25492_61238pi_25492_61238" style="display:none"></div>
<p class="form-field Territory_copy pd-select required ">
<select name="25492_61240pi_25492_61240" id="25492_61240pi_25492_61240" class="select" onchange="" placeholder="Region *">
<option value="" selected="selected"></option>
<option value="465100">North America</option>
<option value="465102">Latin America</option>
<option value="465104">Europe</option>
<option value="465106">Australasia</option>
<option value="465108">ASPAC - South East Asia</option>
<option value="465110">ASPAC - China</option>
<option value="465112">Africa - West Africa</option>
<option value="465114">Africa - North Africa & Middle East</option>
<option value="465116">Africa - Non Regional</option>
<option value="465118">Africa - Southern Africa</option>
</select>
</p>
<div id="error_for_25492_61240pi_25492_61240" style="display:none"></div>
<p class="form-field comments pd-textarea required ">
<textarea name="25492_61242pi_25492_61242" id="25492_61242pi_25492_61242" onchange="" cols="40" rows="10" class="standard" placeholder="Message *"></textarea>
</p>
<div id="error_for_25492_61242pi_25492_61242" style="display:none"></div>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
<input type="text" name="pi_extra_field" id="pi_extra_field" placeholder="Comments">
</p>
<input name="_utf8" type="hidden" value="☃">
<p class="submit">
<input type="submit" accesskey="s" value="Send Message">
</p>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="">
</form>
