Develop Reference

jQuery get / set value of textbox value in a repeater

I have a repeater with textboxes ID="txtBomName" in an ascx page with a value retrieved from datatable on pageload.
the end user can change the value, must be not be null/empty.
I have jquery to check if null/empty on change or blur, produce alert if null then I would like the null value set back to original else set value as user entered.
This does work if, I use the generated control ID i.e:
$("#p_lt_ctl02_pageplaceholder_p_lt_zoneMainContent1_BOM_rptBoms_ctl00_txtBomName)"
this obviously only works for the the first textbox on the page, as the "ct100" part of the ID changes for each box.
code:
$(document).ready(function () {
$("#p_lt_ctl02_pageplaceholder_p_lt_zoneMainContent1_BOM_rptBoms_ctl00_txtBomName").change(function () {
var oldVal = this.getAttribute('value');
if (this.value == null || this.value == "") {
alert("Please ensure the name is not empty");
$("#p_lt_ctl02_pageplaceholder_p_lt_zoneMainContent1_BOM_rptBoms_ctl00_txtBomName").val(oldVal);
}
else {
$("#p_lt_ctl02_pageplaceholder_p_lt_zoneMainContent1_BOM_rptBoms_ctl00_txtBomName").val(this.value);
}
});
});
so, I changed the code to look for id$=txtBomName and set an alert to (this.id) the id for each box shows correctly, how can I set the value of the textboxes using (this.id).val(oldVal); ?

You need to use:
$(this).val(oldVal);
'this' is a reference to the current object i.e. textArea the abouve code will set the value of the textArea

Try this code
$(document).ready(function () {
// The simplest way is to save the original value using data() when the
// element gets focus.
$("input[id$='txtBomName']").on('focusin', function(){
$(this).data('val', $(this).val());
});
$("input[id$='txtBomName']").change(function () {
var txtBox=$(this);
var prev = txtBox.data('val');
var current = txtBox.val();
if (current) {
txtBox.val(current);
}
else {
alert("Please ensure the name is not empty");
txtBox.val(prev);
}
});
});

How to Change Specific Text in an Inputbox Directly on User Input?

I have an input field in my code: <input type=text name=code id=code>.
What I want to do is to convert a specific text to another one as the user types in the field.
Let me explain more. When the user enters 31546 in the input, I want that text to directly convert to HELLO.
I know this can be done using JavaScript/jQuery, but I can't have any ideas on how to achieve this. How can I?
P.S. If it's easier to work with a textarea, I'm ready to change my input to a textarea.
EDIT: I got a code from this StackOverflow post which detects any changes to an element,
$('.myElements').each(function() {
var elem = $(this);
// Save current value of element
elem.data('oldVal', elem.val());
// Look for changes in the value
elem.bind("propertychange change click keyup input paste", function(event){
// If value has changed...
if (elem.data('oldVal') != elem.val()) {
// Updated stored value
elem.data('oldVal', elem.val());
// Do action
....
}
});
});
but I am not sure how to utilise this for what I want.
Please bear with me as I am yet a fledgling in this domain.
Thank you.

One option is to set up a keyup event for your input and then replace the value as the user types. For example:
$('input').keyup(function () {
var val = $(this).val();
var newVal = val.split('31546').join('HELLO');
if (newVal !== val) {
$(this).val(newVal);
}
});

You can use keyup event as,
$(document).on('keyup', '#code', function() {
$('#code').val(convertedValue($('#takeInput').val()));
})
function convertedValue(val) {
return 'hello';
}

This may help you :--
<input type="text" id="code">
$('#code').bind('change click keyup onpaste', function(ele){
var origVal = ele.target.value;
if(origVal.indexOf("123") !== -1){
ele.target.value = origVal.replace("123","Hello");
}
});

How to get the value of a select tag which doesn't change on hover?

I'm using jQuery's .val() function to read the value of a <select> tag.
It seems that, at least in Firefox, .val() returns the value of the option the user is currently hovering over. You can see this behaviour at this jsfiddle.
Is there any way using jQuery or pure javascript to get the value that is shown in the select box, i.e. the last value that actually fired a change event?
Original Idea
function foo() {
var value = $('#select').val();
// do something that depends on value
}
The problem with this is that I only want foo() to use the value that is currently selected. By selected I mean the option that was clicked. In the fiddle, you can see that this value changes as you hover over options.
Alternative
var value;
$('#select').change(function() {
value = $('#select').val();
}
function foo() {
// do something with value
}
This is OK, but the information appears to exist in the DOM, since the last clicked value is displayed in the select box.
So, my question is, is it possible to get the last clicked option from the DOM?

You can do this on the change event instead of by interval
UPDATED CODE based on comments below
$('#bar').on('change', function(){
var $t =$(this) , value=$t.val();
$t.attr('data-answer', value);
});
setInterval(function(){
$('#foo').text($('#bar').attr('data-answer'));
},1000);
your select would have this attribute on it
<select id="bar" data-answer="" >
//options here
</select>
Or using .data method:
$('#bar').on('change', function(){
var $t =$(this) , value=$t.val();
$t.data('answer', value);
});
setInterval(function(){
$('#foo').text($('#bar').data('answer'));
},1000);

Sounds like you're looking for focus()
$("select").focus(function () {
var focusValue = this.value;
$('#foo').text(focusValue);
})
You can chain the event listener focus with change to find the current value and then the selected.
$("select").focus(function () {
var focusValue = this.value;
$('#foo').text(focusValue);
}).change(function() {
var changeValue = this.value
$('#foo').text(changeValue);
});
Here is a jsFiddle Demo

How to know with jQuery that a "select" input value has been changed?

I know that there is the change event handling in jQuery associated with an input of type select. But I want to know if the user has selected another value in the select element ! So I don't want to run code when the user select a new element in the select but I want to know if the user has selected a different value !
In fact there are two select elements in my form and I want to launch an ajax only when the two select elements has been changed. So how to know that the two elements has been changed ?

You can specifically listen for a change event on your chosen element by setting up a binding in your Javascript file.
That only solves half your problem though. You want to know when a different element has been selected.
You could do this by creating a tracking variable that updates every time the event is fired.
To start with, give your tracking variable a value that'll never appear in the dropdown.
// Hugely contrived! Don't ship to production!
var trackSelect = "I am extremely unlikely to be present";
Then, you'll need to set up a function to handle the change event.
Something as simple as:-
var checkChange = function() {
// If current value different from last tracked value
if ( trackSelect != $('#yourDD').val() )
{
// Do work associated with an actual change!
}
// Record current value in tracking variable
trackSelect = $('#yourDD').val();
}
Finally, you'll need to wire the event up in document.ready.
$(document).ready(function () {
$('#yourDD').bind('change', function (e) { checkChange() });
});

First of all you may use select event handler (to set values for some flags). This is how it works:
$('#select').change(function () {
alert($(this).val());
});​
Demo: http://jsfiddle.net/dXmsD/
Or you may store the original value somewhere and then check it:
$(document).ready(function () {
var val = $('#select').val();
...
// in some event handler
if ($('#select').val() != val) ...
...
});

First you need to store previous value of the selected option, then you should check if new selected value is different than stored value.
Check out the sample!
$(document).ready(function() {
var lastValue, selectedValue;
$('#select').change(function() {
selectedValue = $(this).find(':selected').val();
if(selectedValue == lastValue) {
alert('the value is the same');
}
else {
alert('the value has changed');
lastValue = selectedValue;
}
});
});​

You can save the value on page load in some hidden field.
like
$(document).ready(function(){
$('hiddenFieldId').val($('selectBoxId').val());
then on change you can grab the value of select:
});
$('selectBoxId').change(function(){
var valChng = $(this).val();
// now match the value with hidden field
if(valChng == $('hiddenFieldId').val()){
}
});

$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
http://docs.jquery.com/Events/change

Using JavaScript or jQuery, how do I check if select box matches original value?

Just wondering if there is any way to check if the value of a select box drop-down matches the original value at the time of page load (when the value was set using selected = "yes") ?
I guess I could use PHP to create the original values as JavaScript variables and check against them, but there are a few select boxes and I'm trying to keep the code as concise as possible!

That's not too hard at all. This will keep track of the value for each select on the page:
$(document).ready(function() {
$("select").each(function() {
var originalValue = $(this).val();
$(this).change(function() {
if ($(this).val() != originalValue)
$(this).addClass('value-has-changed-since-page-loaded');
else
$(this).removeClass('value-has-changed-since-page-loaded');
});
});
});
This will apply a new class value-has-changed-since-page-loaded (which presumably you'd rename to something more relevant) to any select box whose value is different than it was when the page loaded.
You can exploit that class whenever it is you're interested in seeing that the value has changed.

$(document).ready(function() {
var initialSelectValue = $('#yourselect').val();
// call this function when you want to check the value
// returns true if value match, false otherwise
function checkSelectValue() {
return $('#yourselect').val() === initialSelectValue;
}
});
PS. You should use selected="selected" not selected="yes".

On page load, create an array with the initial value of each select box indexed by name:
var select_values = [];
$(document).ready(function() {
$("select").each(function() {
select_values[$(this).attr('name')] = $(this).val();
});
});
later when you need to check if a value has changed:
function has_select_changed(name) {
return $("select[name="+name+"]").val() != select_values[name];
}

First, a snippet:
$('select').each(
function(){
if( this.options[ this.selectedIndex ].getAttribute('selected') === null ){
alert( this.name +' has changed!')
}
});
Now the explanation:
Assuming selectElement is a reference to a <select /> elementYou can check which option is selected using
selectElement.selectedIndex
To get the <option /> element which is currently selected, use
selectElement.options[ selectElement.selectedIndex ]
Now when you know which option element is selected you can find out if this element has the selected='selected' attribute (as in the source code, it doesn't change - this is not the same as .selected propery of a DOM node, which is true for the currently selected option element and changes when the selection is changed)