AJAX works on first form, but not latter forms - why?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

AJAX works on first form, but not latter forms - why?

Post by simonmlewis »

This works for the first form, but not for the latter forms.
I've tried naming the forms to give them an identity, but not sure if that is how to separate them, or even why the latter one isn't working anyway.

Code: Select all

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/js_sendtofriend.js"></script>

<form name='1'>
<input type='text' id='email' name='email' class='sendtofriendemail'/>
<input type='hidden' id='buildid' name='buildid' value='$row->buildid'/><input type='button' id='submit' value='Submit' class='submitnewsletter'/>
</form>

<form name='2'>
<input type='text' id='email' name='email' class='sendtofriendemail'/>
<input type='hidden' id='buildid' name='buildid' value='$row->buildid'/><input type='button' id='submit' value='Submit' class='submitnewsletter'/>
</form>
JS file is:

Code: Select all

$(document).ready(function(){
$("#submit").click(function(){
var email = $("#email").val();
var buildid = $("#buildid").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = '&email=' + email + '&buildid=' + buildid;
if(email=='')
{
alert("Please Fill All Fields");
}
else
{
//AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajax_sendtofriend.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
PHP

Code: Select all

$email = isset($_POST['email']) ? $_POST['email'] : null;
$buildid = isset($_POST['buildid']) ? $_POST['buildid'] : null;

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo "This ($email) email address is considered invalid.";
}
else
{
        $to = "$email";
        $subject =  "Wishlist";
        $headers = "From: $email";
        $body = "Thank you for your email.  We will be in touch with you as soon as possible.
        
Regards,
";
        mail ($to, $subject, $body, $headers);

echo "Thank you for submitting to $email your Build $buildid";

}
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: AJAX works on first form, but not latter forms - why?

Post by Celauran »

IDs are meant to be unique, you're reusing them across forms.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: AJAX works on first form, but not latter forms - why?

Post by Celauran »

Use a class on the submit button instead, then get the relevant form using jQuery.parent()?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: AJAX works on first form, but not latter forms - why?

Post by simonmlewis »

I am a real early student at this, so what is jQuery.parent() ?
I understand about the IDs. I can just pop a $row>id next to each one. But don't know what parent is, where it goes, or what it does.

(I only just worked out the Ajax form submission last week!!)
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: AJAX works on first form, but not latter forms - why?

Post by Celauran »

http://api.jquery.com/parent/

Basically, you can target the submit button by class and traverse the DOM to get the parent form without having to worry about IDs
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: AJAX works on first form, but not latter forms - why?

Post by simonmlewis »

I'm now reading that page, but it's stil a bit Greek to me!
I've never done work with DOM.
You somehow tell it which form you are submitting? And this can be done dynamically? As this is for Wishlists, so there could be 2, there could be 100.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: AJAX works on first form, but not latter forms - why?

Post by Celauran »

Should be enough to get you started

Code: Select all

$('.submitnewsletter').click(function () {
    var form = $(this).parent('form');
    var email = form.children('input[name=email]').val();
    alert(email);
});
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: AJAX works on first form, but not latter forms - why?

Post by simonmlewis »

One sec.. where exactly does this go?
I'm assuming in js_sendtofriend.js, but I don't know where.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: AJAX works on first form, but not latter forms - why?

Post by simonmlewis »

Code: Select all

$(document).ready(function(){

$('.submitsendtofriend').click(function () {
    var form = $(this).parent('form');
    var email = form.children('input[name=email]').val();
    var buildid = form.children('input[name=buildid]').val();

var dataString = '&email=' + email + '&buildid=' + buildid;


if(email=='')
{
alert("Please Fill All Fields");
}
else
{
//AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajax_sendtofriend.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
Close ??
It's not working. Rejecting all emails. But both forms are now generating popups.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: AJAX works on first form, but not latter forms - why?

Post by Celauran »

Code: Select all

$(document).ready(function() {
	$(".submitnewsletter").click(function() {
		var form = $(this).parent('form');
		var email = form.children('input[name=email]').val();
		var buildid = form.children("input[name=buildid]").val();
		// etc
		// Returns successful data submission message when the entered information is stored in database.
		var dataString = '&email=' + email + '&buildid=' + buildid;
		if (email == '') {
			alert("Please Fill All Fields");
		} else {
			//AJAX code to submit form.
			$.ajax({
				type: "POST",
				url: "ajax_sendtofriend.php",
				data: dataString,
				cache: false,
				success: function(result) {
					alert(result);
				}
			});
		}
		return false;
	});
});
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: AJAX works on first form, but not latter forms - why?

Post by simonmlewis »

Code: Select all

<div id='form$row->id'>
<input type='text' id='email' name='email' class='sendtofriendemail'/>
<input type='hidden' id='buildid' name='buildid' value='$row->buildid'/>
<input type='button' id='submit' value='Submit' class='submitsendtofriend'/>
</div>

JS FILE

Code: Select all

$(document).ready(function(){

$('.submitsendtofriend').click(function () {
    var form = $(this).parent('form');
    var email = form.children('input[name=email]').val();
    var buildid = form.children('input[name=buildid]').val();
// etc
// Returns successful data submission message when the entered information is stored in database.
var dataString = '&email=' + email + '&buildid=' + buildid;


if(email=='')
{
alert("Please Fill All Fields");
}
else
{
//AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajax_sendtofriend.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
Where am I wrong here?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: AJAX works on first form, but not latter forms - why?

Post by simonmlewis »

I get this quoted when submitted:
This (undefined) email address is considered invalid.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: AJAX works on first form, but not latter forms - why?

Post by Celauran »

You appear to have removed the parent form.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: AJAX works on first form, but not latter forms - why?

Post by simonmlewis »

Got it.
Just needed <form> and </form>.

Works a treat. Thanks a million.

If I Was doing this with an upload document, is that more tricky?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: AJAX works on first form, but not latter forms - why?

Post by Celauran »

simonmlewis wrote:If I Was doing this with an upload document, is that more tricky?
Like a file upload inside the form? You may want to take a look at jQuery File Upload
Post Reply