jQuery not working with Drupal 7 Webform fields.

Hello Experts,

I am trying to do a quick alert on the 'changing' of a textfield using jQuery in Drupal. My theme .info files does have:

scripts[] = info.js

Open in new window

and the .js file is in the same dir as the .info file (for now)

The code in the .js file is:

$(document).ready(function() {
	$('#edit-submitted-num1').change(function() {
		alert('num1 changed!');
	});
});

Open in new window

It's not giving me an alert. Attahed is the simpel webform I created.

Sorta stuck on this simple code.

Modifier1000Asked: 2013-05-13

Who is Participating?

LVL 13

Aaron FeledyDrupal Developer and ConsultantCommented: 2013-05-13

With Drupal you usually need to use "jQuery" instead of "$" to avoid conflicts. Should look more like this:

jQuery(document).ready(function($) {
  $('#edit-submitted-num1').change(function() {
    alert('num1 changed!');
  });
});

Open in new window

More here: http://drupal.org/node/171213

LVL 17

nanharbisonCommented: 2013-05-13

Make sure you choose the text format as PHP code. If that is not a choice, go to the modules page and enable it.

LVL 16

HagayMandelCommented: 2013-05-14

Check whether the javascript is actually loaded. (look at 'page source').

Modifier1000Author Commented: 2013-05-15

Got it to work!
Actually the help from all of you was very helpful, thanks!

(function ($) {
$(document).ready(function(){

	var content = '';
	

	 $('#edit-submitted-cat-1-reim-prior,#edit-submitted-cat-1-reim-curr,#edit-submitted-cat-1-reim-total').change(function() {
		 content1 = parseInt($('#edit-submitted-cat-1-reim-prior').val(), 10);
		 content2 = parseInt($('#edit-submitted-cat-1-reim-curr').val(), 10);
		 contentTotal = parseInt(content1 + content2);

		$('#edit-submitted-cat-1-reim-total').val(contentTotal);
	 });
   });
})(jQuery);