Develop Reference

DirtyForms does not work on input hidden field

I added dirtyForms to my forms to detect any changes on one of the input fields https://github.com/snikch/jquery.dirtyforms
HTML
<form>
<input type="text" id="post" name="post">
<input type="hidden" id="body" name="body">
<froala-editor input="body">
</froala-editor>
</form>
Javascript
$('document').ready(function() {
$('form').dirtyForms();
});
However for input hidden seems like it doesn't add the dirty class, it only works for input type="text" . Any ideas on how to solve this problem?

Because it does not make sense when the user is not the one entering the data in the field.
You can do it yourself
SO does not allow the editor so I tested here
$('form').toggleClass('mydirty', e.target.textContent !== "");
tests the editor, it makes more sense than the input field
https://plungjan.name/SO/froala/
$('form').dirtyForms({
helpers: [{
isDirty: function($node, index) {
if ($node.is('form')) {
return $node.hasClass('mydirty');
}
}
}]
});
var editor = new FroalaEditor('#froala')
$(document).on("keyup", function(e) {
$('form').toggleClass('mydirty', e.target.textContent !== "");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/froala-editor#3.2.3/js/froala_editor.min.js"></script>
<form>
<input type="text" id="post" name="post">
<input type="hidden" id="body" name="body">
<div id="froala" input="body">
</div>
</form>

Checkbox Hidden Div Unchecked

I have a checkbox hidden div with text field. If checkbox is checked this text field will showed, but if checkbox unchecked text field not show. This Code :
<script type="text/javascript">
$(function () {
$("input[name='checkbox1']").click(function () {
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
$("#dvcheckbox1").hide('lainnya');
}
});
});
</script>
<div style="margin-left: 29%; margin-top: -2%;">
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1" style="display: none;">
<?php echo $form->textField($model,'lainnya'); ?>
</div>
</div>
But, How this checkbox is checked if there something value on textfield? and text field shown. Because in form Update, value was show but checkbox is checked. I want checkbox is checked
For example Like this:
Click to show example

Instead use with change event with .toggle(boolean) method:
// on page load check of the div contains any text
$("#dvcheckbox1").toggle(function(){
var $v = $(this).find('input').val();
$("input[name='checkbox1']").prop('checked', $v.trim().length !== 0)
return $v.trim().length !== 0;
});
$("input[name='checkbox1']").change(function () {
$("#dvcheckbox1").toggle(this.checked);
});

There are a few things here:
1 - Better if you use document ready, because it waits until all the elements are loaded.
2 - You should hide the element$("#dvcheckbox1").hide('lainnya') when the page is loaded.
3 - A listener in the input:text is a good idea. It enables the checkbox if the textbox is empty.
Please, have a look at the next piece of code:
<div>
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1">
<label for="myValuye"/>
<input type="text" id="myValue" name="myValue" value=""/>
</div>
</div>
<script>
$(document).ready(function() {
$("input[name='checkbox1']").click(function () {
// Always use some logs to check what line are you reaching.
console.log("Clicked checkbox!!!");
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
console.log("Value: " + $("#myValue").val());
$("#dvcheckbox1").hide("lainnya");
}
});
$("#myValue").bind("change paste keyup", function() {
if ($(this).val() == "") {
$("#checkyes1").removeAttr("disabled");
} else {
$("#checkyes1").attr("disabled", true);
}
});
// First of all we hide the #dvcheckbox1
$("#dvcheckbox1").hide('lainnya');
})

JQuery validation on blur

I have a form that I want to validate using JQuery.
When the user leaves the form field without entering anything the class of that input changes to show an error by becoming red.
I have created a jsfiddle file
http://jsfiddle.net/mTCvk/
The problem I am having is that the it will only work on the first text input and the other text inputs will adjust according to the state of the first input.
The JQuery
$(document).ready(function(){
$('.text-input').focusout(function () {
if ($(":text").val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
});
Here is the HTML for the form
<form method="post" action="">
<div class="text-input">
<img src="images/name.png">
<input type="text" name="name" placeholder="*Name:">
</div>
<div class="text-input">
<img src="images/mail.png">
<input type="text" name="email" placeholder="*Email:">
</div>
<div class="text-input">
<img src="images/pencil.png">
<input type="text" name="subject" placeholder="*Subject:">
</div>
<div class="text-input">
<img src="images/phone.png">
<input type="text" name="phone" placeholder="Phone Number:">
</div>
<textarea name="message" placeholder="*Message:"></textarea>
<input type="submit" value="Send" class="submit">

It's a DOM issue. It needs to check the :text child for that specific element
$(document).ready(function(){
$('.text-input').focusout(function () {
if ($(this).find(":text").val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
});
Updated Fiddle http://jsfiddle.net/mTCvk/2/

It's easy, you have selected the first input type text found : $(":text").val().. You must select the input type type on the .text-input blured :
$(":text", $(this)).val()... // First :text, on $(this) parent
http://jsfiddle.net/mTCvk/1/
PS : for your class management, don't delete .text-input juste add and remove an other class .text-input-error when you have an error

You can use this:
$(":text").focusout(function () {
if ($(this).val().length == 0) {
$(this).parent().removeClass("text-input").addClass("text-input-error");
} else {
$(this).parent().removeClass("text-input-error").addClass("text-input");
}
});

Use following code....
$('.text-input, .text-input-error').focusout(function () {
if ($(this).find(':text').val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});

I changed your code to use the .on method, and gave it the event blur. Then we create a variable for the closest text-input class (which would be its parent text-input div). Rather than checking the .length, we just check to see if it is an empty string. You would also need to wrap your textarea in the save text-input div for this to work properly.
http://jsfiddle.net/43e2Q/
$('input, textarea').on('blur', function () {
var $closestParent = $(this).parent();
if ($(this).val() == '') {
$closestParent.removeClass("text-input").addClass("text-input-error");
console.log('error');
} else {
$closestParent.removeClass("text-input-error").addClass("text-input");
console.log('valid');
}
});

Populating a tag input based on other inputs in same form

I have a form with a bunch of inputs. Sometimes the form will have 1 input and sometimes up to 10 inputs. When someone fills out each input I want a tag field at the bottom to be populated also. Right now I have it working but only with a set number of inputs. (3 at the moment).
Im trying to figure out how to make it work regardless of how many inputs there are on the page.
HTML
Input1 <input id="input1" name="input1" type="text" value="" />
<br/>
Input2 <input id="input2" name="input2" type="text" value="" />
<br/>
Input3 <input id="input3" name="input3" type="text" value="" />
<br/>
<p>List of inputed text</p>
<span id="allInputs"></span>
Jquery
$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#allInputs").text(inputArray.join(' '));
});
A nice to have also would be putting them into another input instead of a span and adding a comma after each one except for the last one.
I know Im probably missing something very simple here.

In your example you are only allowing for 3 inputs as you have 3 input boxes, when any of those input boxes change your tags are then being transferred to the span.
Now it sounds like you wish to allow for multiple entries regardless of how many inputs. You could try something simple such as the below fiddle.
http://jsfiddle.net/K2g4z/
Html:
<div>
<strong>Enter your tag and click add</strong>
<br/>
<input type="text" id="tagEntry" />
<button id="tagAdd">Add</button>
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
Javascript:
var tags = [];
$(function() {
$('#tagAdd').click(function(){
//get the tag value and trim the spaces
var tVal = $('#tagEntry').val().trim();
if(tVal == '')
return;
//reset the entry box
$('#tagEntry').val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
UPDATE:
The JSFiddle link http://jsfiddle.net/K2g4z/1/ now supports using multiple inputs of as many as you need. To achieve this instead of selecting on element ID we bind to a class name. Given the following Html.
<div>
<strong>Enter your tag and click add</strong>
<br/>
<strong>Tag 1</strong>
<input type="text" id="tagEntry" class="tagEntry" />
<br/>
<strong>Tag 2</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 3</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 4</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 5</strong>
<input type="text" class="tagEntry" />
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
All the tag input boxes have a class of tagEntry now this class will become our selector. With the following JS we can bind the blur event to every tag that has a class of tagEntry. This will now update the tags box every time any of the inputs changed.
var tags = [];
$(function() {
$('.tagEntry').blur(function(){
//get the tag value and trim the spaces
var tVal = $(this).val().trim();
if(tVal == '')
return;
//reset the entry box
$(this).val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
As you can see our handler binds to all the inputs, as any of the inputs receives the blur event the method of extracting the tags is executed.

$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#masterinput").val(inputArray.join(' '));
});

You probably want to narrow the selector so it isn't selecting all text inputs on the page.
var inputs$ = $("input:text").change(function () {
var inputArray = [];
$.each(inputs$, function(i, v) {
inputArray.push($(v).val());
}
$("#allInputs").text(inputArray.join(' '));
});

Here you go:
var str = "";
$("input[type=text]").change(function () {
$("input[type=text]").each(function(){
str += $(this).val()+",";
};
});
$("#allInputs").html(str);

Adding new text box using javascript

I have a webpage. There is a button called add. When this add button is clicked then 1 text box must be added. This should happen at client side only.
I want to allow the user to add at most 10 text boxes.
How can I achieve it using javascript?
example:
only 1 text box is displayed
user click add >
2 text boxes displayed
user clicks add >
I also wants to provide a button called "remove" by which the user can remove the extra text box
Can anyone provide me a javascript code for this??

Untested, but this should work (assuming an element with the right id exists);
var add_input = function () {
var count = 0;
return function add_input() {
count++;
if (count >= 10) {
return false;
}
var input = document.createElement('input');
input.name = 'generated_input';
document.getElementbyId('inputs_contained').appendChild(input);
}
}();
add_input();
add_input();
add_input();

A solution using the jQuery framework:
<form>
<ul class="addedfields">
<li><input type="text" name="field[]" class="textbox" />
<input type="button" class="removebutton" value="remove"/></li>
</ul>
<input type="button" class="addbutton" value="add"/>
</form>
The jQuery script code:
$(function(){
$(".addbutton").click(){
if(".addedfields").length < 10){
$(".addedfields").append(
'<li><input type="text" name="field[]" class="textbox" />' +
'<input type="button" class="removebutton" value="remove"/></li>'
);
}
}
// live event will automatically be attached to every new remove button
$(".removebutton").live("click",function(){
$(this).parent().remove();
});
});
Note: I did not test the code.
Edit: changed faulty quotation marks

I hope you are using jQuery.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// --></script>
</head><body>
<div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>