简体   繁体   English

从Label获取Pardot占位符

[英]Getting Pardot Placeholders from Label

ok. 好。 I am trying to pull the text from the labels and inject placeholders into a pardot form. 我正在尝试从标签中提取文本并将占位符注入pardot形式。 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 为丑陋的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>

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM