Page 1 of 1

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

Posted: Thu Aug 07, 2014 8:44 am
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";

}

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

Posted: Thu Aug 07, 2014 8:55 am
by Celauran
IDs are meant to be unique, you're reusing them across forms.

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

Posted: Thu Aug 07, 2014 8:57 am
by Celauran
Use a class on the submit button instead, then get the relevant form using jQuery.parent()?

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

Posted: Thu Aug 07, 2014 9:01 am
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!!)

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

Posted: Thu Aug 07, 2014 9:03 am
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

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

Posted: Thu Aug 07, 2014 9:06 am
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.

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

Posted: Thu Aug 07, 2014 9:30 am
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);
});

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

Posted: Thu Aug 07, 2014 9:37 am
by simonmlewis
One sec.. where exactly does this go?
I'm assuming in js_sendtofriend.js, but I don't know where.

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

Posted: Thu Aug 07, 2014 9:47 am
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.

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

Posted: Thu Aug 07, 2014 9:47 am
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;
	});
});

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

Posted: Thu Aug 07, 2014 9:51 am
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?

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

Posted: Thu Aug 07, 2014 9:53 am
by simonmlewis
I get this quoted when submitted:
This (undefined) email address is considered invalid.

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

Posted: Thu Aug 07, 2014 9:58 am
by Celauran
You appear to have removed the parent form.

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

Posted: Thu Aug 07, 2014 10:00 am
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?

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

Posted: Thu Aug 07, 2014 10:02 am
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