Develop Reference

show div when all input fields have content

I have a form with a few input fields, I only want to show a div when all the input fields got content, when one of the input fields has no content the div should disappear again.
I made it work with one input field, but how do I get it to work when all the input fields are filled in (don't know if its a good clean way?):
$(function () {
$('input').change(function() {
$('.next').toggle($(this).val().length !== 0);
}); });
Fiddle:
http://jsfiddle.net/uQyH9/19/

Try this : http://jsfiddle.net/uQyH9/21/
$(function () {
var _cached=$('input');
_cached.change(function() {
if (_cached.filter(function (){return $(this).val().length }).length==_cached.length)
$('.next').show();
else
$('.next').hide();
});
});

You can use a filter function to check that all the input are filled.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/DwF2P/
UPDATE
You can check the value of the elements by type by cheking type attribute.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
var myType=$(this).attr("type");
if (myType === "checkbox") return !$(this).is(":checked");
if (myType==="radio"){
var myName = $(this).attr("name");
if (myName==="") return !$(this).is(":checked");
return $('input[name='+ myName +']:checked').length===0
}
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/pqJhg/

Loop over the inputs. If you find one that isn't filled in, then hide the DIV. If you don't, show the DIV.
$('input').change(function() {
var allFilled = true;
$('input').each(function() {
if (this.value === '') {
allFilled = false;
return false; // Terminate the loop
}
}
$('.next').toggle(allFilled);
});

Can I hide the text box value if the value is 0?

Please help I am able to do all the calculations I need as long as I make certain text boxes default value 0 but I do not want these boxes to show a 0 if nothing is put in them. Can I hide the text box if the value is 0? there are servral text boxs in the sheet.
Edit:
Op wants also to validate form ,no submit() if values are not numbers or are empty.

Here's a Fiddle
$(function() {
$('input[type="text"]').each(function() {
var value = $(this).val();
if(value == 0) {
$(this).val('');
}
});
});

Answer to your comment about validation of form if input's value is not number or is empty :DEMO HERE
$(document).ready(function() {
$('input[type="submit"]').click(function(e){
var isEmpty=false;
e.preventDefault();
$('input[type="text"]').each(function() {
if($(this).val() ==0||$(this).val() =='' || isNaN($(this).val())) {
$(this).val('');
isEmpty=true;
}
});
if(isEmpty) {
alert('please fill all values');
return false;
}
else $('form').submit();
});
});
First Answer :This solves your issue : JSFIDDLE DEMO HERE
$(document).ready(function()
{
$('input[type="text"]').each(function()
{
if($(this).val() == 0) $(this).val('');
});
});

How to target all input text and password value?

I'm trying to figure out how to target every input(text and password) field on all forms on the page document to remove the default value when on focus with this single script:
$(document).ready(function()
{
Input = $('input');
default_value = Input.val();
$('input').focus(function()
{
if($(this).val() == default_value)
{
$(this).val("");
}
}).blur(function()
{
if($(this).val().length == 0)
{
$(this).val(default_value);
}
});
});
It works only on the first input text element in the first form on my page, but nothing on the rest. Please help!

Get all the input type text value:
$("input:text").each(function() {
alert($(this).val());
});
Get all input type password value:
$("input:password").each(function() {
alert($(this).val());
});

That's because val only returns the value of the first selected element, instead of storing the values, you can use defaultValue property of the HTMLInputElement object.
$('input[type=text], input[type=password]').focus(function() {
if (this.value === this.defaultValue) $(this).val("");
}).blur(function(){
if (this.value.length === 0) this.value = this.defaultValue;
});
http://jsfiddle.net/MscgZ/

val() returns Placeholder value instead of the actual value in IE8,9 when the field is empty

Placeholder attribute shown below works fine in firefox but if val() is called when the field is empty it returns the placeholder value instead of the actual value in the text.
JSFiddle - http://jsfiddle.net/Jrfwr/2/
<input id="tlt" type="text" placeholder="Enter Title" />
JSCode
function placeHolderFallBack() {
if ("placeholder" in document.createElement("input")) {
return;
}
else {
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
}

You could override the val() method but I don't like doing that :D
I wrote a simple pVal() function which does the job
$.fn.pVal = function(){
var $this = $(this),
val = $this.eq(0).val();
if(val == $this.attr('placeholder'))
return '';
else
return val;
}
$(function(){
alert($('input').val())
alert($('input').pVal())
});​
http://jsfiddle.net/W7JKt/3/

In your JSFiddle code you get the value of the textbox in a BUTTON CLICK event... and your code that checks if the current value of the textbox is equal to the placeholder executes in the FORM SUBMIT event.
So... the problem is that the BUTTON's CLICK event executes before the FORM's SUBMIT event.
This code shows an example of how to get the correct value
Hope that helps.

Its to do with HTML 5. Please see this article.
http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

CKEditor on focus remove default value

For a normal input field i can write something like the below code, which will remove the default value of an input field when i click, and if i dont write anything in the input field, than the default value will return when i leave the input field.
jQuery('input[type="text"]').focus(function()
{
if (this.value == this.defaultValue)
{
this.value = '';
}
if(this.value != this.defaultValue)
{
this.select();
}
});
jQuery('input[type="text"]').blur(function()
{
if (this.value == '')
{
this.value = this.defaultValue;
}
});
But i have no clue how to do this with CKEditor.. Can I get some help.
I found this code which will alert when I click in the CKEditor. But I dont know how modify it to work the way I need.
CKEDITOR.instances['post_content'].on('focus', function()
{
alert(1);
});

Have you tried this?
CKEDITOR.instances['post_content'].on('focus', function()
{
if (this.value == defaultValue)
{
this.value = '';
}
});

Combining the idea above with [this other SO article][1]:
// delete default text on focus
CKEDITOR.instances['editor1'].on('focus', function () {
var defaultText = '<p class=\"ckNormal\">Type your comment here</p>';
var currentText = CKEDITOR.instances.editor1.getData();
// debug - removed
// alert(defaultText + '\n' + currentText);
if (defaultText.trim()==currentText.trim()) {
CKEDITOR.instances.editor1.setData('');
}
});
You probably won't need to trim the text before testing. This uses getData to find what the text is, and setData to change it.