Below code in bold is here i got the problem please help.the problem is while i submit the form a div appear after pressing submit button that data is submitted the div is appearing perfectly fine but the problem is after i inserted this code that is bold below for the validation my data is not submitted.i known the problem but i couldn't fix it.please help me

// JavaScript Document
$(document).ready(function(){
						  
						   
		$("#submit").click(function(){
				 
						 var value = $("#heads").val();
						 var value2 = $("#subhead").val();
						 var value3 = $("#amount").val();
						 var value4 = $("#stud_id").val();
							//	alert(value3);
							
							
			
						   
							
								
						   if(value =="")
						   {
							   $("#heads").css('border','1px solid #F00');	
							  
						   }
						   
						   if(value2 =="")
						   {
							   $("#subhead").css('border','1px solid #F00');
							
						   }
						   
						   if(value3 =="")
						   {
							   $("#amount").css('border','1px solid #F00');	
							  
						   }
						   
						    if(value4 =="")
						   {
							   $("#stud_id").css('border','1px solid #F00');
							  return false;
						   }
						   [B]
						   //// the problem is here
						  if((value !="" && value2 != "")&&(value3!= "" && value4 != ""))
						   {
							   $(".msg").delay(1500).fadeOut(1500).addClass("highlight");
							   $(".msg").html('<b><center style="font-family: georgia; margin-top: 12px;  margin-left: 10px;">Data has been enter</center></b>');
												return false;
							   }[/B]
						    
						  
						   
						   
						   
						   });
						   
						   
						   
						   $(".Center").click(function(){
								   
								  var value = $("#heads").val();
								  var value2 = $("#subhead").val();
								  var value3 = $("#amount").val();
								  var value4 = $("#stud_id").val();
								  
								  
								   if(value !="")
						   {
							   $("#heads").css('border','1px solid #E5E5E5');	
							   
						   }
						   
						    if(value2 !="")
						   {
							   $("#subhead").css('border','1px solid #E5E5E5');	
							   
						   }
						   
						   if(value3 !="")
						   {
							   $("#amount").css('border','1px solid #E5E5E5');	
							   
						   }
						   
						    if(value4 !="")
						   {
							   $("#stud_id").css('border','1px solid #E5E5E5');	
							   
						   }
						   
						   
						
								   });
		    	
				
				           $("input[type]=text").keydown(function(event){
											
                            if(event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39)				
				            {
												
		       				}
							else
						    if((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 ))
					        {
					         event.preventDefault();	
					         }
				
							  });
							
		  });

Recommended Answers

All 6 Replies

Extemer,

Try this (untested):

$(document).ready(function(){

	var $textInputs = $("input[type]='text'");//find the input fields just once and keep a reusable jQuery instance in the $(document).ready closure.

	$("#myForm").submit(function(){//control form submission with a handler for the form's "submit" event.
		var form = this;
		var ok = true;//assume all is ok until any one error indicates otherwise.
		$textInputs.each(function(){//scan the text input fields
			var $this = $(this);
			if($this.val() == "") {
				$this.addClass('error');//apply .error{...} style (in stylesheet)
				ok = false;
			}
			else {
				$this.removeClass('error');//remove error style (revert to normal)
			}
		});
		if(ok){//if no errors were found, do the fancy stuff then submit the form
			$(".msg").addClass("highlight").html('Data has been entered').delay(1500).fadeOut(1500, function(){
				form.submit();
			});
		}
		return false;//suppress natural form submission
	});
	$textInputs.keydown(function(event){
		var okKeys = [8, 37, 39, 46];
		$.inArray(event.keyCode, okKeys) { return; }
		if((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )){
			event.preventDefault();
		}
	});
});

Notes:

  • Controlling form submission with a "submit" handler is reliable. Intercepting a "submit" button will not work in all browsers.
  • You don't need to address the individual text fields by id. A generalised block of jQuery code does the job.
  • Avoid coding styles in javascript. Control appearance by adding/removing class names.

Correction at line 27:

if($.inArray(event.keyCode, okKeys) >= 0) { return; }

Airshow

i am still facing the same error as before i tried my own code and now yours is hitting the submit enter zeros in my db beside entering the values and when i exclude the JQ validate file it enter the data correctly..i cant figure it out is that because of that validate.js file that my data is not entering correctly

Extemer, $("#myForm") is just sample code.

You need to replace myForm with the id of your form.

If your form doesn't have an id then give it one.

Alternatively, you could try $(document.forms[0])..... without giving the form an id.

Airshow

yea i did it but still not

Then you need to start doing some debugging.

Ask yourself some questions then try to answer them, eg.

Does the submit handler fire?
Does the 'error' class get added to blank input fields?
After blank fields are scanned, is the ok variable false, as you would expect?
Is the 'Data has been entered' message displayed?

Use alerts to inspect the variables.

Don't answer the questions here. Use what you learn to debug the code. That's exactly what I would do but you won't learn anything if I do it for you.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.