How to reset <INPUT> and <TEXTAREA> values with jquery click() if these elements are not part of any <FORM>?
You can reset the values using defaultValue property, both HTMLTextAreaElement and HTMLInputElement support the property, the default value is the value as originally specified in HTML that created these objects.
$('#reset').on('click', function() {
$('input, textarea').val(function() {
return this.defaultValue;
});
});
In case that you only want to reset the values of inputs and textareas that don't belong to a form element you can use .filter() method:
$('#reset').on('click', function() {
$('input, textarea').filter(function() {
return !this.form;
}).val(function() {
return this.defaultValue;
});
});
If the form property is null the input/textarea is not descendant of a form element.
http://jsfiddle.net/E2tbk/
This works:
var elements = $('input,textarea');
$('button').click(function () {
elements.each(function () {
if (!this.form) this.value = this.defaultValue;
});
})
Fiddle
use this:
document.getElementById('yourInputID').value = "";
This solution stores the initial values in the data-oldvalue attribute of the element. When you click the restore button it sets the values back to the initial ones.
Some pointed out you should use .html() to set the value of the textarea. I tried this but it did not set the value while .val() did
$("input").each(function() {
$(this).attr("data-oldvalue", $(this).val());
});
$("textarea").each(function() {
$(this).attr("data-oldvalue", $(this).html());
});
$("button").click(function() {
console.log($(this).attr("data-oldvalue"));
$("input").each(function() {
$(this).val($(this).attr("data-oldvalue"));
});
$("textarea").each(function() {
$(this).val($(this).attr("data-oldvalue"));
});
});
See: http://jsfiddle.net/zvPK7/
Try this:
$('#click').on('click', function() {
$("input[type='text'], textarea").val('');
});
Try This...
$('#btnID').click(function(){
$('#FormID')[0].reset();
});
Related
I am trying to get change value of input when its values are changed.
http://jsfiddle.net/stackmanoz/694W9/
$(function () {
$('.color-iris').iris();
$('#color').on('change', function () {
console.log($(this).val());
});
});
I am using color-picker and after the input's value has changed with the new color value, I want to get its value.
But this is not going well.
Please guide me through this
Use option change
$(function () {
$('.color-iris').iris({
change: function () {
console.log(this.value);
}
});
});
DEMO
Change event would be fired only when that textbox value changes as wel as focus is getting blurred out from the particular text box,so in this context you have to use input
$(function () {
$('.color-iris').iris();
$('#color').on('input', function () {
console.log($(this).val());
}) ;
});
DEMO
http://jsbin.com/jejujizi/1/edit
$(document).ready(function() {
$(".cs").on('click', function() {
$(".newclones").append("<div class='container'>").append($(".toclone .clone").clone()).append("<button class='rem'>Delete</button>");
$(".rem").on('click', function() {
$(this).prev().remove();
$(this).remove();
});
});
});
Cloning a select element isn't the problem, cloning the select element with a changed value is the problem. (as you can see in my fiddle)
Why is it not cloning the changed value, and how can this be solved?
Per the clone() docs:
For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made to a select) is not copied to the cloned elements.
Instead, you simply need to copy the value yourself after you've cloned the element:
$(document).ready(function() {
$(".cs").on('click', function() {
var toClone = $('.toclone .clone');
var toCloneClone = toClone.clone().val(toClone.val());
$(".newclones").append("<div class='container'>").append(toCloneClone).append("<button class='rem'>Delete</button>");
$(".rem").on('click', function() {
$(this).prev().remove();
$(this).remove();
});
});
});
http://jsbin.com/qocuyuhi/1/
I need to add all of the data attributes in an array
$('.lightbox-trigger').click(function (e) {
e.preventDefault();
e.stopPropagation();
var image_src_arr = $('.lightbox-trigger').data('img-src');
console.log(image_src_arr);
});
http://jsfiddle.net/v7E5g/2/
but I get data attribute only the first element.
What's wrong? How can I make it work ?
You can use .map(), when you use .data() as a getter then it will return the value from the first object in the calling set of objects
$('.lightbox-trigger').click(function (e) {
e.preventDefault();
e.stopPropagation();
var image_src_arr = $('.lightbox-trigger').map(function () {
return $(this).data('img-src');
}).get()
console.log(image_src_arr);
});
Demo: Fiddle
You need to use $(this) to target current clicked div with class lightbox-trigger:
var image_src_arr = $(this).data('img-src');
Updated Fiddle
If you want to retrieve an array of src attribute then you can use .map():
var image_src_arr = $('.lightbox-trigger').map(function () {
return $(this).data('img-src');
}).get();
Updated Fiddle
I have a button :
<button id="btn1">55</button>
And so I change the button value to test2
$('#btn1').text("22");
I want to show a background-picture if the buttons oldValue greater then the newValue.
How can I get the old value from this button?
"I have over 100 buttons and they are changing dynamically."
Update: Isn't there an event that fires before it changes?
You could use jQuery's .data() call and store it for retrieval as needed.
For instance, say you HTML is:
HTML
<form action="#" method="GET">
<input type="text" value="369" />
<button id="btnID">420</button>
</form>
You could easily first gather the data needed and asign it to each element:
Opening script
$("button") // would simply grab all buttons, you can use whatever css selector
.each(function(i) {
$(this).data("prevVal", parseInt($(this).text()));
});
You can then later check this value against a new value as needed:
... some change function
$('#btn1').text("22");
if ($('#btn1').data("prevVal") > 22) {
// do work
}
$('#btn1').data("prevVal", 22)
Just FYI
If you were using inputs instead it would be easier:
$("input").each(function(i) { $(this).data("prevVal", parseInt($(this).val())) })
.on("change", function(e) {
var newVal = parseInt($(this).val());
if ($(this).data("prevVal") > newVal) {
// do work
};
$(this).data("prevVal" newVal);
});
Or if you wanted to maintain a list of values:
$("input").each(function(i) {
$(this).data("vals", new Array());
$(this).data("vals").push(parseInt($(this).val()));
})
.on("change", function(e) {
$(this).data("vals").push(parseInt($(this).val()));
var vals = $(this).data("vals");
if (vals[vals.length-1] > vals[vals.length-2]) {
// do work
};
});
You need to compare it before changing value.
For example
$('#btn1').text(function (index, old) {
if (parseInt(old) > 22) {
//change background image
}
return "22";
});
FIDDLE
Unless you preserve it before the change you cannot get the old value. The change event is fired after the value has been changed already.
Not sure where you want the old value.. but if it while changing the text then use the function to change the text.
$('#btn1').text(function (index, oldvalue) {
console.log(oldvalue);
return "test2";
});
<button id="btn1">test1</button>
$(document).ready(function(){
var i=1;
$('#btn1').click(function(){
$(this).data('old', $.trim($(this).text())).text('btn'+(++i));
alert( $(this).data('old'));
});
});
for demo
use jQuery.data() to store data associated with the specified element and you will be able to get it just by accessing the same element.
Here's the link to show you how to use jQuery.data();
Here's the code using a more convenient .data() link
Set
$("#btn1").data("oldVal", $("#btn1").html());
Get
$("#btn1").data("oldVal");
Fiddle
this:
$("#registrant input").val('');
will clear all the <input> inside the div #registarnt.
But, how can i exclude the input with particular type? (like "submit")
$('#registrant input[type!="submit"]').val('')
or better still
$('#registrant input[type="text"]').val('')
You can use the "attribute equals" selector to match on the type attribute. For example:
$("#registrant input[type='text']").val('');
Here is a complete solution that will restore the original value if the field is still empty on blur. This can be used site-wide.
$(document).ready(function(){
var clearInput = '';
// on focus: store the original value, then clear it
$('input[type="text"]').focus( function() {
clearInput = $(this).val();
$(this).val('');
});
// on blur: if the value is still empty, display the original value
$('input[type="text"]').blur(function() {
if($(this).val()=='') {
$(this).val(clearInput);
}
});
});
If you would like to exclude only one input type you could change the following lines:
$('input[type="text"]').focus( function() {
$('input[type="text"]').blur(function() {
to something like this:
$('input').not('input[type="submit"]').focus( function() {
$('input').not('input[type="submit"]').blur(function() {
You can use these selectors to filter input types:
:button
:checkbox
:radio
:submit
:text
So in your case (also using :not as you want to skip submit):
$("#registrant input:not(:submit)").val('');
or
$("#registrant input").not(":submit").val('');
http://jsfiddle.net/K6WUu/