0

好的。我正在尝试从标签中提取文本并将占位符注入到 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>
4

1 回答 1

1

去过也做过。试试这个脚本...

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

于 2019-02-04T13:04:50.320 回答