Solved

Two Jquery scripts conflicting with each other

Posted on 2013-05-24
8
344 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
 
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

706 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

16 Experts available now in Live!

Get 1:1 Help Now