Get all inputs that are not empty, checked and selected with jQuery - javascript

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>

Related

dynamic form using javascript

I am trying to create a form similar to the image attached below, how "add the question" can be done using javascript? and I am trying to use express(nodejs framework).
Now if user clicks add question option then a similar form could be attached multiple times.
<h1>Create</h1>
<div class="main">
<form action="/handle" method="post">
<div class="option">
<label for="topic">Topic</label>
<input type="text" id="topic" name="topicname" required>
</div>
<div class="option">
<label for="question">Enter your question:</label>
<input type="text" id="question" name="questioninput" required>
</div>
<div class="option">
<label for="option1">option 1:</label>
<input type="text" id="option1" name="option1input" required>
</div>
<div class="option">
<label for="option2">option 2:</label>
<input type="text" id="option2" name="option2input" required>
</div>
<div class="option">
<label for="option3">option 3:</label>
<input type="text" id="option3" name="option3input" required>
</div>
<div class="option">
<label for="option4">option 4:</label>
<input type="text" id="option4" name="option4input" required>
</div>
<div>
<button type="submit">Send your response</button>
</div>
</div>
</form>
image representation:

Getting Pardot Placeholders from Label

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>

how can i make key value pair for label and value label : value

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

Why my numbers are not updating by themselves?

So, I am using the jquery-calx to calculate the price of some items. I have a different price depending on the base choise and the quantity. If the user chooses a 100 peaces of a full color base the price is different from 100 pieces of a One Side Monochromatic pattern. This is all working in my code, but there is a thing; If I choose One Side Monochromatic and them 100 pieces, the price in Total area is ok, but if I change the base to Full Color, for example, the price doesn't update. In this case, if I click again in the quantity the price does update. I would like to know if it is possible to make that update smoothly. Maybe create a button to update, I don't know. Would appreciate the help! Below Follows my code:
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="A1" value="10800">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input type="radio" name="design" data-cell="B1" value="14040">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="C1" value="16200">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuA" type="radio" name="quantity" data-cell="A3" value="">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuB" type="radio" name="quantity" data-cell="B3" value="">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuC" type="radio" name="quantity" data-cell="C3" value="">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuD" type="radio" name="quantity" data-cell="D3" value="">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuuE" type="radio" name="quantity" data-cell="E3" value="">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label data-cell="F6" data-format="$ 0,0" data-formula="SUM(F1:F5)">$ 0</label>
</div>
</div>
</form>
Script:
$('#meishi').calx();
$('input:radio[name="design"]').change(
function() {
if ($(this).is(':checked') && $(this).val() == '10800') {
$('.maisuuA').val('2160');
$('.maisuuB').val('2484');
$('.maisuuC').val('3132');
$('.maisuuD').val('2808');
$('.maisuuE').val('3456');
} else if ($(this).is(':checked') && $(this).val() == '14040') {
$('.maisuuA').val('2808');
$('.maisuuB').val('3132');
$('.maisuuC').val('3780');
$('.maisuuD').val('3456');
$('.maisuuE').val('4104');
} else if ($(this).is(':checked') && $(this).val() == '16200') {
$('.maisuuA').val('3240');
$('.maisuuB').val('3564');
$('.maisuuC').val('4212');
$('.maisuuD').val('3888');
$('.maisuuE').val('4536');
}
});
Thank you!

I've never used jquery-calx but it really isnt necessary for something like this. If it were me, I'd do it like this:
store an array of values on the design inputs
give all of the inputs a class of update
when a any input is changed, get the array from the selected design input and the index of the selected "maisuu" input tells us which value to use from that stored array
get the quantity from the value of the selected "maisuu" elemet
do your math and set the total
Like this:
*Note that you may need to tweak the math, not 100% sure the calculations are what you intended. Also, if you insist, I'm sure you could merge this technique with the use of jquery-calx
Here's a jsFiddle with comments explaining the code
$('.update').change(function() {
var $design = $('input[name="design"]:checked');
var $maisuu = $('input.maisuu:checked');
var curMaisuu =$('.maisuu').index($maisuu);
var maisuuArr =$.map($design.data('values').split(','), function(e, i) {
return Number(e);
});
var base = $design.val() * 1000;
var upcharge = maisuuArr[curMaisuu] * 1000
var qty = $maisuu.val();
var cost = ((base + upcharge)* qty ) / 1000
if (base && qty) $('#total').text('$' + cost.toFixed(2))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="A1" value="108.00" data-values="21.60,24.84,31.32,28.08,34.56">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="B1" value="140.40" data-values="28.08,31.32,37.80,34.56,41.04">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="C1" value="162.00" data-values="32.40,35.64,42.12,38.88,45.36">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="A3" value="100">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="B3" value="200">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="C3" value="300">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="D3" value="400">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="E3" value="500">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label id="total">$ 0</label>
</div>
</div>
</form>

How to get checkbox value through serializedarray()

how to get checkbox value in array format like [{abc:[1,2,3]}]
now i am getting like [{abc[]:1,abc[]:2,abc[]:3}]...
for getting serializedarray i am using var form = $('.wpc_contact').serializeArray();
here this is my html form which is get generating dynamic (i am using drag and drop for creating dynamic form)
<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend>
<div id="alert-message" class="alert hidden" style="color: red;"></div>
</div>
<div class="control-group">
<label class="control-label">Checkboxes</label>
<div class="controls" name="wpc_chkbox" req="yes">
<label class="checkbox">
<input type="checkbox" value="Option one" id="wpc_chkbox_0" name="wpc_chkbox[]" req="yes"> Option one
</label>
<label class="checkbox">
<input type="checkbox" value="Option two" id="wpc_chkbox_1" name="wpc_chkbox[]" req="yes"> Option two
</label>
</div>
<p class="help-blocksp" style="display:none;">wpc_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<label class="control-label">Inline Checkboxes</label>
<div class="controls" name="wpc_inline_chkbox" req="yes">
<label class="checkbox inline">
<input type="checkbox" value="1" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_0" req="yes"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" value="2" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_1" req="yes"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" value="3" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_2" req="yes"> 3
</label>
</div>
<p class="help-block" style="display:none;">wpc_inline_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>

To create an array use this -
var arr = $("input[name='checkboxname[]']:checked").map(function() {
return this.value;
}).get();
Alernate Solution :
<input type="checkbox" class="selector" value="{value}"/> //add as many as you wan't
JS
var checked='';
$('.selector:checked').each(function(){
checked=checked+','+$(this).val();
});
PHP
$ids=explode(',',substr($_GET['param_with_checked_values'],1));

Categories

Resources