JavaScript - Getting Jquery's Jgrowl To Work With Validation.

Hello guys,


I have implemented the jquery validation in one of my projects.

I have a <div> which has all the billing details
& another <div> below it which has the shipping details.
There is a checkbox in between these <div>'s which says "Same as Billing Address". It is used to populate all the shipping fields from the billing fields.

Well, on this particular form there are some fields which are mandatory & which I have validated by jquery validation.

I have used the $("#form_id").validate().form(); statement to check validation on the click event of the checkbox.
The actual problem is that after page loads, I directly click on the checkbox & submit the page,
the page gets submitted & validation does not execute.
If I click the submit button with the checkbox unchecked then the validation runs properly.

Why is my form not being validated if I checked the checkbox?
Please guys, help me out.


Thanks in advance.

Bhavik.

Hi,

I'd like to use the jQuery validation plugin as seen on the following example:
http://docs.jquery.com/Plugins/validation#Example

But it doesn't work properly if I use inline/in-filed labels.


Any help is appreciated!
Rain Lover

Hi everyone,

I currently use javascript in an anchor tag to submit a form using
Code:

<a href="#" onClick="document.myformname.submit(); return false;">Submit</a>

The only problem is, JQuery doesn't acknowledge that my form has been submitted.

Has anyone come up against this problem before? If so, can you please share your work around?

Thank you!

B

Hey guys my 2nd thread on this forum requesting help

ok so last month i edited this cool banner rotator and got it doing exactly what i wanted.

but i need some help adding a bit more functionality to it and maybe improoving the code.

would any1 be kind enough to help me out?

can link codes etc just ask.

Thanking you :P

Hello,

I'm trying to combine two different jQuery scripts on my webpage. The one is showing flashvideos in a lightbox and the other one is displaying thumbnails in a slideshow.

The problem is that only one script is working. I have searched the web and forums and found that several people have had this problem before and I have truly tried to fix it with noConflict(). The problem is that I have very little experience in Javascript so I haven't got it working.

So, here are the lines in the code:

<!-- Video lightbox -->
<script type="text/javascript" src="/js/videolightbox/mootools.js"></script>
<script type="text/javascript" src="/js/videolightbox/swfobject.js"></script>
<script type="text/javascript" src="/js/videolightbox/videobox.js"></script>

<!-- Thumbnail slider -->
<script type="text/javascript" src="/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="/js/carousel.js"></script>


I haven't coded any of these myself (of course), so I am not familiar with the variables in the files. So my target is to find a way to to use these scripts simultaneously.

I am very thankful for your help but I am also kindly asking for a simple and easy to understand instruction.

The webpage can be found he http://wearethemusicmakers.se/index2.php

Best Regards
Johannes

if you visit my site: http://site-tonight.com/works

you will notice if you click the image, the Colorbox comes up with a
new image, BUT if you click the word Details below the image, the
colorbox effect does not take place, even though it using the same
link as the image.

is there a way to make that text link be clicked and have an image pop
up in the colorbox style?

thanks much,

kyle

I'm having a slight problem with php pagination and jquery/js. On the following page http://dev2.bluemuledesign.com/athletes.php you'll see an "athlete profile" area. Whenever an athlete photo is selected, javascript/php are used to switch out the athlete info. This works perfectly fine. The problem occurs if I use the left or right arrows to view more athletes (the left and right arrows are set with php pagination to switch to the next four records in the database). Whenever I do this, the athlete info defaults back to the first person from the initial load. Also, the javascript/jquery quits working and won't let me view the info for one of the newly displayed athletes. So I have two questions:

1) Can anyone tell me why it defaults back to the original athlete info? I'm assuming it has something to do with me not setting a cookie to remember the currently selected athlete.
2) Why does the javascript quit working when I view the next set of athletes?

Also, the jquery slideshow that I am implementing is an alteration of this: http://designm.ag/tutorials/image-rotator-css-jquery/

Any help would be greatly appreciated.

This is puzzling me.

It's an incremental search function. Any help for a Javascript novice much appreciated:

Code:

$(function () {
    $('#quickFilter').incrementalFilter({
        items: 'dl.entryList > dt',
        foundCounter: '#resultCount',
        totalCounter: '#totalCounter',
        minChars: 2
    }).focus();
})

... here's the rest of it:

Code:

(function($) {
    var IncrementalFilter = function(params){
        var setting = this.setting = {
            input: undefined,
            items: undefined,
            searchScope: '*',
            minChars: 2,
            useHighlight: true,
            foundCounter: undefined,
            totalCounter: undefined,
            highlightElem: $('<em class="highlight" />'),
            foundClass: 'found',
            zeroClass: 'zero'
        }
        $.extend(setting,params)

        this.input = $(setting.input);
        this.items = $(setting.items);
        this.minChars = setting.minChars;
        if(setting.foundCounter){
            this.totalCounter = setting.totalCounter;
            this.foundCounter = new IncrementalFilter.Counter(setting);
        }
        this.formerQuery = '';
        this.itemData = [];
        this.init();
    }

    IncrementalFilter.prototype = {

        makeData: function(){
            var that = this;
            this.items.each(function(){
                var obj = [$(this)]
                if($(this).is('dt')){
                    obj.push($(this).next())
                }
                that.itemData.push(new IncrementalFilter.SearchedItem(obj,that.setting));
            })
            if(this.foundCounter){
                this.foundCounter.refresh(this.itemData.length);
                if(this.totalCounter){
                    $(this.totalCounter).html(this.foundCounter.all)
                }
            }
        },

        processQuery: function(query){
            var tempq = this.escapeQuery(query)
            tempq = $.trim(tempq).split(/\s+/);
            var queries = []

            for(var i=0,l=tempq.length;i<l;i++){
                for(var j=0,m=tempq.length;j<m;j++){
                    if(i!=j && tempq[i] && (tempq[i] == tempq[j]
                       || RegExp(tempq[i]).test(tempq[j])
                       || tempq[i].length < this.minChars)){
                        tempq.splice(i,1)
                        l = m = tempq.length;
                    }
                }
                if(tempq[i]){
                    queries.push(tempq[i])
                }
            }

            if(queries.join(' ') != this.formerQuery){
                this.search(queries);
                this.formerQuery = queries.join(' ');
            }
        },

        escapeQuery: function(query){
            var escapeChars = '.+*^$?()[]{}';
            var res = query;
            for(var i=0,l=escapeChars.length;i<l;i++){
                var ec = escapeChars.charAt(i);
                res = res.replace(RegExp('\\'+ec,'g'),'\\'+ec);
            }
            return res;
        },

        search: function(queries){
            var that = this;
            var count = 0;
            $(that.itemData).each(function(){
                var self = this;
                var matchCount = 0;
                $.each(queries,function(){
                    if(RegExp(this,'i').test(self.text))
                        matchCount++;
                })
                if(matchCount == queries.length){
                    this.showItem()
                    this.clearHighlight(function(){
                        $.each(queries,function(){
                            self.highlightWord(this)
                        })
                    });
                    count++;
                }else{
                    this.hideItem();
                }
            })
            if(this.foundCounter){
                this.foundCounter.refresh(count)
            }
        },

        reset: function(){
            var that = this;
            $(this.itemData).each(function(){
                this.showItem();
                this.clearHighlight();
                if(that.foundCounter){
                    that.foundCounter.reset();
                }
            })
        },

        setEvent: function(){
            var that = this;
            this.input.bind('keyup',function(){
                var val = $(this).val();
                if(val.length >= that.minChars){
                    that.processQuery(val)
                }else{
                    that.reset();
                }
            })
        },

        init: function(){
            this.makeData();
            this.setEvent();
            if(this.input.val().length >= this.minChars){
                this.processQuery(this.input.val())
            }
        }
    }

    /**
     *@param obj {array}
     **/
    IncrementalFilter.SearchedItem = function(obj,setting){
        this.useHighlight = (setting.useHighlight && $.fn.highlightText && $.fn.removeOuterTag)
        if(this.useHighlight){
            this.highlightElem = setting.highlightElem || $('<em class="highlight" />');
            this.highlightExpr = /^<(\w+)/.exec($('<div />').append(this.highlightElem).html())[1]
                               + '.'+this.highlightElem.attr('class').split(/\s/).join('.');
        }
        this.text = '';
        this.obj = [];
        for(var i=0,l=obj.length;i<l;i++){
            var temp = obj[i];
            this.obj[i] = {'elem':temp,'orgsrc':temp.html()}
            this.text += obj[i].text();
        }
    }

    IncrementalFilter.SearchedItem.prototype = {
        hideItem: function(){
            $(this.obj).each(function(){
                this.elem.hide();
            })
            return this;
        },

        showItem: function(){
            $(this.obj).each(function(){
                this.elem.show();
            })
            return this;
        },

        clearHighlight: function(callback){
            if(!this.useHighlight) return this;
            var that = this;
            $(this.obj).each(function(){
                $(that.highlightExpr,this.elem).removeOuterTag()
            })
            if(callback) callback();
            return this;
        },

        highlightWord: function(word){
            if(!this.useHighlight) return this;
            var that = this;
            var query = new RegExp(word,'gi')
            $(this.obj).each(function(){
                this.elem.highlightText(query,that.highlightElem)
            })
            return this;
        }
    }

    IncrementalFilter.Counter = function(setting){
        if(!setting || !setting.foundCounter) return undefined;
        this.obj = $(setting.foundCounter);
        this.foundClass = setting.foundClass || 'found';
        this.zeroClass = setting.zeroClass || 'zero';
        this.all = undefined;

        this.refresh = function(count){
            this.obj.html(count);
            if(!this.all){
                this.all = count;
            }

            if(count == 0){
                this.zero()
            }else if(count < this.all){
                this.highlight();
            }
        }

        this.reset = function(){
            this.refresh(this.all);
            this.obj
                .removeClass(this.foundClass)
                .removeClass(this.zeroClass)
        }

        this.highlight = function(){
            this.obj
                .removeClass(this.zeroClass)
                .addClass(this.foundClass)
        }

        this.zero = function(){
            this.obj
                .removeClass(this.foundClass)
                .addClass(this.zeroClass)
        }

        return this;
    }

    $.fn.incrementalFilter = function(params){
        return this.each(function(){
            if(typeof params == 'string' || params.size){
                new IncrementalFilter({input:$(this),items:params})
            }else if(typeof params == 'object'){
                params.input = $(this);
                new IncrementalFilter(params)
            }
        });
    };

Can someone please help me with my validation! I am a novice at Javascript and have started only learning it now as its a part of my course. I know its too long but i just put in the whole thing as the error might be anywhere.

Code:

<html>
<head>
 
<meta name="author" content="Trev - Cert IV in IT- Networking" />
<title>Univeristy Registration Form</title>
	<script language="javascript" type="text/javascript">
		
		function Mainfunc()
		{
		
		var Fname = new Object();
		var fn = new String();
			Fname = document.getElementById ("text1");
			fn=Fname.value;
			
		var Mname = new Object();
		var mn = new String();
			Mname = document.getElementById ("text2");
			mn=Mname.value;
				
		var Lname = new Object();
		var ln = new String();
			Lname = document.getElementById ("text3");
			ln=Lname.value;
				
		var Radd = new Object();
		var radd = new String();
			Radd = document.getElementById ("tarea1");
			radd=Radd.value;	
				
		var Dd = new Object();
		var dd = new String();
			Dd = document.getElementById ("text4");
			dd=Dd.value;
		var ddd = parseInt (dd,10);
				if (dd!=ddd)
				{
				alert ("Please enter your Date of Birth!");
				return false;
				}
		
		var Mm = new Object();
		var mm = new String();
			Mm = document.getElementById ("text5");
			mm=Mm.value;
		var mmm = parseInt (mm,10);
				if (mm!=mmm)
				{
				alert ("Please enter your Month of Birth!");
				return false;
				}
				
		var Yy = new Object();
		var yy = new String();
			Yy = document.getElementById ("text6");
			yy=Yy.value;
		var yyy = parseInt (yy,10);
				if (yy!=yyy)
				{
				alert ("Please enter your Year of Birth!");
				return false;
				}
			
		var Rphone = new Object();
		var rp = new String();
			Rphone = document.getElementById ("text7");
			rp=Rphone.value;
		var rpp = parseInt (rp,10);
				if (rp!=rpp)
				{
				alert ("Please enter a valid Phone number!");
				return false;
				}
			
		var Mphone = new Object();
		var mp = new String();
			Mphone = document.getElementById ("text8");
			mp=Mphone.value;
		var mpp = parseInt (mp,10);
				if (mp!=mpp)
				{
				alert ("Please enter a valid Mobile number!");
				return false;
				}
			
		var Course = new Object();
		var course = new String();
			Course = document.getElementById ("text9");
			course=Course.value;
			
		var rad1;
			rad1=document.getElementById("radio1");
			
		var rad2;
			rad2=document.getElementById("radio2");
			
		var sel=document.getElementById("dept").value;
		
		var radgender;
		var chk1 = false;
		var chk2 = false;
		var chk3 = false;
		var rad1chk = false;
		var rad2chk = false;
		
		var genderpic;
		
		var chkbox1 = new Object();
			chkbox1=document.getElementById("check1");
			
		var chkbox2 = new Object();
			chkbox2=document.getElementById("check2");
			
		var chkbox3 = new Object();
			chkbox3=document.getElementById("check3");
			
		chk1 = chkbox1.checked;
		chk2 = chkbox2.checked;
		chk3 = chkbox3.checked;
		rad1chk = rad1.checked;
		rad2chk = rad2.checked;
		

			if ((rad1chk==false)&&(rad2chk==false))
				{
					alert("Please select a gender!");
					return false;
				}
				
				else
				if (rad1chk==true)
				{
				radgender = "Male";

				document.write("<html>");
				document.write("<head>");
				document.write("<body bgcolor='aqua'>");
				
				if ((chk1==true) && (chk2==false) && (chk3==false))
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'> You have selected Campus A </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==false) && (chk2==true) && (chk3==false))
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus B </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==false) && (chk2==false) && (chk3==true))
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus C </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==true) && (chk2==true) && (chk3==false))
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus A and B </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==true) && (chk2==false) && (chk3==true))
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus A and C </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==false) && (chk2==true) && (chk3==true))
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px>You have selected Campus B and C </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				

			else if ((chk1==true) && (chk2==true) && (chk3==true))
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus A,B and C </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==false) && (chk2==false) && (chk3==false))
				{
				alert("Please select a campus");
				}

				genderpic=document.write("<img src='E:/modifying/tf.jpg'>");
				document.write("<br/>");
				
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You are a: " + radgender + "</p>");
				document.write("<br/>");
	
				if ((fn=" ")||(mn=" ")||(ln=" "))
				{
				alert("Please Enter your Full Name!");
				return false;
				}
				
				else if ((fn!=" ")&&(mn!=" ")&&(ln!=" "))
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your full name is: " + fn + " " + mn + " " + ln + "</p>");
				document.write("<br/>");
				}
			
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your date of birth is: " + dd + "/" + mm + "/" + yy + "</p>");
				document.write("<br/>");
				
				if (radd=" ")
					{
					alert("Please enter Your Address!");
					return false;
					}
					
				else if (radd!=" ")
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your Residential Address is: " + radd + "</p>");
				document.write("<br/>");
				}
	
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your telephone number is: " + rp + "</p>");
				document.write("<br/>");
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your Mobile number is: " + mp + "</p>");
				document.write("<br/>");
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your department is: " + sel + "</p>");
				document.write("<br/>");
				
				if (course=" ")
					{
					alert("Please Enter the Name of your Course!");
					return false;
					}
					
				else if (course!=" ")
				{
				document.write("<p style='font-family:arial black;color:blue;font-size:16px'>The name of your course is: " + course + "</p>");
				document.write("<br/>");
				}	
				
				document.write("<a id='bktoform1' style='font-family:arial black;color:blue;font-size:16px' href='G:/modifying/registration_form_Trevlyn_Farrar_Yes.html' >Click here to go to the form (previous page) using hyperlink</a>");
				document.write("<p id='bktoform2' style='font-family:arial black;color:blue;font-size:16px' onclick='window.history.back()'>Click here to go to the form (previous page) by just clicking this text</p>");
				
				document.write("</body>");
				
				document.write("</head>");
				document.write("</html>");
				
				}
				else 
				{
					radgender = "Female";
					
					document.write("<html>");
					document.write("<head>");
					
					document.write("<body bgcolor='pink'>");
					
				if ((chk1==true) && (chk2==false) && (chk3==false))
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'> You have selected Campus A </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==false) && (chk2==true) && (chk3==false))
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus B </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==false) && (chk2==false) && (chk3==true))
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus C </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==true) && (chk2==true) && (chk3==false))
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus A and B </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==true) && (chk2==false) && (chk3==true))
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus A and C </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==false) && (chk2==true) && (chk3==true))
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus B and C </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				

			else if ((chk1==true) && (chk2==true) && (chk3==true))
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus A,B and C </p>");
				document.write("<br/>");
				document.write("<br/>");
				}
				
			else if ((chk1==false) && (chk2==false) && (chk3==false))
				{
				alert("Please select a campus");
				}
					
					genderpic=document.write("<img src='E:/modifying/ms.jpg'>");
					document.write("<br/>");
		
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You are a: " + radgender + "</p>");
				document.write("<br/>");
				
				if ((fn=" ")||(mn=" ")||(ln=" "))
				{
				alert("Please Enter your Full Name!");
				return false;
				}
				
				else if ((fn!=" ")&&(mn!=" ")&&(ln!=" "))
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your full name is: " + fn + " " + mn + " " + ln + "</p>");
				document.write("<br/>");
				}
								
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your date of birth is: " + dd + "/" + mm + "/" + yy + "</p>");
				document.write("<br/>");
				
				if (radd=" ")
					{
					alert("Please enter Your Address!");
					return false;
					}
					
				else if (radd!=" ")
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your Residential Address is: " + radd + "</p>");
				document.write("<br/>");
				}
				
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your telephone number is: " + rp + "</p>");
				document.write("<br/>");
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your Mobile number is: " + mp + "</p>");
				document.write("<br/>");
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your department is: " + sel + "</p>");
				document.write("<br/>");
				
				if (course=" ")
					{
					alert("Please Enter the Name of your Course!");
					return false;
					}
					
				else if (course!=" ")
				{
				document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>The name of your course is: " + course + "</p>");
				document.write("<br/>");
				}
		
				document.write("<a id='bktoform1' style='font-family:arial narrow;color:red;font-size:16px' href='G:/modifying/registration_form_Trevlyn_Farrar_Yes.html' >Click here to go to the form (previous page) using hyperlink</a>");
				document.write("<p id='bktoform2' style='font-family:arial narrow;color:red;font-size:16px' onclick='window.history.back()'>Click here to go to the form (previous page) by just clicking this text</p>");
				
				document.write("</body>");
				
				document.write("</head>");
				document.write("</html>");
				
				}

		}
		
	</script>

	</head>
<body>

								<script language="javascript" type="text/javascript">

									var dt=new Date();

									document.write("<p align='right'>");
									document.write(dt );
									document.write("</p>");

								</script>																		

								
	<h1>Registration Form</h1>
	<form Name="Registration" ID="FORM1" action="" method="">
	<table>
	<tr>
	<p>
	<td>	1. Select your gender</td>
	<td>	<input type="radio" id="radio1" name="Gender" value="Male" /> Male <br />
			<input type="radio" id="radio2" name="Gender" value="Female" /> Female <br />
   	</td>
	</p>
	</tr>
	<tr>
	<p>
		<td>2. First Name:</td>
		<td><input type="text" id="text1" name="Fname" value="" size="30" /></td>
  	</p>
	</tr>
	<tr>
	<p>
		<td>3. Middle Name:</td>
		<td><input type="text" id="text2" name="Mname" value="" size="30"/></td>
  	</p>
	</tr>
	<tr>
	<p>
		<td>4. Last Name:</td>
		<td><input type="text" id="text3" name="Lname" value="" size="30"/></td>
  	</p>
	</tr>
	<tr>
	<p>
		<td>5. Date of Birth (dd/mm/yyyy):</td>
		<td><input type="text" id="text4" name="dd" value=""  size="2"/>/
		<input type="text" id="text5" name="mm" value=""  size="2"/>/
		<input type="text" id="text6" name="yy" value=""  size="4"/></td>
	</p>
	</tr>
	<tr>
	<p>
		<td>6. Residential Address (Not P.O. Box) </td>
		<td><textarea rows="4" cols="40" id="tarea1">
		</textarea><br /></td>
	</p>
	</tr>
	<tr>
	<p>
		<td>7. Residential Phone Number:</td>
		<td><input type="text" id="text7" name="Rphone" value="" /></td>
	</p>
	</tr>
	<tr>
	<p>
		<td>8. Mobile Phone Number:</td>
		<td><input type="text" id="text8" name="Mphone" value="" /></td>
	</p>
	</tr>
	<tr>
	<p>
		<td>9. Choose your campus: </td>
		<td><input type="checkbox" id="check1" name="Campus" value="A"  />Campus A<br />
		<input type="checkbox" id="check2" name="Campus" value="B" />Campus B<br />
		<input type="checkbox" id="check3" name="Campus" value="C" />Campus C<br /></td>
	</p>
	</tr>
	<tr>
	<p>
		<td>9. Choose your Department:</td>
		<td><select id="dept">	
		<option value="Nothing. Please Select a department"> Choose an Option... </option>
		<option value="Applied and Physical Science"> Applied and Physical Science</option>
		<option value="Arts"> Arts</option>
		<option value="Business and Commerce"> Business and Commerce</option>
		<option value="Education"> Education</option>
		<option value="Humanities"> Humanities</option>
		<option value="Information Technology and Computing"> Information Technology and Computing</option>
		<option value="Mathematics"> Mathematics</option>
		<option value="Pharmaceutical Science and Medical Science"> Pharmaceutical Science and Medical Science</option>
		<option value="Theoretical Science"> Theoretical Science</option>
		</select></td>
	</p>
	</tr>
	<tr>
	<p>
		<td>10. Name of Course Enrolled in:</td>
		<td><input type="text" id="text9" name="Course" value="" size="70"/></td>
	</p>
	</tr>
	</table>
	<p>
		<input type="button" name="button1" id="Submit" value="Submit" />
		<input type="reset" name="button2" id="button2" value="Reset" />
		<input type="button" name="button3" id="Display" value="Display" onclick="Mainfunc()" >
	</p>
	</table>
		<a href="http://getfreestat.com" style="font-size:9px;">free hit counter</a><br><a href="http://getfreestat.com"><img src="http://getfreestat.com/count.php?c_style=69&id=1301322705" border=0 alt="free hit counter"></a><br>
				<h6 align="bottom">This Form was designed by Trevlyn Christopher Farrar</h6>
</body>
</html>

Hello, i would like to advise me on sthg.

I have built a website using a)MySQL b)HTML c)PHP and d)Javascript.

My website consists of basic html pages/templates which have links to the left and point to another templates/pages.
For example, i have 4 templates in my site
1st template is for: News
2nd : Library
3nd : Articles
4th : E-shop

Each template consists of 1. a small menu with links,every link points to another page 2.space for the content/text of the html page 3. a form for searching in the website using php and a mysql database.

Well, i'm thinking of adding some animation in my website using the jquery library.Let's say we have an accordion which has 4 choices and when the user clicks on the first choice the 1st template(NEWS) appears inside the slide of accordion,loads in the same slide, not in a new page!!!This is what i would like to do, place in each slide of the accordion one of my templates. CAn this be done???
Which are the disadvantages of adding in each slide of the accordion a different template for my site and remain in the same slide when the user clicks in one of the links of the template???
Consider that i'm using dynamic content and not static, i have a MySQL database behind.

Also,as i have seen in most examples the options of accordion usually contain an image, a content, a text or links which open in a new window or tab not inside the slide!!!These links do not load in the same slide!!i would like to have a template which loads in the slide each time the user clicks on a link of it.

CAn this be done??

I would be glad if sm could advise me!
Thanks, in advance!!!

Hi, doing form validation at college just now. The lecturer gave all of us this following example. But it doesn't seem to work in firefox. I have tried my own scripts and they seem to work so have no idea whats happening!

Code:

<html>
<head>
<title>Javascript validation program  - limits field length and content</title>
<script type="text/javascript">

function ValidateForm()
{
var msg='';
if(document.getElementById('CC').value=='')
  {
	msg+='- Please enter CC\n\n';
  }
else
// Now test if CC is purely 2 capital letters...

  {
   var CC=RTrim(document.getElementById('CC').value);
// alert(CC);
   if (CC.length==2)
   {
      if (isCHAR(CC)==false) 
      {
       msg+=' - CC not solely 2 capital letters \n\n';
      }
   }
   else
       msg+=' - CC not 2 letters in length \n\n';
  }

if(document.getElementById('NNNNNN').value=='')
 {
	msg+='- Please enter NNNNNN \n\n';
  }
else
  {
// Now test if NNNNNN is purely 6 digits...

   var NIdigits=RTrim(document.getElementById('NNNNNN').value);
   if (NIdigits.length==6)
   {
   if (isInteger(NIdigits)==false) 
   {
       msg+=' - NNNNNN not solely digits \n\n';
   }
}
else
   msg+=' - NNNNNN not 6 digits in length\n\n';
   }
   
// Lastly check if the last field contains only 1 char
   
if(document.getElementById('C').value=='')
 {
	msg+='- Please enter C \n\n';

 }
else
// Now test if C is a single letter...

  {
   var C=RTrim(document.getElementById('C').value);

  if (C.length==1)
   { 
   if (isCHAR(C)==false)
   {
       msg+=' - C not a capital letter \n\n';
   }
   }
   else
   msg+=' C not 1 character in length';
   }
// alert(msg);
if(msg!='')
  {
//alert('Here...');  
  alert('The following fields are empty and/or invalid:\n\n'+msg);
	return false
  }
else
  {
	return true 
  }
}

function RTrim(str){
	if (str==null){return null;}
	for(var i=str.length-1;str.charAt(i)==" ";i--);
	return str.substring(0,i+1);
	}
	
//-------------------------------------------------------------------
// isBlank(value)
//   Returns true if value only contains spaces
//-------------------------------------------------------------------
function isBlank(val){
	if(val==null){return true;}
	for(var i=0;i<val.length;i++) {
		if ((val.charAt(i)!=' ')&&(val.charAt(i)!="\t")&&(val.charAt(i)!="\n")&&(val.charAt(i)!="\r")){return false;}
		}
	return true;
	}

//-------------------------------------------------------------------
// isInteger(value)
//   Returns true if value contains all digits
//-------------------------------------------------------------------
function isInteger(val){
	if (isBlank(val)){return false;}
	for(var i=0;i<val.length;i++){
		if(!isDigit(val.charAt(i))){return false;}
		}
	return true;
	}
//-------------------------------------------------------------------
// isCHAR(value)
//   Returns true if value contains all CHARS
//-------------------------------------------------------------------
function isCHAR(val){
	if (isBlank(val)){return false;}
	for(var i=0;i<val.length;i++){
		if(!isCAPlet(val.charAt(i))){return false;}
		}
	return true;
	}
//-------------------------------------------------------------------
// isDigit(value)
//   Returns true if value is a 1-character digit
//-------------------------------------------------------------------
function isDigit(num) {
	if (num.length>1){return false;}
	var string="1234567890";
	if (string.indexOf(num)!=-1){return true;}
	return false;
	}

//-------------------------------------------------------------------
// isCAPlet(value)
//   Returns true if value is a 1-character letter
//-------------------------------------------------------------------
function isCAPlet(num) {
	if (num.length>1){return false;}
	var string="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	if (string.indexOf(num)!=-1){return true;}
	return false;
	}
</script>

</head>

<body bgcolor="#FFFFFF">

<form action='http://10.205.3.202/Valid.php' method='POST'  onsubmit='return ValidateForm();'>



<H1>Validate NI No</H1>


<p>

NI-No    :

<INPUT TYPE="text" id='CC' NAME="CC" SIZE='2' maxlength='2' >
-


<INPUT TYPE="text" id='"NNNNNN"' NAME="NNNNNN" SIZE='6' maxlength='6' >

<INPUT TYPE="text" id='C' NAME="C" SIZE='1' maxlength='1'>

<p>

<INPUT  TYPE="submit" id='Process' value="Process" name="submit">



</form>

</body>
</html>

Any help would be great.

...only allow for users to enter in characters from A-Z?

I have several small questions:

1) I have a validation function that allows for the user to navigate to the next webpage if they enter in all of the details correctly, then they can go to the Checkout. However, when I try it, what happens is that if the alert message about entering an invalid date appears and the user clicks on OK, then the confirmation message that is used to help the user navigate to the Checkout, when I do not want them to be able to override the validation. My coding is:

Code:

function ValidatePaymentDetails()
{
	var cardnum=document.forms["payment"]["cardnumber"].value;
	var cardexp=document.forms["payment"]["cardexpirydate"].value;
    var cardsec=document.forms["payment"]["cardsecuritynumber"].value;
	var href="checkout.html";
if (((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec))))
{
	alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec=="")))
{
alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp)))
{
	alert("You have not entered any suitable values for the Card Number or Card Expiry Date fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp==""))
{
	alert("You have not entered any suitable values for the Card Number or the Card Expiry fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Number or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Number or the Card Security Number fields. Enter in suitable values.");
}	
else if ((hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}				
else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values.");
}
else if (hasWhiteSpace2(cardnum))
{
	alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardnum==null|| cardnum=="")
{
		alert("You have not entered a suitable value for the Card Number field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardexp))
{
	alert("You have not entered in a suitable value for the Card Expiry Date field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardexp==null|| cardexp=="")
{
	alert("You have not entered a suitable value for the Card Expiry Date field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardsec))
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardsec==null|| cardsec=="")
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value.");
}
else if (checknumber(cardnum)==false)
{
	alert("You have not entered in a valid Card Number in the Card Number field. Make sure that it is in the 0000-0000-0000-0000 format and remove any leading or trailing spaces. Enter in a suitable value.");
}
else if (checksecnumber(cardsec)==false)
{
	alert("You have not entered in a valid Card Security Number in the Card Security Number field. Make sure it is in the 000 format. Enter in a suitable value.");
}
else if (compareDate(cardexp)==true)
{
	return true;
}

else
{
	return contCheckout();
}
}

and the code for contCheckout() is:
Code:

function contCheckout()
{
	var nav=confirm("Are you sure you want to continue your order and go to the Checkout? Click OK to continue or click on Cancel to make changes to your payment details until you are ready to continue");
	if (nav===true)
	{
		location.href="checkout.html";
	}
	else
	{
		location.href="#";
	}
}

2). This question is I would like a function so that only characters between A-Z can be inputted and possibly have a capital letter as only the first character. I'm sure that a regexp function will be needed, but I'm not entirely sure how to implement it

3) Final quick question, for some reason some of my alert boxes appear twice (i.e. the user clicks on OK, and then the alert box opens up again). Is there any quick fix for this?

Any help is appreciated!

Thanks

Hi guys..

I cant figure out why the validation wont work on the form..


PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cork Discos Mailing List</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/form_validation.js"></script>
</head>

 <body>
  
    <div id="wrapper">
  
      <div id="star1">
      <div id="star2">
      <div id="star3">
      <div id="star4">
      <div id="header">
        <h1>Cork Discos Texting Service</h1>
      </div>
      <div id="content">
    
                            <form name="frm" action="index.html" method="POST" onsubmit="return validateForm()">
                            <table width="100%" border="0" cellspacing="2" cellpadding="3"  class="mainForm">
                                <tr>
                                <td class="normalText" align="left" style="padding:0px 0px 0px 33px">
                                    <table border="0" cellspacing="3" cellpadding="2">
                                        <tr>
                                            <td class="normalHeading" colspan="2" style="padding-bottom:6px">
                                    
                                                <div id="error_msg" class="txtErrorMsg" align="center"></div>
                                    
                                            </td>
                                        </tr>
                                        <tr >
                                            <td class="normalText" width="30%">First Name</td>
                                            <td><input type="text" name="firstName" id="firstName"  class="input1" style="width:195px" maxlength="10"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Last Name</td>
                                            <td><input type="text" name="lastName" id="lastName" class="input1" style="width:195px" maxlength="10"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Mobile</td>
                                            <td><input type="text" name="mobile"  id="mobile" class="input1"  style="width:195px" maxlength="10" onkeypress="return fnIsIntNumber(event,this);"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Email</td>
                                            <td><input type="text" name="email" id="email" class="input1"  style="width:195px" onblur="IsEmail(this.vlaue)"/></td>
                                        </tr>
                                    <!--
                                        <tr>
                                            <td class="normalText">Date of Birth</td>
                                            <td>
                                                <select name="date1" style="width:43px"> 
                                                    <option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option><option value=13>13</option><option value=14>14</option><option value=15>15</option><option value=16>16</option><option value=17>17</option><option value=18>18</option><option value=19>19</option><option value=20>20</option><option value=21>21</option><option value=22>22</option><option value=23>23</option><option value=24>24</option><option value=25>25</option><option value=26>26</option><option value=27>27</option><option value=28>28</option><option value=29>29</option><option value=30>30</option><option value=31>31</option>  
                                                </select>
                                                <select name="date2" style="width:43px"> 
                                                    <option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option>  
                                                </select>
                                                <select  name="date3" style="width:102px"> 
                                                    <option value=1955>1955</option><option value=1956>1956</option><option value=1957>1957</option><option value=1958>1958</option><option value=1959>1959</option><option value=1960>1960</option><option value=1961>1961</option><option value=1962>1962</option><option value=1963>1963</option><option value=1964>1964</option><option value=1965>1965</option><option value=1966>1966</option><option value=1967>1967</option><option value=1968>1968</option><option value=1969>1969</option><option value=1970>1970</option><option value=1971>1971</option><option value=1972>1972</option><option value=1973>1973</option><option value=1974>1974</option><option value=1975>1975</option><option value=1976>1976</option><option value=1977>1977</option><option value=1978>1978</option><option value=1979>1979</option><option value=1980>1980</option><option value=1981>1981</option><option value=1982>1982</option><option value=1983>1983</option><option value=1984>1984</option><option value=1985>1985</option><option value=1986>1986</option><option value=1987>1987</option><option value=1988>1988</option><option value=1989>1989</option><option value=1990>1990</option><option value=1991>1991</option><option value=1992>1992</option><option value=1993>1993</option><option value=1994>1994</option><option value=1995>1995</option><option value=1996>1996</option><option value=1997>1997</option><option value=1998>1998</option><option value=1999>1999</option><option value=2000>2000</option><option value=2001>2001</option><option value=2002>2002</option><option value=2003>2003</option><option value=2004>2004</option><option value=2005>2005</option><option value=2006>2006</option><option value=2007>2007</option><option value=2008>2008</option><option value=2009>2009</option><option value=2010>2010</option>  
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Gender</td>
                                            <td valign="middle" valign="middle">
                                                <input type="radio" name="gender" id="genderM" value="Male" />&nbsp;Male&nbsp;&nbsp;&nbsp;&nbsp;
                                                <input  type="radio" name="gender" id="genderFM" value="Female" checked/>&nbsp;Female
                                            </td>
                                        </tr>
                                        -->
                                            <tr>
                                            <td class="normalText">Comments</td>
                                            <td>
                                                <textarea name="comments" id="comments" cols="22" rows="3" ></textarea>    
                                            </td>
                                        </tr>
                                        
                                        <tr>
                                            <td class="normalText">&nbsp;</td>
                                            <td valign="middle"><input class="send" type="image" value="submit" src="images/submit.gif" name="submit"/></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        </form>                        
    
      </div>
      </div> 
      </div>
      </div>
    </div>
    
  </div>
       
 </body>
</html> 


Here is the js

PHP Code:
    var j = jQuery.noConflict();
    function isValidEmail(str) {
       return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
    }
    function validateForm(){
            var firstName;
            var lastName;
            var email;
            var mobile;
            var comment;
            var error;
            
            firstName = j('#firstName').val();
            lastName = j('#lastName').val();
            email = j('#email').val();
            mobile = j('#mobile').val();
            comment = j('#comments').val();
      
      if(firstName=='' || firstName.length < 3){
                error = 'Please Enter Your First Name';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(lastName=='' || lastName.length < 3){
                error = 'Please Enter Your Second Name';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(email=='' || !isValidEmail(email)){
                error = 'Please Enter Your Correct Email';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            //mob
            //$jmob_pattern = '^\d{10}$j';
            if(mobile.length != 10 || isNaN(mobile)){
                error = 'Please Enter Your Correct Mobile Number';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            
            
            if(comment.length < 10){
                error = 'Please Enter A Comment More Than 10 Characters';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            return true;
    } 


Can anybody figure it out.. im trying it all morning

Hi,

I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work.

Is there away around this?

Not sure if providing my script helps or not, but just in case here it:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){

	var btn = $(this).attr('id');
	if(btn == 'submitNewSend'){
		file = 'insertMessage.php';
		Msg = 'Your message has been sent';
	} else if(btn == 'submitNewSend2'){
		file = 'insertMessage.php';
		Msg = 'Your message has been sent';
	} else if (btn == 'submitNewSave'){
		file = 'insertSaveMessage.php';
		Msg = 'Your message has been saved';
	} else if (btn == 'submitNewSave2'){
		file = 'insertSaveMessage.php';
		Msg = 'Your message has been saved';
	}
		var data = $('#MessageNew').serialize();
		$.post (file,data, function(){
				alert(Msg);
			$('#MessageNew').each (function(){
				this.reset();
				});
			});	
				return false;
	});
});
</script>


<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>

And the getloadCompose.php is:
Code:

<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
	<tr>
	<th>Compose Message</th>
	</tr>
	<tr>
	<td class="first">
	<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
	<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save"> 
	<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
	</td>
	</tr>
	<tr>
	<td>
		<br />
		<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
		<div id="txtHintEmailTo"></div>
	</td>
	</tr>
	<tr>
	<td>
		<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
	</td>
	</tr>
	<tr>
	<td>
		<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />

	</td>
	</tr>
	<tr>
	<td class="first">
	<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
	<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save"> 
	<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
	</td>
	</tr>
	</table>
</form>

I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do.

Hello fellow programmers,

I am having some trouble with my javascript doing what I want it to, which is returning values (true/false || 1/0).

I haven't used much javasript but I am experienced with C#, Java, Python etc so this is sort of new to me syntax wise.

Here is what I have so far:
http://jsfiddle.net/HpSyJ/1/

note: for some reason css doesn't like jsfiddle :S, the error messages are hidden in my Notepad++ & firefox combo though

Really all I want is when I hit submit, it runs an alert or changes the error message to visible.

Can someone please have a quick read over and see if anything jumps out at them?

Thanks in advance, Andrew