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>
Related
I need to pass multiple filled values to a hidden form field using javascript/jquery. The fields must have a value or don't pass. I can pass the regular text fields with no problem but the checkbox and radio fields always seem to get me. Javascript is not my expertise so I'm willing to learn. Thanks in advance.
The values we are wanting to capture are:
Questions/comments
Product Interests (this can be multiple values)
Industry
Number of Employees
Multiple Locations if "true".
Each item will be separated by a pipe character.
$(document).ready(function() {
$(function(){ $('#13005,#14604').on("keyup",function(){
commentField = $("#13005").val(); + " || "
products = $("p.Custom_LR_FormServices input:checkbox:checked").map(function(){return $(this).val()}).get();
industryField = $("p.RAQFormIndustry input:checkbox:checked").map(function(){return $(this).val()}).get();
numberEmployees = $;
multipleLocations = $;
hiddenField = commentField + " || " + products + " || " + industryField + "||" + numberEmployees + " || " + multipleLocations;
$("#14604").val(hiddenField);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="email pd-text required ">
<label class="field-label" for="12993">Email</label>
<input type="text" name="12993" id="12993" value="" class="text" size="30" maxlength="255" onfocus="" />
</p>
<p class="company pd-text required ">
<label class="field-label" for="12995">Business Name</label>
<input type="text" name="12995" id="12995" value="" class="text" size="30" maxlength="255" onchange="" onfocus="" />
</p>
<p class="comments pd-textarea ">
<label class="field-label" for="13005">Comments/Questions</label>
<textarea name="13005" id="13005" onchange="" cols="40" rows="10" class="standard"></textarea>
</p>
<p class="fRAQFormIndustry pd-radio required ">
<label class="field-label" for="13039">Industry</label>
<span class="value"><span class="" style="">
<input type="radio" name="13039[]" id="147771_47771" value="47771" onchange="" />
<label class="inline" for="147771_47771">Auto Repair / Dealership</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147773_47773" value="47773" onchange="" />
<label class="inline" for="147773_47773">Cleanroom</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147775_47775" value="47775" onchange="" />
<label class="inline" for="147775_47775">Food Processing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147777_47777" value="47777" onchange="" />
<label class="inline" for="147777_47777">Healthcare</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147779_47779" value="47779" onchange="" />
<label class="inline" for="147779_47779">Manufacturing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147781_47781" value="47781" onchange="" />
<label class="inline" for="147781_47781">Restaurant / Bar</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147783_47783" value="47783" onchange="" />
<label class="inline" for="147783_47783">Retail</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147785_47785" value="47785" onchange="" />
<label class="inline" for="147785_47785">Other</label>
</span></span>
</p>
<p class="fCustom_LR_FormServices pd-checkbox required ">
<label class="field-label" for="13007">Products</label>
<span class="value"><span>
<input type="checkbox" name="13007_47921" id="13007_47921" value="47921" onchange="" />
<label class="inline" for="13007_47921">Uniforms or Apparel</label>
</span><span>
<input type="checkbox" name="13007_47923" id="13007_47923" value="47923" onchange="" />
<label class="inline" for="13007_47923">Mats, Mops or Towels</label>
</span><span>
<input type="checkbox" name="13007_47925" id="13007_47925" value="47925" onchange="" />
<label class="inline" for="13007_47925">First Aid or Safety Products</label>
</span><span>
<input type="checkbox" name="13007_47927" id="13007_47927" value="47927" onchange="" />
<label class="inline" for="13007_47927">Restroom Supplies or Hand Sanitizer</label>
</span><span>
<input type="checkbox" name="13007_47929" id="13007_47929" value="47929" onchange="" />
<label class="inline" for="13007_47929">Cleaning Chemicals</label>
</span></span>
</p>
<p class="fCustom_LR_FormEmployees pd-radio required ">
<label class="field-label" for="13009">Number of Employees</label>
<span class="value"><span class="" style="">
<input type="radio" name="13009[]" id="13009_47765_47765" value="47765" onchange="" />
<label class="inline" for="13009_47765_47765">1-99</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47767_47767" value="47767" onchange="" />
<label class="inline" for="13009_47767_47767">100-249</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47769_47769" value="47769" onchange="" />
<label class="inline" for="13009_47769_47769">250+</label>
</span></span>
</p>
<p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio ">
<label class="field-label" for="13011">We Have Multiple Locations</label>
<span class="value"><span class="" style="">
<input type="radio" name="13011[]" id="13011_47787_47787" value="47787" onchange="" />
<label class="inline" for="13011_47787_47787">Yes</label>
</span><span class="" style="">
<input type="radio" name="13011[]" id="13011_47789_47789" value="47789" onchange="" />
<label class="inline" for="13011_47789_47789">No</label>
</span></span>
</p>
<p class="form-field Saved_Items pd-hidden hidden ">
<label>Saved Item Hidden</label>
<input type="text" name="14604" id="14604" value="" />
<span id="error_for_14604" style="display:none"></span> </p>
**
Here's one way. You can just put a change event listener on the form tag - any changes to the form will trigger the script. The string that gets written into the hidden field is JSON and it can be easily decoded on the back end.
$('#theForm').on('change', function() {
let vals = [];
let prod = [], ind = [];
$(".fCustom_LR_FormServices input:checked").each(function(){ prod.push(getTextFromElID($(this).attr('id')))})
vals.push({'commentField': $("#13005").val() || ''})
vals.push({'products': prod || []})
vals.push({'industryField': getTextFromElID($(".fRAQFormIndustry input:checked").attr('id')) || ''})
vals.push({'numberEmployees': getTextFromElID($(".fCustom_LR_FormEmployees input:checked").attr('id')) || ''})
vals.push({'multipleLocations': getTextFromElID($(".Custom_LR_FormMulitLocation input:checked").attr('id')) || ''})
$("#14604").val(JSON.stringify(vals));
})
function getTextFromElID(id) {
return $(`[for=${id}]`).text().trim();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='theForm'>
<p class="email pd-text required ">
<label class="field-label" for="12993">Email</label>
<input type="text" name="12993" id="12993" value="" class="text" size="30" maxlength="255" onfocus="" />
</p>
<p class="company pd-text required ">
<label class="field-label" for="12995">Business Name</label>
<input type="text" name="12995" id="12995" value="" class="text" size="30" maxlength="255" onchange="" onfocus="" />
</p>
<p class="comments pd-textarea ">
<label class="field-label" for="13005">Comments/Questions</label>
<textarea name="13005" id="13005" cols="40" rows="10" class="standard saver"></textarea>
</p>
<p class="fRAQFormIndustry pd-radio required ">
<label class="field-label" for="13039">Industry</label>
<span class="value"><span class="" style="">
<input type="radio" name="13039[]" id="147771_47771" value="47771" />
<label class="inline" for="147771_47771">Auto Repair / Dealership</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147773_47773" value="47773" />
<label class="inline" for="147773_47773">Cleanroom</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147775_47775" value="47775" />
<label class="inline" for="147775_47775">Food Processing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147777_47777" value="47777" />
<label class="inline" for="147777_47777">Healthcare</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147779_47779" value="47779" />
<label class="inline" for="147779_47779">Manufacturing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147781_47781" value="47781" />
<label class="inline" for="147781_47781">Restaurant / Bar</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147783_47783" value="47783" />
<label class="inline" for="147783_47783">Retail</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147785_47785" value="47785" />
<label class="inline" for="147785_47785">Other</label>
</span></span>
</p>
<p class="fCustom_LR_FormServices pd-checkbox required ">
<label class="field-label" for="13007">Products</label>
<span class="value"><span>
<input type="checkbox" name="13007_47921" id="13007_47921" value="47921" />
<label class="inline" for="13007_47921">Uniforms or Apparel</label>
</span><span>
<input type="checkbox" name="13007_47923" id="13007_47923" value="47923" />
<label class="inline" for="13007_47923">Mats, Mops or Towels</label>
</span><span>
<input type="checkbox" name="13007_47925" id="13007_47925" value="47925" />
<label class="inline" for="13007_47925">First Aid or Safety Products</label>
</span><span>
<input type="checkbox" name="13007_47927" id="13007_47927" value="47927" />
<label class="inline" for="13007_47927">Restroom Supplies or Hand Sanitizer</label>
</span><span>
<input type="checkbox" name="13007_47929" id="13007_47929" value="47929" />
<label class="inline" for="13007_47929">Cleaning Chemicals</label>
</span></span>
</p>
<p class="fCustom_LR_FormEmployees pd-radio required ">
<label class="field-label" for="13009">Number of Employees</label>
<span class="value"><span class="" style="">
<input type="radio" name="13009[]" id="13009_47765_47765" value="47765" />
<label class="inline" for="13009_47765_47765">1-99</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47767_47767" value="47767" />
<label class="inline" for="13009_47767_47767">100-249</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47769_47769" value="47769" />
<label class="inline" for="13009_47769_47769">250+</label>
</span></span>
</p>
<p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio ">
<label class="field-label" for="13011">We Have Multiple Locations</label>
<span class="value"><span class="" style="">
<input type="radio" name="13011[]" id="13011_47787_47787" value="47787" />
<label class="inline" for="13011_47787_47787">Yes</label>
</span><span class="" style="">
<input type="radio" name="13011[]" id="13011_47789_47789" value="47789" />
<label class="inline" for="13011_47789_47789">No</label>
</span></span>
</p>
<p class="form-field Saved_Items pd-hidden hidden ">
<label>Saved Item Hidden</label>
<input type="text" name="14604" id="14604" value="" style='width:100%;' />
<span id="error_for_14604" style="display:none"></span> </p>
</form>
I have a multi-step form (form wizard) with a bunch of questions (various inputs depending on question being asked). All questions sit in one of these <div class="form-group" data-question-number="1"></div> (where the question number changes).
I keep track of what questions have been answered in an array called questionSequence. At the end of the form, I would like to know what input has been filled for each question.
I am looping through the questions that I know were answered, but then for each, is there an easy way to know what inputs were filled? Some questions are text inputs, others are checkboxes, others are radios, others are selects (drop downs) ... etc.
for (var i = 1; i < questionSequence.length; i++) {
let questionId = questionSequence[i];
let filledInInputs = getFilledInInputs(questionId);
}
Basically, I am not sure what my getFilledInInputs(questionId) would look like.
const getReadItemsForQuestion = questionId => {
// questionId is a string e.g. "1"
let questionParentDiv = getQuestionBlockAsJqueryObject(questionId);
// now that I have the parent div, is there an easy way to get all
// filled in inputs no matter the input type?
}
UPDATE
I was asked to provide a runnable snippet, so here is a Codepen. I've simplified it to the core of the problem, I only want to console.log() the filled in inputs.
let questionSequence = ["1", "3", "4", "16"];
$(".process-btn").click(function() {
for (var i = 0; i < questionSequence.length; i++) {
let questionId = questionSequence[i];
let questionParentDiv = getQuestionBlockAsJqueryObject(questionId);
let questionInputs = questionParentDiv.find(":input");
let filledInQuestionInputs = questionInputs.filter(function() {
let thisVal = $(this);
let inputValue = thisVal.val();
return $.trim(inputValue).length !== 0
});
// filledInQuestionInputs should be an object with only be the filled in inputs
console.log(filledInQuestionInputs);
}
});
const getQuestionBlockAsJqueryObject = activeQuestionId => {
return $(`[data-question-number='${activeQuestionId}']`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" data-question-number="1" data-read-label="Service type">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
What service type are you?
</h1>
</legend>
<select class="select" data-next-question="2" data-val="true" data-val-number="The field Setting must be a number." data-val-required="The Setting field is required." id="SettingId" name="SettingId" required="true">
<option value="1">999</option>
<option value="2">111</option>
<option value="3">Out of Hours (OOH)</option>
<option value="4">Reception Point (RP)</option>
<option value="6">Dental service</option>
</select>
</fieldset>
</div>
<div class="form-group" data-question-number="3" data-read-label="Type of enquiry">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
What is the nature of your enquiry?
</h1>
</legend>
<div class="radios">
<div class="radios__item">
<input class="radios__input" data-next-question="5" data-val="true" data-val-required="The NatureOfEnquiry field is required." id="RequestForChange" name="NatureOfEnquiry" type="radio" value="RequestForChange">
<label class="label radios__label" for="RequestForChange">A request for change</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="5" id="SharedLearning" name="NatureOfEnquiry" type="radio" value="SharedLearning" checked>
<label class="label radios__label" for="SharedLearning">A submission for shared learning</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="5" id="Information" name="NatureOfEnquiry" type="radio" value="Information">
<label class="label radios__label" for="Information">Requesting further information</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group" data-question-number="4" data-read-label="Is Regulation 28">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
Does the enquiry relate to a Regulation 28?
</h1>
</legend>
<div class="radios">
<div class="radios__item">
<input class="radios__input" data-next-question="32" id="regulation-1" name="IsRegulationTwentyEight" type="radio" value="True">
<label class="label radios__label" for="regulation-1">Yes</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="32" id="regulation-2" name="IsRegulationTwentyEight" checked type="radio" value="False">
<label class="label radios__label" for="regulation-2">No</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group" data-question-number="16" data-read-label="Enquiry relates to">
<fieldset class="fieldset" aria-describedby="area-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
Does your enquiry relate to any of the following?
</h1>
</legend>
<div class="checkboxes">
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-1" name="SiteSections[]" type="checkbox" value="1" data-next-question="18">
<label class="label checkboxes__label" for="site-section-1">
Care Advice
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-2" name="SiteSections[]" type="checkbox" value="2" data-next-question="18">
<label class="label checkboxes__label" for="site-section-2">
Disposition
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-3" name="SiteSections[]" type="checkbox" value="3" data-next-question="18">
<label class="label checkboxes__label" for="site-section-3">
Pathway
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-4" name="SiteSections[]" type="checkbox" value="4" data-next-question="18">
<label class="label checkboxes__label" for="site-section-4">
Question
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" checked id="site-section-5" name="SiteSections[]" type="checkbox" value="5" data-further-info="true">
<label class="label checkboxes__label" for="site-section-5">
Other
</label>
</div>
</div>
</fieldset>
<fieldset class="fieldset fieldset--last" aria-describedby="area-hint">
<label class="label" for="other-section">
Can you provide further details?
</label><br />
<textarea class="textarea js-character-count" cols="20" data-char-limit="200" data-next-question="18" id="other-section" name="OtherSection" rows="5">Some lorem ipsum</textarea>
</fieldset>
</div>
<button class="process-btn">Process</button>
Have a look at this
The serialize shows all filled items on name
The $(':input').map(function() { if (this.name) return this.name; }).get() gets all names and then the uniqueItems = [...new Set(names)] dedups them
let questionSequence = ["1", "3", "4", "16"];
$("#myForm").on("submit", function(e) {
e.preventDefault();
const inputFilled = $(this).serialize().split("&")
const nofInputFilled = inputFilled.length;
let names = $(':input').map(function() { if (this.name) return this.name; }).get();
let uniqueItems = [...new Set(names)]
console.log(nofInputFilled,inputFilled)
console.log(uniqueItems,uniqueItems.length)
for (var i = 0; i < questionSequence.length; i++) {
let questionId = questionSequence[i];
let questionParentDiv = getQuestionBlockAsJqueryObject(questionId);
let questionInputs = questionParentDiv.find(":input");
let filledInQuestionInputs = questionInputs.filter(function() {
let thisVal = $(this);
let inputValue = thisVal.val();
return $.trim(inputValue).length !== 0
});
// filledInQuestionInputs should be an object with only be the filled in inputs
// console.log(filledInQuestionInputs);
}
});
const getQuestionBlockAsJqueryObject = activeQuestionId => {
return $(`[data-question-number='${activeQuestionId}']`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="form-group" data-question-number="1" data-read-label="Service type">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
What service type are you?
</h1>
</legend>
<select class="select" data-next-question="2" data-val="true" data-val-number="The field Setting must be a number." data-val-required="The Setting field is required." id="SettingId" name="SettingId" required="true">
<option value="1">999</option>
<option value="2">111</option>
<option value="3">Out of Hours (OOH)</option>
<option value="4">Reception Point (RP)</option>
<option value="6">Dental service</option>
</select>
</fieldset>
</div>
<div class="form-group" data-question-number="3" data-read-label="Type of enquiry">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
What is the nature of your enquiry?
</h1>
</legend>
<div class="radios">
<div class="radios__item">
<input class="radios__input" data-next-question="5" data-val="true" data-val-required="The NatureOfEnquiry field is required." id="RequestForChange" name="NatureOfEnquiry" type="radio" value="RequestForChange">
<label class="label radios__label" for="RequestForChange">A request for change</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="5" id="SharedLearning" name="NatureOfEnquiry" type="radio" value="SharedLearning" checked>
<label class="label radios__label" for="SharedLearning">A submission for shared learning</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="5" id="Information" name="NatureOfEnquiry" type="radio" value="Information">
<label class="label radios__label" for="Information">Requesting further information</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group" data-question-number="4" data-read-label="Is Regulation 28">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
Does the enquiry relate to a Regulation 28?
</h1>
</legend>
<div class="radios">
<div class="radios__item">
<input class="radios__input" data-next-question="32" id="regulation-1" name="IsRegulationTwentyEight" type="radio" value="True">
<label class="label radios__label" for="regulation-1">Yes</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="32" id="regulation-2" name="IsRegulationTwentyEight" checked type="radio" value="False">
<label class="label radios__label" for="regulation-2">No</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group" data-question-number="16" data-read-label="Enquiry relates to">
<fieldset class="fieldset" aria-describedby="area-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
Does your enquiry relate to any of the following?
</h1>
</legend>
<div class="checkboxes">
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-1" name="SiteSections[]" type="checkbox" value="1" data-next-question="18">
<label class="label checkboxes__label" for="site-section-1">
Care Advice
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-2" name="SiteSections[]" type="checkbox" value="2" data-next-question="18">
<label class="label checkboxes__label" for="site-section-2">
Disposition
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-3" name="SiteSections[]" type="checkbox" value="3" data-next-question="18">
<label class="label checkboxes__label" for="site-section-3">
Pathway
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-4" name="SiteSections[]" type="checkbox" value="4" data-next-question="18">
<label class="label checkboxes__label" for="site-section-4">
Question
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" checked id="site-section-5" name="SiteSections[]" type="checkbox" value="5" data-further-info="true">
<label class="label checkboxes__label" for="site-section-5">
Other
</label>
</div>
</div>
</fieldset>
<fieldset class="fieldset fieldset--last" aria-describedby="area-hint">
<label class="label" for="other-section">
Can you provide further details?
</label><br />
<textarea class="textarea js-character-count" cols="20" data-char-limit="200" data-next-question="18" id="other-section" name="OtherSection" rows="5">Some lorem ipsum</textarea>
</fieldset>
</div>
<button type="submit" class="process-btn">Process</button>
</form>
i want to make table with label and value pair, suppose i have something like this <label>i can </label> and value like this <input type="text" value="why not" /> my desired result
{"i can" : " why not "}
here is my sample element with code snippet
var result = [];
$('div label').each(function(){
var $this = $(this);
var label = $this.text();
//console.log(label);
value = $this.siblings().attr('value');
//console.log(value);
result.push({label:label,value:value});
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
<div class="form-group">
<label for="text-1483332101835-preview" class="fb-text-label">Mobile Number : </label>
<input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>
<div class="form-group">
<label for="textarea" class="fb-textarea-label" >Comments : </label>
<textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
very bad service
</textarea>
</div>
<div class="form-group">
<label for="select" class="fb-select-label">Select Your Locality: </label>
<select type="select" class="form-control" name="locality" id="locality">
<option value="vrpura">V.R Pura</option><option selected="true" value="bel">B.E.L</option>
<option value="jala">Jalahalli</option>
</select>
</div>
<div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
<input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
<label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery: </label>
</div>
<div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
<label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item : </label>
<div class="checkbox-group">
<input value="jamoon" type="checkbox" class="checkbox-group" name="" id="checkbox-group-1483332396337-preview-0" checked="">
<label for="checkbox-group-1483332396337-preview-0">Jamoon</label><br>
<input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" selected="">
<label for="checkbox-group-1483332396337-preview-1">samosa</label><br>
<input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" selected="">
<label for="checkbox-group-1483332396337-preview-2">beedi</label><br>
</div>
</div>
</form>
Please note for check group i want all the checked value with single label and all its associated checked values.
and for select i want single selected value how it can be done?
please help me thanks in advance!!!
However as per OP statement, You need to create a object then set it property
var obj = {};
obj[label] = value;
result.push(obj);
var result = [];
$('div label').each(function() {
var $this = $(this);
var label = $this.text();
value = $this.siblings().attr('value');
var obj = {};
obj[label] = value;
result.push(obj);
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
<div class="form-group">
<label for="text-1483332101835-preview" class="fb-text-label">Mobile Number :</label>
<input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>
<div class="form-group">
<label for="textarea-1483332158183-preview" class="fb-textarea-label">Comments :</label>
<textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
very bad service
</textarea>
</div>
<div class="form-group">
<label for="select-1483332201030-preview" class="fb-select-label">Select Your Locality:</label>
<select type="select" class="form-control" name="locality" id="locality">
<option value="vrpura">V.R Pura</option>
<option selected="true" value="bel">B.E.L</option>
<option value="jala">Jalahalli</option>
</select>
</div>
<div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
<input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
<label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery:</label>
</div>
<div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
<label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item :</label>
<div class="checkbox-group">
<input value="jamoon" type="checkbox" class="checkbox-group" name="" id="checkbox-group-1483332396337-preview-0" checked="">
<label for="checkbox-group-1483332396337-preview-0">Jamoon</label>
<br>
<input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" selected="">
<label for="checkbox-group-1483332396337-preview-1">samosa</label>
<br>
<input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" selected="">
<label for="checkbox-group-1483332396337-preview-2">beedi</label>
<br>
</div>
</div>
</form>
I would recommend you to use .serializeArray()
Encode a set of form elements as an array of names and values.
console.log($("form").serializeArray());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
<div class="form-group">
<label for="text-1483332101835-preview" class="fb-text-label">Mobile Number :</label>
<input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>
<div class="form-group">
<label for="textarea-1483332158183-preview" class="fb-textarea-label">Comments :</label>
<textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
very bad service
</textarea>
</div>
<div class="form-group">
<label for="select-1483332201030-preview" class="fb-select-label">Select Your Locality:</label>
<select type="select" class="form-control" name="locality" id="locality">
<option value="vrpura">V.R Pura</option>
<option selected="true" value="bel">B.E.L</option>
<option value="jala">Jalahalli</option>
</select>
</div>
<div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
<input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
<label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery:</label>
</div>
<div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
<label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item :</label>
<div class="checkbox-group">
<input value="jamoon" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-0" checked="">
<label for="checkbox-group-1483332396337-preview-0">Jamoon</label>
<br>
<input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" checked="">
<label for="checkbox-group-1483332396337-preview-1">samosa</label>
<br>
<input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" checked="">
<label for="checkbox-group-1483332396337-preview-2">beedi</label>
<br>
</div>
</div>
</form>
You can loop in label and inputs the way you doing or as said by Satpal you can use map and serializeArray too
Now if you dont use serializeArray then you have to check what type of input label has then only you can get the selected text or values
For Eg:
If next is checkbox then following checks has to be done to get value,
if($(this).next().is(":checkbox")){
$.each($(this).siblings(":checked"), function(){
alert($(this).val());
// get all checked values
});
}
You can go through this to know more. So better to go with serializeArray
I would like to make a java script what will make comment field (textarea) as mandatory when you will select a selection list , for now I just make a required icon next to comment code below and stuck on it code bellow.
Thank in advice for all help
Code what I Wrote :
<select id="ddlViewBy">
<option value="1">AJS.$("#comment-popup").parent().children('label').append('<span class="aui-icon icon-required"></span>');</option>
Source Code of my Website :
<form action="/jira/rest/tempo-rest/1.0/worklogs/{issueKey}" class="aui tempo-form" data-form-type="" name="tempo-panel-form-popup" method="post">
<div class="form-body" style="max-height: 393px;">
<input type="hidden" name="id" value="">
<input type="hidden" name="type" value="issue">
<input type="hidden" name="use-ISO8061-week-numbers" value="false">
<input type="hidden" name="ansidate" value="">
<input type="hidden" name="ansienddate" value="">
<input type="hidden" name="selected-panel" value="">
<input type="hidden" name="analytics-origin-page" value="">
<input type="hidden" name="analytics-origin-view" value="">
<input type="hidden" name="analytics-origin-action" value="">
<input type="hidden" name="startTimeEnabled" value="false">
<input type="hidden" name="tracker" value="false">
<input type="hidden" name="preSelectedIssue" class="tempoIssueKey" value="AB-5048">
<input type="hidden" name="planning" value="false">
<div class="field-group">
<label for="user-picker-popup">User</label>
<div class="tempo-pickers">
<div class="aui-ss medium aui-ss-has-entity-icon" id="user-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="user-picker-popup-field">
<div class="aui-list" id="user-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span><img class="aui-ss-entity-icon" alt="" src="google.pl"> </div>
<select id="user-picker-popup" class="plan-user-picker dialog-user-picker aui-ss-select" name="user" data-container-class="medium" data-counter="popup" data-input-text="Jon Smith" multiple="multiple" style="display: none;">
<optgroup id="tempo-user-suggested-popup" data-weight="0" label="">
<option selected="selected" style="background-image:url(/jira/secure/useravatar?size=small&ownerId=jsmith&avatarId=12927)" value="jsmith">Jon Smith</option>
</optgroup>
</select>
</div>
</div>
<div class="field-group tempo-issue-container">
<label for="tempo-issue-picker-popup">Issue </label>
<div class="aui-ss" id="tempo-issue-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="tempo-issue-picker-popup-field">
<div class="aui-list" id="tempo-issue-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span>
</div>
<select id="tempo-issue-picker-popup" class="tempo-issue-picker tempo-picker-all-issues tempo-issue-picker-logwork aui-ss-select" name="issue" multiple="multiple" style="display: none;">
<option selected="selected" value="AB-5048">AB-5048 - Holiday - Jon Smith 2016-06-13-2016-06-13</option>
</select>
</div>
<div class="tempo-datepicker">
<div class="field-group tempo-show-period">
<label for="showPeriod-popup">Period</label>
<div class="checkbox">
<input id="showPeriod-popup" name="showperiod" type="checkbox" value="showperiod" class="showperiod tempo-show-period"> </div>
</div>
<div class="field-group datepicker ">
<label for="datefield-popup">Date</label>
<input type="text" id="datefield-popup" name="date" size="7" value="2016-06-09" class="text medium-field"> <span id="datefield-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
<div class="field-group enddate datepicker " style="display: none;">
<label for="enddate-popup">End date</label>
<input type="text" id="enddate-popup" name="enddate" size="7" value="2016-06-09" class="text medium-field"> <span id="enddate-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
</div>
<div class="tempo-timepicker resetable">
<div class="field-group tempo-worked-hours">
<label class="timepicker-label" tmp="Work per day" for="time-popup">Worked </label>
<input autocomplete="off" type="text" id="time-popup" name="time" size="3" value="" class="tempo-time text short-field"> </div>
<div class="remaining-and-billed-hours-container">
<div class="field-group tempo-logged-work">
<label for="totalSpent-popup">Logged</label> <span class="totalSpent" id="totalSpent-popup">8h</span> </div>
<div class="field-group tempo-remaining-estimate" style="clear: left;">
<label for="remainingEstimate-popup">Remaining estimate </label>
<input type="hidden" id="remainingEstimateHidden-popup" size="3" maxlength="6" value="">
<input type="text" id="remainingEstimate-popup" name="remainingEstimate" size="3" maxlength="6" value="" class="validate remaining resetable text short-field"> </div>
<div class="field-group tempo-original-estimate">
<label for="originalEstimate-popup">Original estimate</label> <span class="originalEstimate" id="originalEstimate-popup"></span> </div>
</div>
</div>
<div class="field-group resetable">
<label for="comment-popup">Description</label>
<textarea id="comment-popup" name="comment" class="tempo-comment textarea resetable"></textarea>
</div>
<ul id="errors-popup" class="error-list"> </ul>
<p style="width: 97%; margin: 0 0 10px 0;" id="tempo-logwork-issue-hint" class="hint-container overflow-ellipsis" title="Pressing w also opens this dialog box"> <a class="shortcut-tip-trigger" title="Click to view all shortcuts" href="#" tabindex="-1">Shortcut tip:</a> Pressing <strong>w</strong> also opens this dialog box </p>
</div>
<div class="buttons-container form-footer"> <span id="logwork-spinner" class="aui-icon aui-icon-wait" style="display:none"></span>
<div class="buttons"><span class="icon throbber"></span>
<input type="checkbox" id="issue-add-another" class="tempo-add-another-input" value="Another">
<label for="issue-add-another" class="tempo-add-another-label"> Log another </label>
<input type="submit" id="issue-add-button" class="button button-panel-button" accesskey="s" value="Log Work"> <a id="tempo-logwork-issue-cancel" class="cancel" href="/jira/browse/AB-5048?" accesskey="'">Cancel</a> </div>
</div>
Looks like you working inside the atlassian product suite.
So You make a html field mandatory you can add the required attribute
which is workable in all modern browsers except safari I thing please check this
the js(jquery) to add a attribute would be
$('#comment-popup').attr('required', 'required');
if it is a AUI-select or AUI input read the docs there
https://docs.atlassian.com/aui/latest/docs/single-select.html on a select for instance there is a non-empty attribute
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>
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;
// This is what I changed:
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);
});
<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
<p class="form-field first_name pd-text required ">
<label>some name</label>
<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 ">
<label>Some label</label>
<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>