So for default text swapping on input (or other type of el) I have this snippet
<input class="js_text_swap" type="text" value="Enter your email" />
if($('.js_text_swap').length > 0) {
$('.js_text_swap').each(function() {
var that = $(this),
value = that.val(); // remembering the default value
that.focusin(function() {
if(that.val() === value) {
that.val('');
}
});
that.focusout(function() {
if(that.val() === '') {
that.val(value);
}
});
});
}
So my questions are:
1) does anybody has a better solution for this?
2) does anyone know how to make this work with live added elements (added with js after page has loaded)?
Thanks
Jap!
HTML
<input placeholder="Click..." class="text" type="text">
CSS
.text{color:#aaa}
.text.focus{color:#444}
JS
$("input[placeholder]").each(function() {
var placeholder = $(this).attr("placeholder");
$(this).val(placeholder).focus(function() {
if ($(this).val() == placeholder) {
$(this).val("").addClass('focus');
}
}).blur(function() {
if ($(this).val() === "") {
$(this).val(placeholder).removeClass('focus');
}
});
});
http://yckart.com/jquery-simple-placeholder/
UPDATE
To make it work with ajax or similar you need to convert it into a "plugin" and call it after your succesed ajax request (or after dynamically crap creating).
Something like this (very simple example):
jQuery.fn.placeholder = function() {
return this.each(function() {
var placeholder = $(this).attr("placeholder");
$(this).val(placeholder).focus(function() {
if ($(this).val() == placeholder) {
$(this).val("").addClass('focus');
}
}).blur(function() {
if ($(this).val() === "") {
$(this).val(placeholder).removeClass('focus');
}
});
});
};
$("input:text, textarea").placeholder();
$("button").on("click", function() {
$(this).before('<input type="text" placeholder="default value" />');
$("input:text, textarea").placeholder();
});
demo
Related
i am trying to show a div when all inputs are filled , but unfortunately it shows nothing here is my JS , it works on the JS FIDDLE but not on the website
$('#name, #prenom, #password,#confirm_password, #email,#confirm_email').bind('keyup', function() {
if(allFilled()) $('.next2').show();
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
You can turn the jQuery collection into an an array and then use the native JS array method every to check to see if all the inputs contain values.
const inputs = $('input');
inputs.on('keyup', function() {
const notEmpty = inputs.toArray().every(input => {
return input.value !== '';
});
if (notEmpty) {
$('div').show();
} else {
$('div').hide();
}
});
div { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input />
<input />
<input />
<input />
<div>All the values!</div>
i have a problem with clearing html form inputs.
This is my situation:
<input id="filefield" type="file" name="fileupload"/>
<textarea id="textareafield" name="textupload"></textarea>
<script>
('#textareafield').change(function() {
value1 = $(this).val();
if (value1 != '') $('#filefield').val('');
});
('#filefield').change(function() {
value2 = $(this).val();
if (value2 != '') $('#textareafield').val('');
});
</script>
If #filefield used delete the content from #textareafield and if #textareafield used delete the content from #filefield. I need a solution with javascript or jquery. Thanks.
$(function() {
console.log("ready");
$("#filefield").change(function() {
if ($(this).val() != '') {
$('#textareafield').val('');
// make this field "readonly"
$('#textareafield').attr('readonly', true);
}
else {
$('#textareafield').attr('readonly', false);
}
});
$("#textareafield").change(function() {
if ($(this).val() != '') {
$('#filefield').val('');
// disable the "file" button
$('#filefield').attr('disabled', true);
}
else {
// enable the "file" button
$('#filefield').attr('disabled', false);
}
});
});
Exemple on jsfiddle : https://jsfiddle.net/w3z17dvb/
Javascript newbie here. I've got the following partially working code:
jQuery(document).ready(function ($) {
$("#frm_form_70_container input[type=submit]").css('visibility', 'hidden'); //hide submit button by default
$("select[name='item_meta[4418]'], select[name='item_meta[4473]'], select[name='item_meta[4474]'], select[name='item_meta[4483]']").change(function () {
var submit = true;
if ($("select[name='item_meta[4418]']:selected").val() == 'Email' || $("select[name='item_meta[4473]']:selected").val() == 'Email' || $("select[name='item_meta[4474]']:selected").val() == 'Email' || $("select[name='item_meta[4483]']:selected").val() == 'Email')
submit = false;
if (submit) {
$("#frm_form_70_container input[type=submit]").css('visibility', 'visible');
} else {
$("#frm_form_70_container input[type=submit]").css('visibility', 'hidden');
}
});
});
I've got a drop down box with a few values. What I want to happen is for the submit button to hide when anything other than the value "Email" is selected.
This probably seems foolish and I apologize, but any help would be appreciated.
Courtesy of mainly #smerny and myself
jQuery(document).ready(function ($) {
var $allSelects = $("#frm_form_70_container").find('select'),
$submitBtn = $("#frm_form_70_container input[type=submit]");
$allSelects.on('change', function () {
if (!$allSelects.filter(function() {
return this.value === "Email"; }).length) {
$submitBtn.hide();
} else {
$submitBtn.show();
}
});
});
Fiddle Demo
I've taken the code that #dcodesmith and #smerny suggested but I need to add another option like " return this.value === "Apply for Senior Forecaster";" see here: http://jsfiddle.net/2oajog5x/
I'm not that familiar with JS unfortunately.
jQuery(document).ready(function($) {
var $allSelects = $("#frm_form_11_container").find('select'),
$submitBtn = $("#frm_form_11_container input[type=submit]");
$allSelects.change(function() {
if (!$allSelects.filter(function() {
return this.value === "Apply for Senior Forecaster";
}).length) {
$submitBtn.hide();
} else {
$submitBtn.show();
}
});
});
.hide {
display: none;
}
<form id='frm_form_11_container'>
<select>
<option value="What do you want to do?">What do you want to do?</option>
<option value="Apply for Senior Forecaster">Apply for Senior Forecaster</option>
<option value="I'd like to talk about a position">I'd like to talk about a position</option>
</select>
How to save the value of INPUT in variable to not to write a lot of duplicate code?
like var input = $(this).val();
full example
<div id="form">
1. <input type="text" value="title" />
2. <input type="text" value="value" />
</div>
$(function(){
$('#form input:eq(0)').bind({
focus: function(){
if($(this).val()=='title'){
$(this).val('');
}
},
blur: function(){
if($(this).val() == ''){
$(this).val('title');
}
}
});
$('#form input:eq(1)').bind({
focus: function(){
if($(this).val()=='value'){
$(this).val('');
}
},
blur: function(){
if($(this).val() == ''){
$(this).val('value');
}
}
});
});
I'm not exactly sure what you are asking, but this refactoring will work for toggling the value. EDIT: added default attribute to the html elements and shortened jQuery (still readable though) http://jsfiddle.net/UmZeZ/
<div id="form">
1. <input type="text" value="title" default="title" />
2. <input type="text" value="value" default="value" />
</div>
$(function() {
$('#form input').bind('focus blur', function() {
var value = $(this).attr('default');
if ($(this).attr('value') == value) {
$(this).attr('value', '');
} else if ($(this).attr('value') === '') {
$(this).attr('value', value);
}
});
});
To accomplish what you want, I would suggest using the HTML5 placeholder attribute. With Modernizr, we can detect browser support for this feature, and with this simple piece of code, we can get it to work even for browsers that do not support placeholder.
if(!Modernizr.input.placeholder){
var input = $('input[type="text"]');
input.focus(function(){
if(this.value === this.getAttribute('placeHolder')) this.value = '';
}).blur(function(){
if(this.value === '') this.value = this.getAttribute('placeHolder');
}).blur();
}
See a live demo of this here: http://www.jsfiddle.net/yijiang/cTDsL/1
Here is my solution. I would work to any field which has class="set-default"
Checkout the working example
Here is the code:
$(function(){
$('.set-default').bind({
focus: function(){
if(typeof($(this).data('def')) == 'undefined'){
$(this).data('def', this.value)
}
if(this.value == $(this).data('def')){
this.value = '';
}
},
blur: function(){
if(this.value == ''){
this.value = $(this).data('def');
}
}
})
});
basically all fields which had the class set-default will act as you like. You can always change the selector to $('#form input') but I think it's not useful.
HTH
I have the following HTML/JS that shows an initial value, removes it when you click in the input field, and then re-populates it with the original value if you don't enter anything.
I need to do this on multiple input fields on the same page and thus would like to turn it into a jQuery function that I could then apply to any input field with a certain class.
<input type="text" name="search" value="Search by name" onfocus="if (this.value == 'Search by name') {this.value = '';this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Search by name';this.style.color = '#aaa';}" />
Firstly, make your life easier and give the input a class:
<input type="text" class="search" name="search">
You can use an attribute selector:
$(":text[name='search']")...
but this is much faster:
$("input.search")...
and then use this:
$(function() {
$("input.search").focus(function() {
this.defaultval = this.defaultval || $(this).val();
if ($(this).val() == this.defaultval) {
$(this).val("").css("color", "#000");
}
}).blur(function() {
if ($(this).val() == "") {
$(this).val(this.defaultval).css("color", "#AAA");
}
});
});
$(":text[name='search']")
.focus(function(){
if ($(this).val() == 'Search by name')
$(this).val("").css("color", "black");
})
.blur(function(){
if ($(this).val() == "")
$(this).val("Search by name").css("color", "#aaa");
});
Turn it into a plugin
$.fn.inputMagic=function(text){
return this.each(function(){
var text=$(this).val()||text||''
$(this).focus(function(){
if ($(this).val() == text){
$(this).val("").css("color", "black");
}
}).blur(function(){
if ($(this).val() == ""){
$(this).val(text).css("color", "#aaa");
}
});
});
}
Then you can call it like this
$('input.search').inputMagic('Search by name').show();//and continue to chain
untested
jQuery(function () {
jQuery("input[type=text]").bind("focus",function(e){
var input = e.target;
input.defaultval = input.defaultval || input.value;
if(input.value==input.defaultval) {
input.value = "";
input.style.color = '#000';
}
}).bind("blur",function(e){
var input = e.target;
if(input.value == '') {
input.value = input.defaultval;
input.style.color = '#aaa';
}
})
});
edit: this seems to be a more general solution than the others. It takes as default text whatever happens to be in the input field first. Though I don't bother wrapping the event target in a jquery to alter the CSS.