Thursday 23 July 2009

Using jQuery and a Web Service for unobtrusive email form

This could probably be done better and i will look into making it a jQuery plugin when I get time. Basically Iam using jQuery to collect all the variables from a form and looping through them to create a html string. then using a web service to send the text and have it emailed, then report whether it was a success or not.

Sys.Application.add_load(function() {
//Collect form variables
$("input:submit").click(function(e) {
e.preventDefault();
var tb = $("input:text");
var rb = $("input:radio");
var cb = $("input:checkbox");
var sel = $("option:selected");
var tbArea = $("textarea");
var text = "";
tb.each(function(n) {
text += "" + $(this).attr("id") + ": " + $(this).val() + "
";
});
tbArea.each(function(n) {
text += "" + $(this).attr("id") + ": " + $(this).val() + "
";
});
rb.each(function(n) {
if ($(this).attr("checked")) {
text += "" + $(this).attr("id") + ": " + $(this).val() + "
";
}
});
cb.each(function(n) {
if ($(this).attr("checked")) {
text += "" + $(this).attr("id") + ": " + $(this).val() + "
";
}
});
sel.each(function(n) {
text += "" + $(this).parent("select").attr("id") + ": " + $(this).val() + "
";
});
output.append(text);
EmailService.SendMail(text, success, failure);
});
//Send to web service as string
});

1 comment:

  1. Thanks for this. Very informative post. As an IT consultant myself, I learned a lot.

    ReplyDelete