one function for a range of forms

[MasterACE14]

Hello,

 

I have the following code which just submits my login form via AJAX. It works fine. But I am wondering if I can adjust this to work for pretty much every form on my website, rather then copy paste this code over and over and only changing the values to match the form respectively.

	$('#login').livequery('click', function() {
	$("#contentmain").slideUp();

	var username = $("input#username").val();  
	var password = $("input#password").val();  
	var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");

	$.ajax({
		type: "POST", url: "lib/login.php", data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});

 

any help, ideas or suggestions are welcome and appreciated!

 

Cheers, Ace

[MasterACE14]

I believe I have found a solution. By using the jQuery serialize function I am able to submit all the forms fields. However with testing it with lib/login.php it did work once, and I'm not sure what I changed, but it started giving a error saying the fields weren't submitted.

 

Here's my new code.

	$('#login').livequery('click', function() {
	$("#contentmain").slideUp();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("#loginForm form").serialize();

	$.ajax({
		type: "POST", url: "lib/login.php", data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});

 

Regards, Ace

[MasterACE14]

I've managed to get it working by changing this line...

var dataString = $("#loginForm form").serialize();

to...

var dataString = $("form").serialize();

however, when there is more than 1 form on a page, won't this submit all the forms at once?