ok. I am trying to pull the text from the labels and inject placeholders into a pardot form. Also, have used the label to create an option for the select to display kinda like a placeholder. All goes swimmingly until I introduce checkboxes and radio buttons.
Any thoughts on a solution?
apologies for ugly html: this is what pardot spits out into an iframe Thanks in advance
<form accept-charset="UTF-8" method="post" action="http://resources.tdinternational.com/l/545402/2018-06-20/3k6cs" class="form" id="pardot-form">
<p class="form-field name first_name pd-text required ">
<label class="field-label" for="545402_38895pi_545402_38895">Full Name</label>
<input type="text" name="545402_38895pi_545402_38895" id="545402_38895pi_545402_38895" value="" class="text" size="30" maxlength="40" onchange="">
</p>
<div id="error_for_545402_38895pi_545402_38895" style="display:none"></div>
<p class="form-field industry industry pd-select required ">
<label class="field-label" for="545402_38899pi_545402_38899">Industry</label>
<select name="545402_38899pi_545402_38899" id="545402_38899pi_545402_38899" class="select" onchange=""><option value="" selected="selected"></option>
<option value="307917">technology</option>
<option value="307919">compliance</option>
<option value="307921">training</option>
<option value="307923">observation</option>
</select>
</p>
<p class="form-field opted_out pd-checkbox required ">
<label class="field-label" for="545402_40627pi_545402_40627">Lorem Ipsum dolor</label>
<span class="value">
<span>
<input type="checkbox" name="545402_40627pi_545402_40627_345413" id="545402_40627pi_545402_40627_345413" value="345413" onchange="">
<label class="inline" for="545402_40627pi_545402_40627_345413">Lorem Ipsum</label>
</span>
</span>
</p>
<div id="error_for_545402_40627pi_545402_40627" style="display:none"></div>
<p class="form-field dropdown employees pd-radio required ">
<label class="field-label" for="545402_38901pi_545402_38901">Employees</label>
<span class="value">
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307911_307911" value="307911" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307911_307911">5-10</label>
</span>
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307913_307913" value="307913" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307913_307913">11-25</label>
</span>
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307915_307915" value="307915" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307915_307915">26-50</label>
</span>
</span>
</p>
<div id="error_for_545402_38901pi_545402_38901" style="display:none"></div>
</form>
<script>
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 += " *");
var nextElement = label.nextElementSibling;
if (nextElement.tagName == 'SELECT') {
nextElement.options[0].text = text;
}
else {
nextElement.setAttribute("placeholder", text);
}
}
</script>
Been there, done that. Try this script...
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form accept-charset="UTF-8" method="post" action="http://resources.tdinternational.com/l/545402/2018-06-20/3k6cs" class="form" id="pardot-form">
<p class="form-field name first_name pd-text required ">
<label class="field-label" for="545402_38895pi_545402_38895">Full Name</label>
<input type="text" name="545402_38895pi_545402_38895" id="545402_38895pi_545402_38895" value="" class="text" size="30" maxlength="40" onchange="">
</p>
<div id="error_for_545402_38895pi_545402_38895" style="display:none"></div>
<p class="form-field industry industry pd-select required ">
<label class="field-label" for="545402_38899pi_545402_38899">Industry</label>
<select name="545402_38899pi_545402_38899" id="545402_38899pi_545402_38899" class="select" onchange=""><option value="" selected="selected"></option>
<option value="307917">technology</option>
<option value="307919">compliance</option>
<option value="307921">training</option>
<option value="307923">observation</option>
</select>
</p>
<p class="form-field opted_out pd-checkbox required ">
<label class="field-label" for="545402_40627pi_545402_40627">Lorem Ipsum dolor</label>
<span class="value">
<span>
<input type="checkbox" name="545402_40627pi_545402_40627_345413" id="545402_40627pi_545402_40627_345413" value="345413" onchange="">
<label class="inline" for="545402_40627pi_545402_40627_345413">Lorem Ipsum</label>
</span>
</span>
</p>
<div id="error_for_545402_40627pi_545402_40627" style="display:none"></div>
<p class="form-field dropdown employees pd-radio required ">
<label class="field-label" for="545402_38901pi_545402_38901">Employees</label>
<span class="value">
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307911_307911" value="307911" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307911_307911">5-10</label>
</span>
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307913_307913" value="307913" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307913_307913">11-25</label>
</span>
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307915_307915" value="307915" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307915_307915">26-50</label>
</span>
</span>
</p>
<div id="error_for_545402_38901pi_545402_38901" style="display:none"></div>
</form>
<script>
var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label");
var i = labels.length;
while (i--) {
var label = labels.item(i);
var text = label.textContent;
label.parentNode.classList.contains("required") && (text += " ");
var nextElement = label.nextElementSibling;
if(nextElement){
if (nextElement.tagName == 'SELECT') {
nextElement.options[0].text = text;
} else {
nextElement.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);
});
</script>
</body>
</html>