Is jquery good for forms processing?

JavaScript
1

I think jquery is great for display enhancement. But I’m having difficulties trying to use it for form processing.

Say for instance, I have a dynamic select field

<select id=“edit-items-0-qty”>…</select>
<select id=“edit-items-1-qty”>…</select>
<select id=“edit-items-2-qty”>…</select>
…

How would I use jquery to determine if the qty of each select is different from initial page load?

I know I could store the initial values with:


$(document).ready(function(){
  var ini_value = $('select[id~=qty]');
});

But I don’t know how to proceed check the new value against the initial values which is all inside of ini_value.

Purpose: To bold some text should any of the select field qty changed.

Eg: Initial value 1, user changed to 2. Text will bold.
User change value to 3, text remain bold.
User change value back to 1, text will not bold.

2

jQuery does provide data storage, where you can store data that’s associated with a page element, and retrieve it at some later point in time.

http://api.jquery.com/data/

3

Ok, i found the reason, variables passed into .change() is actually the event object.

I just changed to .change(function()) and its taking init_qty from global scope.

Just wondering if there’s any ways to variables into jquery functions instead of taking them from global scope?

4

Thanks a lot pmw57. Learnt a lot more about jquery array manipulations. :slight_smile:

5

Yep, although the arr data will then be duplicated across every single element that matches the selector.

It can be easier to manage when one element is used to store the data, for example if you have a form:


<form id="items">
    ...
</form>

You can use the form to store the data


$('#items').data(someData);

which you can then easily access from any form-related code:


$('#items select').change() {
    var form = this.form,
        data = form.data();
    ...
}
6

Interesting…so I’ll be using something like this?


var arr = new Array('a', 'b', 'c');

$('.selector').data(arr).change(function(){
 alert($('.selector').data(arr)[0]) // to print a?
});
7

Thanks for the effort. But sorry to say I’m not sure how to implement this. Tried opening this in FF but nothing happens when I select the values.

What is $(evt.target)? The select box?

8

Here is the simplest way that I can think of, to do this with jQuery (and CSS)


.changed {
    font-weight: bold;
}



$(function () {
  $('select[id$=qty]').change(function () {
    // get currently selected option
    var option = $('option[selected]', this)[0];
    
    // check if it's the default
    if (option.defaultSelected) {
        $(this).removeClass('changed');
    } else {
        $(this).addClass('changed');
    }
  });
});
9

Something like this I’m assuming?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Select Menu Change Weight</title>
	
	<script type="text/javascript" src="jquery-1.4.2-min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

		$('select[id $= qty]').change((function() {

			// array of select menus with default values
			var selects = [];
			
			// collect a select menus with default values
			$('select[id $= qty]').each(function(index,el) {
				selects.push({
			 		element:el
					,value: $(':selected',el).val()
				});
			});
			
			// function to get select default value
			var getSelectDefault = function(select) {
				for(var x in selects) {
					if(selects[x].element === select) {
						return selects[x].value;
					}
				}
			};
	
			// onchange callback
			return function(evt) {
		
				if($(':selected',evt.target).val() !== getSelectDefault(evt.target) ) {
					$(evt.target).css({fontWeight:'bolder'});
				} else {
					$(evt.target).css({fontWeight:'normal'});
				}
		
			};

		})());

	});
	</script>
	
</head>
<body>


<select id="edit-items-0-qty">
	<option value="1" selected="selected">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>

<select id="edit-items-1-qty">
	<option value="1" selected="selected">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>

<select id="edit-items-2-qty">
	<option value="1" selected="selected">1</option>
	<option value="2">2-</option>
	<option value="3">3-</option>
	<option value="4">4-</option>
	<option value="5">5-</option>
</select>

</body>
</html>
10

I had a look at the scripts above. And came out with something of my own. But, I have difficulty in passing in arrays into jquery .change() function.

Say I have this:


// Stores initial value
  $select = $('select[id$=qty]');
  $select.each(function (i, ele) {
    init_qty.push(ele.value);
  });

Then I want to pass this init_qty array into the .change() function:


$('select[id$=qty]').change(function(init_qty) {
    var $select_new = $('select[id$=qty]');
    var new_qty = new Array();
    
    var i = 0;
    $select_new.each(function(i, ele) {
      new_qty.push(ele.value);
    });
    
    for(i in new_qty) {
      if (new_qty[i] != init_qty[i]) {
        console.log(new_qty[i] + '--' + init_qty[i]);
        $('.update_bold').css('font-weight', 'bold');
        changed = true;
      }
      if(!changed) {
        $('.update_bold').css('font-weight', 'normal');
      }
    }
  });

However, init_qty[i] always displays as undefined. A console.log(init_qty); above the .change() function does returns this:
[2], [2] or whatever value.

So am I able to pass arrays, variables into jquery functions? Using jquery 1.2.6

This is my logic: Get an array of initial values. On change, get an array of new values and compare to initial values. Bold if any of them is different, else remove the bold.

11

Did you add JQuery to your local path or change the src to where it is located on your environment? evt.target is the element that fired the event, so yes, it would be the select element.