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('');
});
});
Related
For textboxes and numbers, If they are empty, We send the following error command very easily:
AJAX
parent_fieldset.find('input[type="text"], input[type="number"]').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
CSS
.input-error {
border-color: red;
}
But for select option, checkbox, radio tags, if they were empty, How should I do?
You may use something like this:
$(document).ready(function(){
$('#mySelectBox').each(function() {
if($(this).val() == -1)
$(this).addClass('input-error');
else
$(this).removeClass('input-error');
});
});
A fiddle example here. To clarify a bit, I assumed here that you'd have a "please select option" with the value -1 (so nothing was actually selected):
To verify if a combo box item has been selected, you can check the selectedIndex value.
With the checkbox, you can check its checked property.
Working example is at https://jsbin.com/hezemohali/edit?html,js,output
function verify() {
let selectCar = this.document.getElementById("car-brand");
if(selectCar.selectedIndex === 0)
selectCar.className = 'input-error';
else
selectCar.classList.remove('input-error');
let tc = this.document.getElementById("tc");
if (!tc.checked)
tc.parentNode.className = 'input-error';
else
tc.parentNode.classList.remove('input-error');
}
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/
I have the following code to put helper text in a search input box that is removed when you click in the box and returned if you click anywhere else without changing it:
$('#search-form input[type="text"]').each(function(){
var defaultVal = 'Category Search';
$(this).focus(function(){
if ($(this).val() == defaultVal){
$(this).removeClass('active').val('').css('color', '#000');;
}
})
.blur(function(){
if ($(this).val() == ''){
$(this).addClass('active').val(defaultVal).css('color', '#CCC');
}
})
.blur().addClass('active');
});
But if the user clicks submit without clicking in the input box, the site will search for the helper value (Category Search).
What I need to do is on submit check the value and if it's Category Search then do the following things:
Change helper text to Please enter a category
Don't submit the form.
I tried this but it stopped my default value (Category Search) from working all together:
$('#search-form input[type="submit"]').click(function() {
if ($(this).val() == "Category Search")
//do stuff here
});
jsBin demo
var defaultVal = 'Category Search';
var enterCat = 'Please enter a category';
$('#search-form input[type="text"]').each(function(){
$(this).focus(function(){
if ($(this).val() == defaultVal || $(this).val() == enterCat){
$(this).removeClass('active').val('').css('color', '#000');
}
})
.blur(function(){
if ($.trim($(this).val()) === ''){
$(this).addClass('active').val(defaultVal).css('color', '#CCC');
}
})
.blur().addClass('active');
});
$('#search-form').submit(function(e) {
if ( $(this).find('[type="text"]').val() === defaultVal){
e.preventDefault();
$(this).find('[type="text"]').prop('value', enterCat);
}
});
and use also $.trim() (whitespaces) before searching for blank inputs :)
HTML5 placeholder is what you should use for browsers that support it, there would be no code to write to remove it.
For browsers that do not support it, there are plenty of plugins that make it work.
And why do you not just ignore the default value on the server? Seems like a logical place to filter it out.
The reason why your code fails is this is the submit button, not the form fields!
$('#search-form input[type="submit"]').click(function() {
if ($(this).val() == "Category Search") <-- this is the submit button, not the input
//do stuff here
});
You need to change it to point to the inputs
$('#search-form').on("submit",function() {
$('#search-form input[type="text"]').each( function() {
//do comparison here, you could use defaultValue attribute
} );
});
I agree on using placeholder, but this is the answer to your question:
$('#search-form input[type="submit"]').click(function() {
if ($('#search-form input[type="text"]') == "Category Search")
$('#search-form input[type="text"]').val("Please enter a category");
return false;
});
I, personally, would create an error box near to the search field rather than change the text already in it - otherwise you're going to have problems with people submitting 'please enter a category'...
You are trying to get the .val() of the submit button
$('#search-form input[type="submit"]').click(function() {
if ($('#search-form input[type="text"]').val() == "Category Search")
//do stuff here
});
but you should probably hook it to submit event of the form itself, but that would depend on how your implementation actually works.
$('#search-form').submit(function() {
if ($('#search-form input[type="text"]').val() == "Category Search")
//do stuff here
});
If you can't use the placeholder (and you really should if you can), then you could simply set the field to disabled:
$('#search-form input[type="submit"]').click(function() {
if ($(this).val() == "Category Search") {
$(this).prop('disabled',true);
}
});
The disabled attribute essentially guarantees that the field is 'not successful', and thus won't be submitted to the server.
A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful...
Citation: http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2.
Much simpler: Most new browsers will allow this:
<input type="text" placeholder="your prompt here" />
But for older browsers you can do this:
$(function() {
if ($.browser.msie) {
$('#search-form input[type="text"]').each(function(){
$(this).val($(this).attr("placeholder"));
});
}
$("#search-form").on("submit",function() {
var cnt=0,empty++;
$("#search-form input[type='text']").each(function(){
var box = $(this),val = box.val();
if (val == box.attr("placeholder")){
box.val("");
}
else {
box.val($.trim(val));
}
if (box.val()=="") empty++;
cnt++;
});
if (empty==cnt) return false;
});
});
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