Solved

Two Jquery scripts conflicting with each other

Posted on 2013-05-24
8
348 Views
Last Modified: 2013-06-15
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
0
Comment
Question by:Pdesignz
  • 4
  • 3
8 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39196234
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
 
LVL 6

Expert Comment

by:mickey159
ID: 39196580
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
 

Author Comment

by:Pdesignz
ID: 39196685
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39196708
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
 

Author Comment

by:Pdesignz
ID: 39196729
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
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 500 total points
ID: 39196750
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
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39196757
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
 

Author Closing Comment

by:Pdesignz
ID: 39250200
Great Work, Thanks!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

825 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