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/
Related
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);
});
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('');
});
});
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/
I found this useful little method of displaying field titles within the text fields themselves.
http://viralpatel.net/blogs/2009/09/default-text-label-textbox-javascript-jquery.html
Only problem is that if the fields aren't completed by the user then the title values get submitted.
Could anyone tell me how to add a onsubmit check to make sure we don't submit default text?
This is the javascript:
$('input[type="text"]').each(function () {
this.value = $(this).attr('title');
$(this).addClass('text-label');
$(this).focus(function () {
if (this.value == $(this).attr('title')) {
this.value = '';
$(this).removeClass('text-label');
}
});
$(this).blur(function () {
if (this.value == '') {
this.value = $(this).attr('title');
$(this).addClass('text-label');
}
});
});
Many thanks...
Something like the following should work:
$('form').submit(
function(e){
$(this).find('input, select, textarea').each(
function(){
if ($(this).val() == this.title){
$(this).val(''); // removes the value
// or prevent form submission:
// return false;
}
});
});
I am using the below code to show hide the default input value on focus. However, I am going to be using a few forms on one page and dont really want to have create this js for each input field, pretty time consuming and probably a bit too much js.
Html
<input type="text" class="sb" value="Search CT..."/>
Javascript
//search box
$("input.sb").focus(function(){
if ( $(this).val() == "Search CT...")
$(this).val('');
});
$("input.sb").blur(function(){
if ( $(this).val() == "")
$(this).val('Search CT...');
});
I was wondering if there was a way to create some generic JS to show/hide the default value, regardless of its content which would work on all form inputs??
Hope this makes sense, thanks very much.
This code will look through all your text input elements and textarea elements on page load. It will store their original values using $.data. It will then do the emptying and refilling as appropriate.
$(document).ready(function(){
$('form input:text, form textarea').each(function(){
$.data(this, 'default', this.value);
}).focus(function(){
if ($.data(this, 'default') == this.value) {
this.value = '';
}
}).blur(function(){
if (this.value == '') {
this.value = $.data(this, 'default');
}
});
});
Try below code -
$(document).ready(function(){
var value = '';
$("input.sb").focus(function(){
value = $(this).val();
if (value != ""){
$(this).val('');
}
});
$("input.sb").blur(function(){
if ( $(this).val() == ""){
$(this).val(value);
}
});
});
Looks like you're using jQuery. Have you tried using a plugin?
Here's one that will do what you need:
http://plugins.jquery.com/content/default-text-inputtext-fields-required-rule-modification
You could create a map, more or less like this:
Javascript
function setEvents( id, txt ){
$("#" + id)
.focus(function(){
if ( $(this).val() == txt) $(this).val('');
})
.blur(function(){
if ( $(this).val() == "") $(this).val(txt);
});
}
var map = {
input1: "your text",
input2: "other text"
};
for(var i in map){
setEvents( i, map[i] );
}
Where the keys of the map object represent input ID's and the values represent the default value
$("input").focus(function(){
$(this).val('');
});
or give a common class for each input field