Develop Reference

I want to get all textbox values using jquery and make them all null on onchange event

I'm trying to get all values within a form using jQuery
and want to set all those as a value null.
Now I have text also and hidden fields also.
<input id="MYNAME_04cd1197-7147-4b82-9b0a-c44846405150"
type="text"
value="MyName"/>
<input id="MYID_12cd1112-7147-4b82-9b12-c412846125112"
type="hidden"
value="f208b514-133b-4d6d-8299-f5f002e131a0"/>
There are many textboxes like this.
May I know what is the syntax to get all these textboxes and set null as value to [type="text]"
and 00000000-0000-0000-0000-000000000000 to [type=hidden] inputs.
I tried something like:
function resetAllValues() {
debugger;
$('#TransactionGrid').find("input:text").each(function (index) { });
}

You can do something like this:
$('form > input').val('');
But this everyone will tell to you in different ways.
What you should know is:
Your html element must have the attribute NAME, if you want to get all the values from the form(as you commented). You can't use $('#frm1').serialize() for example.

try this:
$('#TransactionGrid').find("input[type='text']").each(function (index) {
//get value
var val = $(this).val();
//set this value to ''
$(this).val('');
//to hide
$(this).hide();
});

$('#TransactionGrid').find("input[type=\'text\']").each(function (index) {
//Setting the value to null i.e '';
$(this).val('');
//if u want to hide it u can use .hide...
$(this).hide();
});

Try with this
function resetAllValues() {
$("input:text", "#TransactionGrid").val('');
$("input:hidden", "#TransactionGrid").val('00000000-0000-0000-0000-000000000000');
}

Find All the controls in a form using jQuery or javascript

I am a starter in jQuery . How to find all the controls in a form using jQuery?
I know the code is like this
function submitValidator(){
$("form :input").each(function(){ });
I want to access their Id's and need to apply regular expressions
Some of the text boxes are numeric remaining will be alphanumeric. Is there any method to sort them to apply regular expressions?

You can add a new property data-charSet in HTML
<input type="text" id='amt' data-charSet='numeric'>
add which all controlles you want to add after the "form :"
function submitValidator(){
$("form :text, textarea").each(function(){
var NumericOnly = "^[0-9]*$";
var svId = $(this).attr('id');
if($(this).attr('data-charSet') == 'numericonly')
{
if(!$(this).val().match(NumericOnly)) {
alert("numeric");
eval("$('#" + svId +"').focus();")
return false;
}
}
});
}

It's jQuery, not j-query.
Anyway...
You can do it like this:
$("form :input").each(function (index, element) {
var id = $(this).attr("id"); // returns the object ID
var value = $(this).val(); // returns the object value
// etc
});

use
function submitValidator() {
$("form :input").each(function(){
var id = $(this).attr('id'); // here you got id
});
} // here missed brace

you need not to get Id if you can get object
function submitValidator() {
$("form :input ,form textarea").each(function(){
$(this).yourfunction();
});
}
:input will only give you tags with input, textarea will be missed so need to add that as well

I think you want to do something like this:
$("form").find("input").each(function(){
var currentElementsId = $(this).attr("id");
if(currentElementsId.match(/^regex/)){
//do something
}
});
if you want to get more than only input elements inside the form tag, you can put multiple selectors in the find() function like this; find("input,select,textarea,.className,[type='valueOfAttributeType']") and obviously any other selectors

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

If on .focusout form contains no value, revert to original value?

I'm trying to get my <input.../> fields to go blank on focus, and if on focus out they're still blank, revert them to their original values.
I would've thought this would work, but apparently not:
$('input').focus( function() {
var init_value = $(this).val();
$(this).val('');
});
$('input').focusout( function() {
var new_value = $(this).val();
if(new_value == "") {
$(this).val(init_value);
}
});
Any alterations/advice to get it working would be most appreciated ;)!

You should consider using the HTML5 placeholder attribute as a first option.
http://diveintohtml5.ep.io/forms.html#placeholder
With jQuery, you could modify your original script like this:
$('input').focus(function() {
$(this).val('');
});
$('input').focusout(function() {
if($(this).val('')){
$(this).val('Enter something');
}
});
Example: http://jsfiddle.net/jasongennaro/8bJcQ/
EDIT
Here is a revised script to deal with the situation as mentioned in your comment:
As for the jQuery option, that simply wouldn't do as it needs the
original value= value. I have perhaps 8 different text fields, the
instructions for which are the value, e.g. "Enter your email address",
"Enter your url", etc :(.
$('input').each(function(){
var a = $(this).attr('value');
$(this).focus(function() {
$(this).val('');
});
$(this).focusout(function() {
if($(this).val('')){
$(this).val(a);
}
});
});
Example 2: http://jsfiddle.net/jasongennaro/8bJcQ/3/

There is an easier method of doing this assuming a modern browser is used. Simply add the attribute placeholder="some text" and the browser will handle all this for you. If you must support older browsers, try this:
var init_value;
$('input').focus( function() {
init_value = $(this).val();
$(this).val('');
});
$('input').blur( function() {
var new_value = $(this).val();
if(new_value == "") {
$(this).val(init_value);
}
});
Your problem was the scope of init_value. You defined it inside an anonymous function, and could not access that value from a second anonymous function. To fix this you simply need to define init_value outside the scope of each event handler.
Also notice how I used .blur() instead of .focusout(). The jQuery API explains the difference between the two.

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)