Develop Reference

Dynamically add and remove form fields to be validated by Parsley.js

Here is my fiddle: My Fiddle (updated)
In my form (ID: #form), inputs fields are shown or hidden based on the selected option of a select input.
Each Input and its labels a wrapped in a div, which is hidden or shown based on the selected option. The attribute data-children of the select contains the information (in JSON Format) which inputs are to be shown when a certain option is selected.
I use the data-parsley-excluded attribute to remove the fields not visible from the parsley validation (Parsley Documentation).
Before I execute the parsley method $('#form').destroy();, at the end $('#form').parsley();
My HTML:
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<form id="form" method="post" accept-charset="UTF-8" class="form-horizontal" data-parsley-validate="">
<div class="form-group">
<label class="control-label" for="question_01" style="">Question 1</label>
<select class="form-control" name="question_01" id="question_01" required data-children="{"option_01":["input_01","input_02","input_03","input_04","input_05","input_06"],"option_02":["input_01","input_06","input_07","input_08","input_09","input_10"],"option_03":["input_02","input_04","input_05","input_07","input_09","input_10","input_11"]}">
<option value="" selected>Bitte auswählen</option>
<option value="option_01">Option 01</option>
<option value="option_02">Option 02</option>
<option value="option_03">Option 03</option>
</select>
</div>
<div id="div_input_01" class="form-group input-div hidden">
<label for="input_01" style="">Input 01</label>
<input type="text" class="form-control" name="input_01" id="input_01" required>
</div>
<div id="div_input_02" class="form-group input-div hidden">
<label for="input_02" style="">Input 02</label>
<input type="text" class="form-control" name="input_02" id="input_02" required>
</div>
<div id="div_input_03" class="form-group input-div hidden">
<label for="input_03" style="">Input 03</label>
<input type="text" class="form-control" name="input_03" id="input_03" required>
</div>
<div id="div_input_04" class="form-group input-div hidden">
<label for="input_04" style="">Input 04</label>
<input type="text" class="form-control" name="input_04" id="input_04" required>
</div>
<div id="div_input_05" class="form-group input-div hidden">
<label for="input_05" style="">Input 05</label>
<input type="text" class="form-control" name="input_05" id="input_05" required>
</div>
<div id="div_input_06" class="form-group input-div hidden">
<label for="input_06" style="">Input 06</label>
<input type="text" class="form-control" name="input_06" id="input_06" required>
</div>
<div id="div_input_07" class="form-group input-div hidden">
<label for="input_07" style="">Input 07</label>
<input type="text" class="form-control" name="input_07" id="input_07" required>
</div>
<div id="div_input_08" class="form-group input-div hidden">
<label for="input_08" style="">Input 08</label>
<input type="text" class="form-control" name="input_08" id="input_08" required>
</div>
<div id="div_input_09" class="form-group input-div hidden">
<label for="input_09" style="">Input 09</label>
<input type="text" class="form-control" name="input_09" id="input_09" required>
</div>
<div id="div_input_10" class="form-group input-div hidden">
<label for="input_10" style="">Input 10</label>
<input type="text" class="form-control" name="input_10" id="input_10" required>
</div>
<div id="div_input_11" class="form-group input-div hidden">
<label for="input_11" style="">Input 11</label>
<input type="text" class="form-control" name="input_11" id="input_11" required>
</div>
<button type="button" class="btn btn-info btn-block btn-submit-settings">Submit</button>
</form>
</div>
</div>
</div>
My Javascript:
$(document).ready(function() {
$('.btn-submit-settings').on('click', function(e) {
window.Parsley.on('field:error', function()
{
console.log('Validation failed for: ', this.$element);
});
$('#form').submit();
});
$('#form select').change(function() {
var $this = $(this);
if ($this.data('children')) {
$('#form').parsley().destroy();
// Hide all child elements
$.each($this.data('children'), function(value_id, input_id_array) {
$.each(input_id_array, function(key, input_id) {
if ($('#div_' + input_id).length ) {
$('#' + input_id).val(null);
if (!$('#div_' + input_id).hasClass('hidden')) {
$('#div_' + input_id).addClass('hidden');
}
}
});
});
// show the child elements of the selected option
if ($this.data('children')[$this.val()]) {
$.each($this.data('children')[$this.val()], function(key, input_id) {
if ($('#div_' + input_id).length )
{
if ($('#div_' + input_id).hasClass('hidden'))
{
$('#div_' + input_id).removeClass('hidden');
}
}
});
}
// For all inputs inside hidden div set attribute "data-parsley-excluded" = true
$('#form div.input-div.hidden').find(':input').each(function() {
var attr_data_parsley_excluded = $(this).attr('data-parsley-excluded');
if (typeof attr_data_parsley_excluded === typeof undefined || attr_data_parsley_excluded === false) {
$(this).attr('data-parsley-excluded', 'true');
}
});
// For all inputs inside not hidden div remove attribute "data-parsley-excluded"
$('#form div.input-div:not(.hidden)').find(':input').each(function() {
console.log(this.id);
$(this).removeAttr('data-parsley-excluded');
});
$('#form').find(':input').each(function() {
// Log shows that attribute is set right, seems to be ignored by parsley
console.log('ID: ' + this.id + ' TYPE: ' + $(this).prop('nodeName') + ': excluded=' + $(this).attr('data-parsley-excluded'));
});
$('#form').parsley();
$('#form').parsley().refresh();
}
});
});
I can't get it to work, even though the attributes seem to be set the right way.
The fields once hidden, stay out of the validation.

I guess you should add the attribute data-parsley-required="false" to exclude hidden fields from validation.
I mean, try to change
<input type="text" class="form-control" name="input_01" id="input_01" required>
to this
<input type="text" class="form-control" name="input_01" id="input_01" data-parsley-required="false">
and just change the attribute value if you want to validate it or not

This is more of a personal opinion than a factual answer, but I think you are attempting to solve the problem incorrectly. If I were doing this, I would create 2 parsley groups "shouldValidate" and "shouldNotValidate", and add your fields accordingly based on whether they are displayed or not. Then when you call validate, pass the group name "shouldValidate", and only that set of elements will be validated.

You probably need to call refresh on your parsley form after you modify excluded.

how to get value of these inputs using javascript or jquery

I was wondering if it possible to find an input by it's closest element?
real code:
<form method="post" action="">
<div class="rocket-form">
<fieldset>
<legend>Person Contacts</legend>
</fieldset>
<div class="rocket-label-element no-height">
<dt id="id-label"> </dt>
<dd id="id-element">
<input type="hidden" name="id" value="" readonly="readonly" id="id">
</dd>
</div>
<div class="rocket-label-element no-height"><dt id="vendor_id-label"> </dt>
<dd id="vendor_id-element">
<input type="hidden" name="vendor_id" value="" readonly="readonly" id="vendor_id">
</dd>
</div>
<div class="rocket-label-element">
<div id="firstname-label">
<label for="firstname" class="rocket-label optional">First name</label>
</div>
<div class="rocket-element">
<input type="text" name="firstname" id="firstname" value="any first name" maxlength="64" readonly="readonly">
</div>
</div>
<div class="rocket-label-element">
<div id="lastname-label">
<label for="lastname" class="rocket-label optional">Last name</label>
</div>
<div class="rocket-element">
<input type="text" name="lastname" id="lastname" value="any last name" maxlength="64" readonly="readonly">
</div>
</div>
<div class="rocket-label-element">
<div id="phone-label">
<label for="phone" class="rocket-label optional">Phone</label>
</div>
<div class="rocket-element">
<input type="text" name="phone" id="phone" value="0123456789" maxlength="32" readonly="readonly">
</div>
</div>
<div class="rocket-label-element">
<div id="email-label">
<label for="email" class="rocket-label optional">Email</label>
</div>
<div class="rocket-element">
<input type="text" name="email" id="email" value="name#someMail.com" maxlength="128" readonly="readonly">
</div>
</div>
</div>
</form>
I have this form, and I want to get the value of the inputs in variables..
I tried to use "vendor_id" in order to use closest() or next() or prev() but no luck..
so, any help?

You can use
var vendorId = $("#vendor_id").val();
to get the value of vendor_id.
Be sure to include the # which identifies it as an id.
If you want to get the values of all the inputs, you can use:
$("input, select, textarea").each(function(){
// Get value of inputs
});
If you have more than one form, you may use:
var formData = $(".rocket-form").closest("form").serialize();
Remember you will need to include jQuery with a script tag and you should wrap your code like so:
$(function() {
console.log( "ready!" );
});
This ensures the page is ready before your JavaScript executes.

you can try this
var form = $("#vendor_id").closest("form").get();
$("form :input").each(function(){
var input = $(this);
var AllInputValues= $(input).val();
alert (AllInputValues);
});
EDIT
var theVendform = $("#vendor_id").parent().closest("form").get();
alert(theVendform["0"][3].defaultValue);
alert(theVendform["0"][4].defaultValue);
alert(theVendform["0"][5].defaultValue);
alert(theVendform["0"][6].defaultValue);

Not sure if I completely understand what you are asking but what about
$('#vendor_id-element input').val()

You a class in all your inputs where you want to get value, and do de following js
Array.prototype.slice.apply(document.querySelector('.your-input-class')).forEach(function(el){
Console.log(el.value);
});

try this
var inputs = $('form').find('input');
//inputs is the array of your inputs and values can be accessed by:
var value1 = $(inputs[0]).val();
//or you can use for loop or forEach
for (var i = 0; i < inputs.length; i++) {
var currentValue = $(inputs[i]).val();
alert(currentValue);
}

How to get datatype attribute in jquery?

Suppose that I've this <div>:
<div id="input-containers">
<div class="form-group" datatype="admins operators">
<label for="first-name"> *</label>
<input type="text" id="first-name" class="form-control required" />
</div>
<div class="form-group" datatype="admins operators">
<label for="last-name"></label>
<input type="text" id="last-name" class="form-control required" />
</div>
</div>
As you can see I've two <input>s, what I need to do is get all the <input> to have operators as datatype, I did this:
$('#input-containers :input').each(function()
{
console.log($(this).attr('datatype'));
});
but this returns undefined, why?

This will work:
$('#input-containers .form-group').each(function(){
console.log($(this).attr('datatype'));
});
Or if you want to use your code, you should place the datatype attribute on the input tag.

You should target the parent div having class name .form-group and get the attribute
check the below snippet
$(document).ready(function () {
$('#input-containers :input').each(function()
{
console.log($(this).parent('.form-group').attr('datatype'));
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<div id="input-containers">
<div class="form-group" datatype="admins operators">
<label for="first-name"> *</label>
<input type="text" id="first-name" class="form-control required" />
</div>
<div class="form-group" datatype="admins operators">
<label for="last-name"></label>
<input type="text" id="last-name" class="form-control required" />
</div>
</div>

You need to use .closest() to traverse up to parent div as this refers to input which doesn't the said attribute
$('#input-containers form-group[datatype] :input').each(function() {
console.log($(this).closest('.form-group').attr('datatype'));
});
$('#input-containers form-group[datatype] :input').each(function() {
console.log($(this).closest('.form-group').attr('datatype'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-containers">
<div class="form-group" datatype="admins operators">
<label for="first-name">*</label>
<input type="text" id="first-name" class="form-control required" />
</div>
<div class="form-group" datatype="admins operators">
<label for="last-name"></label>
<input type="text" id="last-name" class="form-control required" />
</div>
</div>
However I would recommend you to use data-* prefixed attribute
<div class="form-group" data-type="admins operators">
Then use
$('#input-containers form-group[datatype] :input').each(function() {
console.log($(this).closest('.form-group').attr('data-type'));
});
.data() can also be used. However it should be used judiciously.

Try this way it will also work,
JS:
$('#input-containers :input').each(function()
{
console.log(this.parentElement.getAttribute('datatype'));
});

Remove textbox, hr and text when remove button is clicked

I am trying to remove the via textbox, remove button and horizontal line when the Remove button is clicked (as seen in the image below).
I've tried the following so far but it doesn't work:
$(document).ready(function() {
// Remove waypoints
$(".remove-waypoint-button").click(function() {
$(this).parent.closest('input').remove();
$(this).parent.closest('hr').remove();
});
});
Fiddle here
Thanks for your help.

You need to use prev() instead of closest().
Use
// Remove waypoints
$(".remove-waypoint-button").click(function () {
$(this).prev('input').remove();
$(this).prev('hr').remove();
$(this).remove();
});
DEMO
However I would recommend you to wrap input and button in a div, then you can use .parent() to remove all at once. Here's an example.
$(document).ready(function() {
// Remove waypoints
$(".remove-waypoint-button").click(function() {
$(this).parent('div').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="waypoints">
<div>
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via" />
<label class="remove-waypoint-button">Remove</label>
</div>
<div>
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via" />
<label class="remove-waypoint-button">Remove</label>
</div>
</div>

A better approach would be to improve your mark up by grouping similar fields.
This improves the script too.
I hope this is what you expected.
$(function() {
$(".remove-waypoint-button").on("click", function() {
$(this).parent(".container").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="waypoints">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<hr>
<div class="container">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<label class="remove-waypoint-button">Remove</label>
<hr>
</div>
<div class="container">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<label class="remove-waypoint-button">Remove</label>
<hr>
</div>
<div class="container">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<label class="remove-waypoint-button">Remove</label>
<hr>
</div>
</div>

closest() works on the parent of the element. hr and input are not parent of label.
thanks

Javascript hide/show questions depending on user input values

I am trying to hide and/or show form elements when a user selects certain values.
For example, if the user selects "yes" to the consent question, I need it to show a few questions, However, if they change their response to the consent question, I need it to hide those questions.
Here is what I have come up with so far...
$(document).ready(function () {
var input = document.getElementById('consent');
var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
input.addEventListner('click', function () {
var consent_response;
if (consent_responses[this.value]) {
content_response = consent_responses[this.Function()]
}
else {
content_response = consent_responses[this.Function]
}
});
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
function hideConsent(){
$("#date").hide(),
$("#referrer").hide(),
$("#f_name").hide(),
$("#phone_num").hide(),
$("#leave_msg").hide(),
$("#email").hide(),
}; });
Fiddle here: http://jsfiddle.net/7jX47/1/

You could do it like this: JSFiddle
Basically I only fixed a few typos (did you actually try your code before you posted here?) and added event listeners to the radio buttons with
document.getElementById(...).addEventListener(...)
I also gave your radio buttons unique IDs.

This can be simplified:
var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
"0" : hideConsent,
"1" : showConsent
};
input.addEventListener("click", function () {
// Get the appropriate function given the value, and invoke it
consent_responses[this.value]();
});
function hideConsent() {
// ...
}
function showConsent() {
// ...
}

It's better to envelop your questions (that needs to be hidden) by a div with a class ".hidden" or style "display: none;". And simplify your code by simply asking that div to show() or hide() when needed.
Like so:
<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Do you agree to answer the screening questions?</b><br />
<div class="radio" id="consent">
<label>
<input type="radio" name="consent" id="consent" value="1">
Yes, I consent
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="consent" id="consent" value="0">
No, I do not consent
</label>
</div>
</div>
<!-- simplify by using this -->
<div id="questions" style="display: none;">
<div class="form-group" id="date">
<label for="date">What is today's date?</label>
<input type="date" class="form-control" id="date" name="date" />
</div>
<div class="form-group" id="referrer">
<label for="referrer">How did you hear about us/our studies?</label>
<select class="form-control" name="referrer" id="referrer">
<option></option>
<option value="1">Flyers</option>
<option value="2">Print Media</option>
<option value="3">A friend</option>
<option value="4">Online (e.g., Craigslist)</option>
<option value="5">Other</option>
</select>
</div>
<div class="form-group" id="other_explain">
<label for="other_explain">Please specify other source.</label>
<textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
</div>
<div class="form-group" id="f_name">
<label for="f_name">What is your first name?</label>
<input type="text" class="form-control" id="f_name" name="f_name" />
</div>
<div class="form-group" id="phone_num">
<label for="phone_num">What is a phone number at which you can be contacted? </label>
<input type="tel" class="form-control" id="phone_num" name="phone_num" />
</div>
<div class="form-group" id="leave_msg">
<label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="1">
Yes
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="0">
No
</label>
</div>
</div>
<div class="form-group" id="email">
<label for="email">What is an e-mail at which you can be contacted?</label>
<input type="email" class="form-control" id="email" name="email" />
</div>
</div>
</div>
</form>
and in your javascript instead of using this:
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
you use:
function showConsent(){
$("#questions").show(),
};