I am so confused by checkboxes in Ajax

[DBookatay]

I am attempting to create an ajax contact form that the results gets emailed to me. I found a form demo online and edited it to meet my criteria, except that there were no checkboxes in the demo, when I add checkboxes everything but those work.

 

Can someone please guide me through this?

 

Here is the html

<div class="done">
<strong>Thank you !</strong> We've received your questions and someone from our office will respond at our earliest convience.</p>
<p>Check your email, we just sent you a coupon for 10% off your first purchase.</p>
</div>

<div class="form">
<form method="post" action="process2.php" autocomplete="off">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
<ul>
<li>Design:</li>
<li><label for="master_plan"><input type="checkbox" name="service[]" id="master_plan" value="Master Plan" /> Master Plan</label></li>
<li><label for="front_foundation"><input type="checkbox" name="service[]" id="front_foundation" value="Front Foundation" /> Front Foundation</label></li>
<li><label for="backyard_plan"><input type="checkbox" name="service[]" id="backyard_plan" value="Backyard Plan" /> Backyard Plan</label></li>
<li><label for="specialty_garden"><input type="checkbox" name="service[]" id="specialty_garden" value="Specialty Garden" /> Specialty Garden</label></li>
</ul>
<label for="newsletter"><input type="checkbox" name="newsletter" id="newsletter" value="x" checked="checked" /> Yes, I would like to be added to your newsletter list.</label>
<label for="comments">Comments</label>
<textarea name="comments" id="comments" rows="5" cols="40" /></textarea>
<input type="submit" id="submit" value="Sign Up" />
<div class="loading"></div>
</form>
</div>

 

The java is

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function () {
var name = $('input[name=name]');
var phone = $('input[name=phone]');
var email = $('input[name=email]');
var comments = $('textarea[name=comments]');
if (name.val()=='') {
name.addClass('hightlight');
return false;
} else name.removeClass('hightlight');
if (email.val()=='') {
email.addClass('hightlight');
return false;
} else email.removeClass('hightlight');
var data =
'name=' + name.val() +
'&phone=' + phone.val() +
'&email=' + email.val() +
'&comments=' + encodeURIComponent(comments.val());
$('.text').attr('disabled','true');
$('.loading').show();
$.ajax({
url: "process2.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
 if (html==1) {
 $('.form').fadeOut('slow');
 $('.done').fadeIn('slow');
 } else alert('Sorry, unexpected error. Please try again later.');
}
});
return false;
});
});
</script>

 

And the php is

$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$phone = ($_GET['phone']) ?$_GET['phone'] : $_POST['phone'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$mailing = ($_GET['newsletter']) ?$_GET['newsletter'] : $_POST['newsletter'];
$comments = ($_GET['comments']) ?$_GET['comments'] : $_POST['comments'];


if($phone) {$phone = '('.substr($phone, 0, 3).') '.substr($phone, 3, 3).'-'.substr($phone, 6, 4);} else {$phone = '(Not Entered)';}

 

How do I add the checkbox values, ONLY if the box is checked?

(I didn't add the email part, because all of that works except for the "services" part.)

 

I'd like to have whatever services are checked to showup, seperated by a coma.

[DBookatay]

Anyone?

[Jessica]

There's nothing in your script that even attempts to do what you're asking. So... Try it and see.

[DBookatay]

There's nothing in your script that even attempts to do what you're asking. So... Try it and see.

 

I know, because I don't know how to do it

[Jessica]

How did you get every OTHER form element's value? Did you try looking it up in the jQuery manual? It explicitly tells you how to do this.

 

http://api.jquery.com/val/

[DBookatay]

How did you get every OTHER form element's value? Did you try looking it up in the jQuery manual? It explicitly tells you how to do this.

 

http://api.jquery.com/val/

 

I looked at this page, and tried both of these and neither worked:

var master_plan = $('input[name=masterplan]:checked').val();
var master_plan = $('input:master_plan:checked').val();

 

There are 24 checkboxes on my form, but am only trying on 1 for now, just till I see that it's working.

[Jessica]

Your HTML doesn't have an input with the name of master_plan.

[DBookatay]

Your HTML doesn't have an input with the name of master_plan.

 

On the "real" for it does... I just posted a snipit...

Which one is correct:

 

var master_plan = $('input[name=masterplan]:checked').val();

var master_plan = $('input:master_plan:checked').val();

[Jessica]

Show me your "real" html.

 

Probably the first one. I don't know. What does it say if you alert() it?

[DBookatay]

Show me your "real" html.

 

Probably the first one. I don't know. What does it say if you alert() it?

 

 

 

<div class="form">

<form method="post" action="process2.php" autocomplete="off">

<label for="name">Name</label>

<input type="text" name="name" id="name" value="Brad Guy" />

<label for="phone">Phone</label>

<input type="text" name="phone" id="phone" value="2039942323" />

<label for="email">Email</label>

<input type="text" name="email" id="email" value="brad@illism.com" />

<ul>

<li>Design:</li>

<li><label for="master_plan"><input type="checkbox" name="master_plan" id="master_plan" value="Master Plan" /> Master Plan</label></li>

<li><label for="front_foundation"><input type="checkbox" name="front_foundation" id="front_foundation" value="Front Foundation" /> Front Foundation</label></li>

<li><label for="backyard_plan"><input type="checkbox" name="backyard_plan" id="backyard_plan" value="Backyard Plan" /> Backyard Plan</label></li>

<li><label for="specialty_garden"><input type="checkbox" name="specialty_garden" id="specialty_garden" value="Specialty Garden" /> Specialty Garden</label></li>

</ul>

<label for="newsletter"><input type="checkbox" name="newsletter" id="newsletter" value="x" checked="checked" /> Yes, I would like to be added to your newsletter list.</label>

<label for="comments">Comments</label>

<textarea name="comments" id="comments" rows="5" cols="40" />this is solely a test</textarea>

<input type="submit" id="submit" value="Sign Up" />

<div class="loading"></div>

</form>

</div>

[Jessica]

I don't get why you'd take the time to write something completely different than your actual code, to post it here. Do you see the difference between the names on the inputs in this and your original post?

 

For the record, your Label should be before or after your checkbox, not surrounding it.

[DBookatay]

I don't get why you'd take the time to write something completely different than your actual code, to post it here. Do you see the difference between the names on the inputs in this and your original post?

 

For the record, your Label should be before or after your checkbox, not surrounding it.

 

If you were me, a beginner, how would you do it? I am so lost its insane!

[Jessica]

This code works.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<input type="checkbox" name="master_plan" value="Master Plan" />

<script type="text/javascript">
$(document).ready(function(){
$('input[name=master_plan]').click(
function(){
alert($(this).val());
}
);
});
</script>

 

Figure out what's different in yours.

[Jessica]

I'd post my real code, not write code that has completely different names which just wastes people's time when you're trying to identify an element by NAME.

[DBookatay]

I'd post my real code, not write code that has completely different names which just wastes people's time when you're trying to identify an element by NAME.

 

I did, but what I meant buy the "real code" is that there are 24 checkboxes, so I didnt want to post all of them, only a few...

I apoligize

[Jessica]

The original code you posted is VERY different from the code you just now posted.

 

You also posted masterplan and master_plan. 

 

Pick one and stick with it. The code I posted works. 

[kicken]

For the record, your Label should be before or after your checkbox, not surrounding it.

 

For what it's worth, including the input within the label tags is valid, and also eliminates the need for the for attribute as the relationship is then implied by the structure of the html:

eg:

<label><input type="checkbox" value="y" name="agree"> Yes I agree to the terms</label>

will work to set the text as a label for the agree checkbox.  I structure my forms like this a lot since it reduces the need for both the for and id attributes most of the time in my cases.

 

 

@DBookatay: Here's the deal with checkboxes, either they are present or not.  So what you need to do is check if the box is checked.  If it is you add it's name/value pair to the data string.  If it's not you omit it entirely (rather than just set it empty like with a text box).  That is going to boil down to code roughly like this:

 

Eg:

var checkbox = $('input[name=master_plan]');
if (checkbox.is(':checked')){ data += '&master_plan='+escapeURIComponent(checkbox.val()); }

 

Now, unless there is a particular reason why you're trying to grab these fields individually and build your data string, since you are already using jQuery you may as well just use it's serialize() method.  This method will go through the form and return a url encoded string in pretty much exactly the same manner as the browser would when you submit a form.  That would take your code down to just something like 

$(document).ready(function() {
$('#submit').click(function () {
	var name = $('input[name=name]');
	if (name.val()=='') {
		name.addClass('hightlight');
		return false;
	} 
	else name.removeClass('hightlight');		

	var email = $('input[name=email]');
	if (email.val()=='') {
		email.addClass('hightlight');
		return false;
	}
	else email.removeClass('hightlight');

	$('.text').attr('disabled','true');
	$('.loading').show();
	$.ajax({
		url: "process2.php",
		type: "GET",
		data:  $(this.form).serialize(),
		cache: false,
		success: function (html) {
			if (html==1) {
				$('.form').fadeOut('slow');
				$('.done').fadeIn('slow');
			} 
			else alert('Sorry, unexpected error. Please try again later.');
		}
	});
	return false;
});
});

[Jessica]

Kicked you are very right, I stand corrected.

[DBookatay]

@kicken - Thank you VERY much... This did exactly what I was looking for.

[Jessica]

OP: you need to learn basic debugging. You completely missed the point I was trying to make, and unless you go back and understand what you were doing wrong, it'll happen again.

[DBookatay]

OP: you need to learn basic debugging. You completely missed the point I was trying to make, and unless you go back and understand what you were doing wrong, it'll happen again.

 

I'm learning, that why Im asking questions.... I read the page you suggested, trying to figure things out...

I appreciate the help!

[Jessica]

Nevermind. *smh*

[DBookatay]

Nevermind? Your kidding me right?

I dont understand what the attitude is about, your the "Guru," I am not....

[Jessica]

Because you missed the point I made over and over.

Your code keeps changing the name on the input. You also keep changing what name you try to use. You don't have to be an expert to understand that a computer thinks "master_plan" and "masterplan" are two different things.