Append values to a textbox while clicking button - javascript

I'm trying to make a calculator using jquery. But i don't know how to append values to the textbox when clicking each calulator buttons. I had tried with the following code.
$(document).ready(function () {
$("input[type=button]").on({
click: function () {
var nn = $(this).val();
$("#text-box-id").val(nn);
}
})
});
Please help me to solve this scenario.

Concate your value with textbox value to avoid replace.
$("input[type=button]").on({
click: function () {
var nn = $(this).val().toString();
var txtval=$("#text-box-id").val().toString();
$("#text-box-id").val(txtval + nn);
}
})

I am not sure I understand exactly but I think what I understand is that you want to just add more numbers rather than override?
$(document).ready(function () {
$("input[type=button]").on({
click: function () {
var nn = $(this).val();
$('#text-box-id').val($('#itext-box-id').val() + nn);
}
})
});

Related

How to get onclick event for jQuery Chosen drodpown listbox?

Hi I am developing one jquery application. I ghave one dropdownbox with jquery choosen.
$(function () {
$(".limitedNumbSelect").chosen();
});
This is my dropdown and binding values from database.
<b>Awarded To:</b> <asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>
I am trying to get click event for the above dropdown. As soon as i click on the dropodwn i want to fire a alert before loading any options.
$('#ddlvendorss').click(function (e) {
alert("I am going crazy");
});
In the below code checkedValues arrays contains some values(values present in dropdownlistbox). As soon as i click on the drodpown i ant to hide those values. But below code doesnt work.
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
Above code does not work. May I get some advise on this? Any help would be appreciated. Thank you.
Chosen hides the select element, thus you are not actually clicking the element. However you can use chosen:showing_dropdown event
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
alert('No need to go crazy');;
});
Fiddle
If you want to hide options, You can use
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
//Find options and hide
$(this).find('option:lt(3)').hide();
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
Fiddle
As per OP's code
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
//Get all options
var options = $(this).find('option');
//Show all
options.show();
//Hide based on condtion
options.filter(function () {
return checkedValues.indexOf($(this).val()) === -1;
});
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));

Getting values of each row of a html table and storing in a variable to be used later

On the click event of a button I am reading the rows of a html table
and all I get with the alert is shown in the attached image.
I want to be able to get the value highlighted in yellow and store in a variable.
How can I achieve that?
$(document).on("click", "#AMeter", function () {
$('#Meters1 .numval').each(function () {
alert($(this).html());
});
});
You can use find() to get the input within #AMeter and then val() to get its value:
$(document).on("click", "#AMeter", function () {
$('#Meters1 .numval').each(function () {
var numval = $(this).find('input').val();
// use numval here...
});
});
Alternatively, if you want to build an array of all the .numval values in the row, you can use map():
$(document).on("click", "#AMeter", function () {
var values = $('#Meters1 .numval input').map(function () {
return this.value;
}).get();
// use values here...
});

div rel click function?

I am getting trouble to make a click function for multiple divs which have same rel value.
JavaScript:
$("[rel=begenici]").click(function () {
var postu = $(this).attr(id);
alert(postu);
});
HTML:
<div rel='begenici' id='2654'></div>
Where am I doing a mistake?
You need to wrap the attribute name in quotes
var postu = $(this).attr('id');
Complete Code:
$("[rel='begenici']").click(function () {
var postu = $(this).attr('id');
alert(postu);
});
You missed the single quotes
$("[rel='begenici']").click(function () {
var postu = $(this).attr('id');
alert(postu);
});
And not just one the first line (Thanks Tushar :))

Jquery Show Input Text Based On Input Value

I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});

javascript not working -> Selected

With help I've made this function that posts the value of a selected option in my html form.
In this jsfiddle you can see the code and html.
anyone knows why this is not working? : http://jsfiddle.net/qqcAT/1/
$(document).ready(function() {
$("#catid").change(function() {
var src = $(this).val();
$(".test").html($(this).val());
});
});
You're missing a } , indent your code next time.
By looking at your Fiddle you will need something like this. I have not tested but should display the select text in division below it:
$(function () {
$("#catid").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div.test").text(str);
})
.trigger('change');
});

Categories