jQuery not working with Drupal 7 Webform fields.

Posted on 2013-05-13
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.

Question by:Modifier1000
LVL 13

Accepted Solution

Arrow_1 earned 166 total points
Comment Utility
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:
LVL 17

Assisted Solution

nanharbison earned 167 total points
Comment Utility
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

HagayMandel earned 167 total points
Comment Utility
Check whether the javascript is actually loaded. (look at 'page source').

Author Closing Comment

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

(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);


Open in new window


Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now