I want Detect the largest number in inputs and done alert for it, How is it in following code by jQuery?
Example: http://jsfiddle.net/3cTqD/
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<button>Click Me</button>
$('button').live('click', function(){
$('input').each(function(){
var val = $('this').val();
alert(val); // i want done alert largest number from input
})
})
$( 'button' ).live( 'click', function(){
alert(
Math.max.apply( Math, $( 'input' ).map( function(){
return 0|this.value;
}).get())
);
} );
$('button').live('click', function(){
var i = 0;
$('input').each(function(){
var val = $(this).val();
if(val > i) i = val;
});
alert(i);
});
Related
I need help with get value from checkbox with jQuery.
$( document ).ready( function() {
var value_array = [];
$( document ).on( 'change', '.radio-group input', function(e) {
var $this = $( this ),
value = $this.val();
value_array.push( value );
console.log( $.unique( value_array ) );
$( '#out' ).html( $.unique( value_array ).join() )
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-group">
<label>
<input type="checkbox" name="cat_1" value="90" />
Category 1
</label>
<label>
<input type="checkbox" name="cat_2" value="43" />
Category 2
</label>
</div>
<div id="out">
</div>
If category 1 checked, getting value (correct).
If category 2 checked, getting value (correct).
If category 1 un-checked, getting value again (false, i don't want
it).
If category 2 un-checked, getting value again (false, i don't want
it).
I want like this:
If category 1 un-checked, remove the value from output array.
If category 2 un-checked, remove the value from output array.
Check if checkbox is checked, add value into array if it is, remove if it's not.
$(document).ready(function() {
var value_array = [];
$(document).on('change', '.radio-group input', function(e) {
var $this = $(this),
value = $this.val();
if ($this.prop('checked')) value_array.push(value);
else value_array.splice(value_array.indexOf(value), 1);
console.log($.unique(value_array));
$('#out').html($.unique(value_array).join())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-group">
<label>
<input type="checkbox" name="cat_1" value="90" />
Category 1
</label>
<label>
<input type="checkbox" name="cat_2" value="43" />
Category 2
</label>
</div>
<div id="out">
</div>
You don't have to declare an array to begin with (which will pollute your namespace anyway). You can simply select for all the checkboxes, use .filter() to keep those that are checked, and the use .map() to return their values, all done within the callback of the onchange event listener:
// Get values of checked checkboxes
var value_array = $('.radio-group input').filter(':checked').map(function() {
return this.value;
}).get();
console.log(value_array);
Note: Remember to chain .get() at the end of .map(), because it will return a jQuery object/collection and you have to convert it into an array.
See proof-of-concept example below:
$(document).ready(function() {
$(document).on('change', '.radio-group input', function(e) {
var $this = $(this),
value = $this.val();
// Get values of checked checkboxes
var value_array = $('.radio-group input').filter(':checked').map(function() {
return this.value;
}).get();
console.log(value_array);
$('#out').html(value_array.join())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-group">
<label>
<input type="checkbox" name="cat_1" value="90" />
Category 1
</label>
<label>
<input type="checkbox" name="cat_2" value="43" />
Category 2
</label>
</div>
<div id="out">
</div>
You can just fetch an array of all checked values at once:
$( document ).ready( function() {
var value_array = [];
$( document ).on( 'change', '.radio-group input', function(e) {
value_array = $('.radio-group input:checked').map(function() {
return $(this).val();
}).get();
console.log( $.unique( value_array ) );
$( '#out' ).html( $.unique( value_array ).join() )
});
});
JSFiddle
First, you should understand that the "this" value refers to the object that owns the code. In your case, the "this" in
$( document ).on( 'change', '.radio-group input', function(e)
refers to the "document" itself and not the ".radio-group input". Instead you should do the following so that the "this" refers to your checkbox.
var arr = [];
$(".radio-group input").change(function(){
var val = $(this).val();
//push the value into the array if the checkbox is checked
if($(this).prop("checked")==true)
{
arr.push(val);
}
//otherwise, remove the value from the array
else{
//fetch the index of the value in the array
var index = arr.indexOf(val);
//remove that value from the index
arr.splice(index,1);
}
});
(web designing) whatever the number , i enter in form field, i want that to be stored in a variable. When the user changes the value in the form field , value stored in the variable needs to be updated. How to do that ?
Try this:
<input type = "text" id = "id1">
<script>
$("#id1").change(function(){
var a = $("#id1").val();
alert(a);
});
</script>
there is a jsbin that demonstrates required functionality
jsbin
or
<form>
<input id="input" type="number">
</form>
<button id="button">Log Value</button>
<script>
var input = document.getElementById('input');
var button = document.getElementById('button');
var val;
input.addEventListener('change', function (event) {
val = +event.target.value;
});
button.addEventListener('click', function () {
console.log('Value:', val);
});
</script>
<form>
<input type="text" id="inputid" value="test"/>
<button type="submit">submit</button>
</form>
<script>
$( document ).ready(function() {
var input =$('#inputid');
var saveVar;
// input.change(function(){
// console.log(input.val());
// });
input.on('keyup', function(ev){
saveVar=input.val();
console.log(saveVar);
});
});
</script>
I have the following function and all i am trying to do is get the value out of the form field.
$( ".searchbutton" ).click(function() {
var tc = $(this).closest("form input[name='searchbox']").val();
alert(tc);
return false;
});
The alert keeps telling me "Undefined". I have treid closest, parent, parents, find, etc. I don't know what im doing wrong. Im clicking the submit button and all i want in return is the value in the search box. Please help.
html
<form action="/index.php" method="get" class="qsearch" >
<input type="text" id="fsearch" name="searchbox" >
<input class="searchbutton" type="submit" value="Submit">
</form>
Try this:
$( ".searchbutton" ).click(function() {
var tc = $(this).closest("form").find("input[name='searchbox']").val();
alert(tc);
return false;
});
Update
Yep, it work with your HTML - see here http://jsfiddle.net/qa6z3n1b/
As alternative - you must use
$( ".searchbutton" ).click(function() {
var tc = $(this).siblings("input[name='searchbox']").val();
alert(tc);
return false;
});
in your case. http://jsfiddle.net/qa6z3n1b/1/
Try easiest way:
<script>
$( ".searchbutton" ).click(function() {
var tc = $('#fsearch').val();
alert(tc);
return false;
});
</script>
How about just using $('input[name="searchbox"]') selector:
$( ".searchbutton" ).click(function() {
var tc = $('input[name="searchbox"]').val();
alert(tc);
return false;
});
/*get value of non count list,using jquery */
<input type="text" id="loc-51-0" value="ahmed">
<input type="text" id="loc-51-0" value="ahmed">
<input type="text" id="loc-51-1" value="mohamed">
<button onclick="save(51)">
<input type="text" id="loc-52-0" value="alaa">
<input type="text" id="loc-52-1" value="karim">
<button onclick="save(52)">
function save(id){
var x="loc-"+id;
$('input[id^="+x+"]').each(function() {
alert( this.value ); // $(this).val();
});
}
I need to put variable x into loop but it not working
you are having a Syntax Error change this:
$('input[id^="+x+"]').each(function() {
alert( this.value ); // $(this).val();
});
to this:
$('input[id^="'+x+'"]').each(function() {
alert( this.value ); // $(this).val();
});
Try this:
$('input[id^="'+ x +'"]').each(function() {
alert( this.valule );
}) <- you're missing this `)`
also concatenation should be like above.
$('input[id^="+x+"]') should be like $('input[id^="'+ x +'"]')
You need to concatenate your value properly:
$('[id^="'+ x +'"]').each(function() {
alert(this.value);
});
Also, because id is unique, you just need [id^= instead of input[id^=
I have few text fields like SSN , phone number and email id. I would like to do something like onfocus it should display the whole content of that input box and on blur it should mask the content back to something (say asterix).Thanks in advance
You could switch the type of the <input> element between password and text in both events. See this example fiddle.
HTML
<input type="password" id="target" />
JS
<script>
var inp = document.querySelector( '#target' );
inp.addEventListener( 'focus', function(){
inp.type = 'text';
});
inp.addEventListener( 'blur', function(){
inp.type = 'password';
});
</script>
Try it like this:
<input type="text" id="emailId" name="emailId" />
Then, do a:
var emailIdValue = "";
$( document ).ready( function() {
emailIdValue = $( '#emailId' ).val();
$( '#emailId' ).val( "********" );
$( '#emailId' ).focus( function() {
$( this ).val( emailIdValue );
} ).focusout( function() {
emailIdValue = $( this ).val();
$( this ).val( '********' );
} );
} );
You could simply use <input type="password" /> if you want to do it simple.