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
PdesignzPPC SpecialistAsked:
Who is Participating?
 
Jagadishwor DulalConnect With a Mentor Braces MediaCommented:
Oh sorry post you the mistake file just replace :
$("#TopicArea").change(function() {
            var display = $(this).val() == "other" ? "block" : "none";
            $(this).next(".otherWrapper").css("display",display);
        });

Open in new window

By:

 
 $("#TopicArea").change(function() {
            var display = $(this).val() == "other" ? "block" : "none";
            $(".otherWrapper").css("display",display);
        });

Open in new window

0
 
Jagadishwor DulalBraces MediaCommented:
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

0
 
mickey159Commented:
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!
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
PdesignzPPC SpecialistAuthor Commented:
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

0
 
Jagadishwor DulalBraces MediaCommented:
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.
0
 
PdesignzPPC SpecialistAuthor Commented:
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!
0
 
Jagadishwor DulalConnect With a Mentor Braces MediaCommented:
That's why I was asking you to change the change option function to an id like:

 $("#TopicArea").change(function() {
            var display = $(this).val() == "other" ? "block" : "none";
            $(this).next(".otherWrapper").css("display",display);
        });

Open in new window


See my testing code that working perfectly:
    <script type="text/javascript">
	$(document).ready(function() {
        $("#TopicArea").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>
    
    <style type="text/css">
label { font-size: 14px; color: #046380; }
input { width: 250px; }
select { width: 250px; }
textarea { width: 250px; }
#presenter-registration  { width: 700px; }
#presenter-registration  h2 { font-size: 18px; }
.required { color: #900 !important; display: inline; float: none; font-weight: bold; }
#presenter-registration label.error {
	font-weight: bold;
	font-size: 10px;
	color:#900;
	clear:both;
}
#othercontainer { display: none; }
.otherWrapper { display:none; }
</style>
</head>
<body>
    <div id="wrapper">
        <div id="container">

            <div id="conference-content">
                <form id="presenter-registration" method="post" action="">
                    <table width="700px" border="0" cellpadding="4" cellspacing="0" style="font-size: 11px;">
                        <tr>
                            <td>
                                <label for="Presenter">Name of Presenter:</label>
                                <span class="required">*</span></td>
                            <td>
                                <input type="text" name="Presenter" size="40" maxlength="40" id="Presenter" /></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <label for="Title">Title:</label>
                                <span class="required">*</span></td>
                            <td>
                                <input type="text" name="Title" size="40" maxlength="40" id="Title" /></td>
                        </tr>
                        <tr>
                            <td valign="top">&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td valign="top">
                                <label for="organization">Name of institution or organization:</label>
                                <span class="required">*</span></td>
                            <td>
                                <input type="text" name="organization" size="40" maxlength="40" id="organization" /></td>
                        </tr>
                        <tr>
                            <td valign="top">&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td valign="top">
                                <label for="Email">Email Address:</label>
                                <span class="required">*</span></td>
                            <td>
                                <input type="text" name="Email" size="40" maxlength="40" id="Email" /></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <label for="TopicTitle">Topic Title:</label>
                                <span class="required">*</span></td>
                            <td>
                                <input type="text" name="TopicTitle" size="40" maxlength="40" id="TopicTitle" /></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <label for="TopicArea">Topic Area:</label>
                                <span class="required">*</span></td>
                            <td>
                                <select name="TopicArea" id="TopicArea"  class="options" value="">
                                    <option selected="selected" value="">Please Select a Topic Area</option>
                                    <option value="Education">Education</option>
                                    <option value="Psychotherapy and mental health">Psychotherapy and mental health</option>
                                    <option value="Healing arts and sciences">Healing arts and sciencess</option>
                                    <option value="Management, leadership and organizational behavior">Management, leadership and organizational behavior</option>
                                    <option value="Human development and behavior">Human development and behavior</option>
                                    <option value="Social services">Social services</option>
                                    <option value="Community development">Community development</option>
                                    <option value="Mediation, mentoring and conflict resolution">Mediation,mentoring and conflict
                                    resolution</option>
                                    <option value="other">Other&hellip;</option>
                                </select>
                                <div class="otherWrapper">
                                    
                                    <input type="text" name="other1" />
                                </div>

                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <label for="TopicAreaOther">Topic Area (Other):</label><br />
                                If selected other from previous question, please specify here.
                               </td>
                            <td>
                                <input id="TopicAreaOther" maxlength="40" name="TopicAreaOther" size="40" type="text" /></td>
                        </tr>
                        
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td valign="top">
                                <label for="PresentationDescription">Description:</label>
                                <span class="required">*</span>
                            </td>
                            <td>
                                <textarea name="PresentationDescription" cols="40" rows="3" id="PresentationDescription"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <label for="presentationtype">Presentation format (select one):</label>
                                <span class="required">*</span></td>
                            <td>
                                <select name="presentationtype" id="presentationtype" value="">
                                    <option selected="selected" value="">Please Select a Presentation Format</option>
                                    <option value="Initiation and Facilitation of Discussion">Initiation and Facilitation of Discussion</option>
                                    <option value="Presentation of Multiple Perspectives">Presentation of Multiple Perspectives</option>
                                    <option value="Demonstrations in front of colleagues">Demonstrations in front of colleagues</option>
                                    <option value="Graphic and Print Statements">Graphic and Print Statements</option>
                                </select></td>
                        </tr>
                        <tr>
                            <td colspan="2">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td align="right">
                                <input name="Submit" type="submit" class="button" value="Submit Registration" /></td>
                        </tr>
                        <tr>
                            <td height="37" colspan="2"><span style="color: #C00">*</span> Required fields are marked with an asterisk.
                            </td>
                        </tr>
                    </table>
                    <input name="recipient" type="hidden" id="recipient" value="paul@pdesignz.com">
                    <input name="subject" type="hidden" id="subject" value="CSP Presenter Registration ">
                    <input name="redirect" type="hidden" id="redirect" value="presenter-registration-conf.aspx">
                    <input name="required" type="hidden" id="required" value="telephone, realname">
                </form>
                </div>
            <div id="footer">
                <div id="right">
                    <p style="margin-top: 40px;">
                        Copyright &copy; 2012 Center for the Studies of the Person. All Rights Reserved<br />
                        <a href="t-privacy.aspx">Privacy Policy</a> | <a href="sitemap2.aspx">Sitemap</a>
                    </p>
                </div>
                <div id="left">
                    <p style="padding-top: 15px; width: 150px;">
                        1150 Silverado StreetSuite 112<br />
                        La Jolla, CA. 92037<br />
                        Tel: (858) 459-3861
                    </p>
                    <div style="margin-top: -50px; padding-right: 25px; float: right; display: inline;">
                        <script type="text/javascript"
                            src="https://sealserver.trustwave.com/seal.js?code=778f4df40ca511e0b34b005056b201e5"></script>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>

Open in new window

0
 
PdesignzPPC SpecialistAuthor Commented:
Great Work, Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.