好。我正在尝试从标签中提取文本并将占位符注入pardot形式。同样,已使用标签为选择创建一个选项,以使其像占位符一样显示。一切顺利,直到我介绍了复选框和单选按钮。
对解决方案有什么想法吗?
为丑陋的HTML致歉:这是Pardot吐出到iframe中的原因 预先感谢
<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>
答案 0 :(得分:0)
在那里,做到了。试试这个脚本...
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://jamesallardice.github.io/Placeholders.js/assets/js/placeholders.min.js"></script>
</body>
</html>