?
Solved

Validate checkbox with Jquery/AJAX form

Posted on 2011-03-25
6
Medium Priority
?
574 Views
Last Modified: 2012-05-11
Hey Experts!!
I have a form that I'm processing with AJAX/Jquery and everything seems to be working except the checkbox.  I just need to pass the value yes if it is checked. If it is not checked, I will show an error.  I followed a tutorial on NetTuts and the link is below.  

The tutorial:
http://rdsrc.us/0JSVPb

My page:
http://rdsrc.us/WLWvil 

My code is attached as well. Line 62 is where I'm declaring the agreement var, but it's not parsing through.  Any and all help is appreciated.
$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#D2E4F7"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {
		// validate and process form
		// first hide any error messages
    $('.error').hide();
		
	  var name = $("input#name").val();
		if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }

	  var address = $("input#address").val();
		if (address == "") {
      $("label#address_error").show();
      $("input#address").focus();
      return false;
    }
	
	  var city = $("input#city").val();
		if (city == "") {
      $("label#city_error").show();
      $("input#city").focus();
      return false;
    }
	
	  var state = $("input#state").val();
		if (state == "") {
      $("label#state_error").show();
      $("input#state").focus();
      return false;
    }
	
	  var zipcode = $("input#zipcode").val();
		if (zipcode == "") {
      $("label#zipcode_error").show();
      $("input#zipcode").focus();
      return false;
    }
		var email = $("input#email").val();
		if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
		var phone = $("input#phone").val();
		if (phone == "") {
      $("label#phone_error").show();
      $("input#phone").focus();
      return false;
    }
		var agreement = $("input#agreement").val(); {
	}
	
		
		var dataString = 
		'&name='+ name +
		'&address='+ address +
		'&city='+ city +
		'&state='+ state +
		'&zipcode='+ zipcode +
		'&email=' + email + 
		'&phone=' + phone
		'&agreement=' + agreement;
		alert (dataString);return false;
		
		$.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#form-container').html("<div id='message'></div>");
        $('#message').html("<img id='checkmark' src='images/check.png' align='left' /><h3>Contact Form Submitted!</h3><br />")
        .append("<p>Thank you for contacting us.</p> <p>We will be in contact soon.</p>")
        .hide()
        .fadeIn(500, function() {
          $('#message').append("");
        });
      }
     });
    return false;
	});
});
runOnLoad(function(){
  $("input#name").select().focus();
});

Open in new window

0
Comment
Question by:LZ1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35221944
var agreement = $("input#agreement").is(":checked");
0
 
LVL 30

Author Comment

by:LZ1
ID: 35221965
@Roads_Roads: Still the same result.  You can reload the page and check it there.  Is there something I'm not doing on the HTML side of things maybe?
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 35223680
You may use :


var agreement = $("input#agreement:checked").val();
	if (agreement  == null) {
		$("label#agreement_error").show();
		$("input#agreement").focus();
		return false;
	}

Open in new window

0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 42

Accepted Solution

by:
David S. earned 1000 total points
ID: 35223689
It seems the "+" is missing from the end of this line:

'&phone=' + phone

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35223697
Or :

var agreement = $("input#agreement:checked").length;
if (agreement  == 0) {

Open in new window


Or same as Roads_Roads :



var agreement = $("input#agreement").is(":checked");
if (agreement) {
		$("label#agreement_error").show();
		$("input#agreement").focus();
		return false;
	}

Open in new window

0
 
LVL 30

Author Closing Comment

by:LZ1
ID: 35224624
Thanks everyone.  I think it was a combination between the '+' missing and my novice call to the checkbox using Jquery.

Thanks guys!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 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