Created
October 30, 2009 17:19
-
-
Save philk/222546 to your computer and use it in GitHub Desktop.
Javascript functions for wedding RSVP form
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| row = 1; | |
| // Add another row function. I'm not proud of this at all. | |
| $("#addrow").click(function(){ | |
| var fn = '<input type="text" name="data['+row+'][first_name]" value="" id="first_name'+row+'"/>'; | |
| var ln = '<input type="text" name="data['+row+'][last_name]" value="" id="last_name'+row+'"/>'; | |
| var em = '<input type="text" name="data['+row+'][email]" value="" id="email'+row+'"/>'; | |
| var att = '<select name="data['+row+'][attending]" value="" id="attending'+row+'"><option class="attendingyes" value="1">Yes</option><option class="attendingno" value="0">No</option></select>'; | |
| var rem = '<a class="removebutton" name="row'+row+'" href="#"><img src="/images/remove.png"/></a>' | |
| var tr = '<tr class="extratrs" id="row'+row+'"><td>'+fn+'</td><td>'+ln+'</td><td>'+em+'</td><td>'+att+'</td><td id="removetd">'+rem+'</td></tr>'; | |
| $(tr).hide().appendTo($('#rsvp_table > tbody:last')).fadeIn('slow'); | |
| $('.removebutton').click(function(){ | |
| $('#' + $(this).attr('name')).fadeOut(function(){$(this).remove();}); | |
| }); | |
| row = row + 1; | |
| return false; | |
| }); | |
| // Setup ajaxForm | |
| $('#rsvp_form').ajaxForm({ | |
| dataType: 'json', | |
| beforeSubmit: submitted, | |
| success: completed | |
| }); | |
| // Loading plugin from here: http://code.google.com/p/jquery-loading-plugin/ | |
| $('#rsvp_form').loading({ onAjax: true, align: 'center', pulse: 'fade', text: 'Submitting'}); | |
| }); | |
| // This happens before the form is submitted. Removes error boxes from the form. | |
| function submitted(formData) { | |
| $('.formerror').removeClass(); | |
| return true; | |
| }; | |
| // Stuff to do after the server returns a 200 message. jsonData is the json formatted return info from Sinatra. | |
| function completed(jsonData) { | |
| var errors = 0; | |
| jQuery.each(jsonData, function(maini, mainval){ | |
| if (mainval["response"] == "success") { | |
| } else { | |
| errors += 1 | |
| jQuery.each(mainval, function(secondi, secondval){ | |
| $('#' + secondval + mainval["index"]).addClass("formerror"); | |
| }); | |
| }; | |
| }); | |
| if (errors == 0) { | |
| $('#rsvp_form').fadeOut("fast", function(){ | |
| $('#rsvp_form').after("<div id='success'><h4>Thanks! Your RSVP has been received.</h4><a href='#' onClick='resetForm(true);'>Forget Someone?</a></div>"); | |
| }); | |
| } else { | |
| resetForm(false); | |
| $("<h4 class='errors'><center>Please fill in the marked fields</center></h4>").hide().insertBefore($('#rsvp_table')).slideDown('slow'); | |
| }; | |
| return false; | |
| }; | |
| // Reset form back to original look | |
| function resetForm(cleardata) { | |
| $('#success').remove(); | |
| $('.errors').remove(); | |
| if (cleardata) { | |
| $('#rsvp_form').clearForm(); | |
| $('.attendingyes').attr({ | |
| selected: "selected" | |
| }); | |
| $('.extratrs').remove(); | |
| }; | |
| $('#rsvp_form').show(); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment