Solved

jQuery not working with Drupal 7 Webform fields.

Posted on 2013-05-13

3 solutions

619 Views

Last Modified: 2013-05-15

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.

Comment

Question by:Modifier1000

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

4 Comments

LVL 13

Accepted Solution

by:Arrow_1

Arrow_1 earned 166 total points

ID: 391632022013-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

Assisted Solution

by:nanharbison

nanharbison earned 167 total points

ID: 391633632013-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

Assisted Solution

by:HagayMandel

HagayMandel earned 167 total points

ID: 391671362013-05-14

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

Author Closing Comment

by:Modifier1000

ID: 391695242013-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);

Open in new window

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Delegation for dynamic elements using JQuery on()

Article by: Anthony

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…

jQuery

Chart.js - An Introduction

Article by: Rob

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…

PHP, jQuery, and Form Actions

Video by: Marco

The viewer will learn how to dynamically set the form action using jQuery.

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…