Link to home
Create AccountLog in
Avatar of Pdesignz
PdesignzFlag for United States of America

asked on

Two Jquery scripts conflicting with each other

Hello, I am having an issue with two jquery scripts that seem to be conflicting with each other...I am using a jquery form validation script and also another jquery script that on a drop down when person selects "other" there is a hidden input box that will display and let the user add additional information. Currently if I choose the other from drop down and then try and validate, the drop down won't fire the validation or if I try the validation 1st, then if selecting other from the drop down, then the hidden input will not display...Please help in getting these to work together and I was also interested in how I could incorporate the re-captcha form service with this form as well...Newbie to jquery, so any help or code examples are most appreciated.

Thanks

Attaching code for review, you can also see live page at http://www.centerfortheperson.org/presenter-info.asp
form-code.txt
Avatar of Jagadishwor Dulal
Jagadishwor Dulal
Flag of Nepal image

There is not any conflicts in your script, You have mistake in your selector  dp1 and otherText  again you are passing value of option string and but you check some mistake see you code:

  $("#dp1").change(function(){
                if ( $(this).val() == "-1" )
                {
                    $("#otherText").removeAttr("disabled");
                }
                else
                {
                    $("#otherText").attr("disabled", "disabled");
                }
            });

Open in new window

Where your dropdown id is TopicArea and the input id is TopicAreaOther

  $("#TopicAreaOther").attr("disabled", "disabled");
			  $("#TopicArea").change(function(){
                if ( $(this).val() == "other" )
                {
                    $("#TopicAreaOther").removeAttr("disabled");
                }
                else
                {
                    $("#TopicAreaOther").attr("disabled", "disabled");
                }
            });

Open in new window


And next suggestion keep your select change function inside the document ready function See the full script below:

<script type="text/javascript">

	$(document).ready(function () {
		 $("#TopicAreaOther").attr("disabled", "disabled");
		  $("#TopicArea").change(function(){
			if ( $(this).val() == "other" )
			{
				$("#TopicAreaOther").removeAttr("disabled");
			}
			else
			{
				$("#TopicAreaOther").attr("disabled", "disabled");
			}
		});
		//Validation Script for US Phone Number
		jQuery.validator.addMethod("phoneUS", function (phone_number, element) {
			phone_number = phone_number.replace(/\s+/g, "");
			return this.optional(element) || phone_number.length > 9 &&
			phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
		}, "Please specify a valid phone number");

		//Validation Script for Zip/Postal Code
		jQuery.validator.addMethod("zip", function (zip, element) {
			return this.optional(element) || zip.match(/(^\d{5}(-\d{4})?$)|(^[ABCEGHJKLMNPRSTVXYabceghjklmnpstvxy]{1}\d{1}[A-Za-z]{1} ?\d{1}[A-Za-z]{1}\d{1})$/);
		}, "Please specify a valid postal/zip code");



		//validation implementation will go here.

		$("#presenter-registration").validate({
			rules: {

				Presenter: "required",
				Title: "required",
				organization: "required",
				presentationtype: "required",
				TopicTitle: "required",
				TopicArea: "required",
				PresentationDescription: "required",
				Email: {
					required: true,
					email: true
				},},

			messages: {
				Presenter: "<br />Please enter your name",
				Title: "<br />Please enter your title",
				organization: "<br />Please enter the name of your institution or organization",
				Email: "<br />Please enter your email address",
				presentationtype: "<br />Please select your presentation format",
				TopicTitle: "<br />Please enter your topic title",
				TopicArea: "<br />Please select your topic area",
				PresentationDescription: "<br />Please enter your presentation description",
			}
		})
	})
</script>

Open in new window

How to use reCAPTCHA:

http://www.google.com/recaptcha/whyrecaptcha

1. Sign up using your Google account
2. Put your domain in the text field
3. Then you have created a key!
4. Read the instructions on here:
https://developers.google.com/recaptcha/

Good luck!
Avatar of Pdesignz

ASKER

Thanks, this worked, I also wanted to try an alternate version in which a hidden input is hidden or displayed if they select the "other" option. I tried following your example and replaced the 1st part of the script which works when I test on the page, but then the form validation no longer fires or works, not sure what I am doing wrong...here is the script I changed. To view this page you can go to http://www.centerfortheperson.org/presenter-info-new.asp

<script type="text/javascript">

        $(".options").change(function() {
            var display = $(this).val() == "other" ? "block" : "none";
            $(this).next(".otherWrapper").css("display",display);
        });
            //Validation Script for US Phone Number
            jQuery.validator.addMethod("phoneUS", function (phone_number, element) {
                phone_number = phone_number.replace(/\s+/g, "");
                return this.optional(element) || phone_number.length > 9 &&
                phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
            }, "Please specify a valid phone number");

            //Validation Script for Zip/Postal Code
            jQuery.validator.addMethod("zip", function (zip, element) {
                return this.optional(element) || zip.match(/(^\d{5}(-\d{4})?$)|(^[ABCEGHJKLMNPRSTVXYabceghjklmnpstvxy]{1}\d{1}[A-Za-z]{1} ?\d{1}[A-Za-z]{1}\d{1})$/);
            }, "Please specify a valid postal/zip code");



            //validation implementation will go here.

            $("#presenter-registration").validate({
                rules: {

                    Presenter: "required",
                    Title: "required",
                    organization: "required",
                    presentationtype: "required",
                    TopicTitle: "required",
                    TopicArea: "required",
                    PresentationDescription: "required",
                    Email: {
                        required: true,
                        email: true
                    },
                },

                messages: {
                    Presenter: "<br />Please enter your name",
                    Title: "<br />Please enter your title",
                    organization: "<br />Please enter the name of your institution or organization",
                    Email: "<br />Please enter your email address",
                    presentationtype: "<br />Please select your presentation format",
                    TopicTitle: "<br />Please enter your topic title",
                    TopicArea: "<br />Please select your topic area",
                    PresentationDescription: "<br />Please enter your presentation description",
                }
            })
        })
    </script>

Open in new window

1. First You are using same function in two places
2. I would like to prefer you to use id better than class name in change function (It's working for better practice).
3. Add document ready function on the top of your script. You may see there is function closing left and showing error. Just add this line after<script type="text/javascript">
$(document).ready(function() {

Open in new window


That means see the script below:
 <script type="text/javascript">
	$(document).ready(function(e) {
    
        $(".options").change(function() {
            var display = $(this).val() == "other" ? "block" : "none";
            $(this).next(".otherWrapper").css("display",display);
        });
            //Validation Script for US Phone Number
            jQuery.validator.addMethod("phoneUS", function (phone_number, element) {
                phone_number = phone_number.replace(/\s+/g, "");
                return this.optional(element) || phone_number.length > 9 &&
                phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
            }, "Please specify a valid phone number");

            //Validation Script for Zip/Postal Code
            jQuery.validator.addMethod("zip", function (zip, element) {
                return this.optional(element) || zip.match(/(^\d{5}(-\d{4})?$)|(^[ABCEGHJKLMNPRSTVXYabceghjklmnpstvxy]{1}\d{1}[A-Za-z]{1} ?\d{1}[A-Za-z]{1}\d{1})$/);
            }, "Please specify a valid postal/zip code");



            //validation implementation will go here.

            $("#presenter-registration").validate({
                rules: {

                    Presenter: "required",
                    Title: "required",
                    organization: "required",
                    presentationtype: "required",
                    TopicTitle: "required",
                    TopicArea: "required",
                    PresentationDescription: "required",
                    Email: {
                        required: true,
                        email: true
                    },
                },

                messages: {
                    Presenter: "<br />Please enter your name",
                    Title: "<br />Please enter your title",
                    organization: "<br />Please enter the name of your institution or organization",
                    Email: "<br />Please enter your email address",
                    presentationtype: "<br />Please select your presentation format",
                    TopicTitle: "<br />Please enter your topic title",
                    TopicArea: "<br />Please select your topic area",
                    PresentationDescription: "<br />Please enter your presentation description",
				}
            });
        });
    </script>

Open in new window


And remove the script which you are using in again before body tag close.
Works better, but there are still a couple of bugs...

1. If I try validation 1st, all works normal but then when selecting "Other" hidden box does not display
2. If "Other" is already selected and validation is fired and then choose "Please select a topic area" the validation then does not fire for that field

Thanks!
SOLUTION
Avatar of Jagadishwor Dulal
Jagadishwor Dulal
Flag of Nepal image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Great Work, Thanks!