SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie Question: Jquery powered form

    I recently put together a form enhanced using the Jquery framework and using a validation plugin in my contact page for a Website I'm building. There are two things I need to do to finish it and make it work like it should and/or like I want it to. First of all, I need to enter some code that will automatically generate a confirmation e-mail to the user upon clicking the submit button. I would also like it to generate an e-mail to me at the same time notifying me and containing the users information. The other thing I need to do is to get it to work in conjunction with a server-side script that will validate the form from there also and generate the emails from there.

    I have a CGI script that works well for validating and generating the email, but I can't get it to work with the Jquery form. I don't want to revert to using the CGI script strictly because I like the way Jquery doesn't require the page to reload or require me to have two extra pages; one for the thank you page and the other for the error page if the required fields aren't filled in properly. When you hit the submit button it simply generates the thank you message on the spot without reloading the page - sweet.

    I really don't have a clue on how to implement this so I would appreciate at least a point in the right direction. Here is the link to the contact page on the Website: http://sitekitchen.us/morganaircraft/contact.html

    I can't seem to find the exact plugin I'm using, but it is called jquery.validate.pack.js and I believe I got it here: http://bassistance.de/jquery-plugins...in-validation/

    Here is the JavaScript enhancement script, I am just using a simple "Feedback" form so the pertinent info is toward the bottom:

    Thanks!

    $(document).ready(function() {


    // Password Strength
    if ($('#sign-up').size()) {
    $.getScript(
    'js/jquery.passroids.min.js',
    function() {
    $('form').passroids({
    main : "#password"
    });
    }
    );
    }

    // Selectbox styling
    if ($('form select').size()) {
    $.getScript(
    'js/jquery.selectbox.min.js',
    function() {
    $('select').selectbox();
    // Wrap inputs with styling helper
    $('input.selectbox').each(function() {
    $(this).wrap('<span id="wrapper_' + $(this).attr('id') + '" class="selectbox-input-wrapper"></span>');
    });
    }
    );
    }

    /*
    * Form Validation
    */

    // Set Defaults
    jQuery.validator.setDefaults({
    errorElement : 'a',
    wrapper : 'li',
    errorLabelContainer : '#form-messages ul',
    focusInvalid: false,
    onfocusout: false,
    highlight: function(element, errorClass) {
    var errorContainer = $(element).parents('div').eq(0),
    existingIcon = $('img.icon', errorContainer);

    // Account for groups of questions
    if ($(element).parents('.group').size()) {
    errorContainer = $(element).parents('.group');
    }

    // Replace any existing icon with error icon
    if (existingIcon.size()) {
    existingIcon.replaceWith('<img src="images/icon-error.gif" alt="error" class="icon" />');
    }
    // Otherwise append to container
    else {
    errorContainer.append('<img src="images/icon-error.gif" alt="error" class="icon" />');
    }

    // Highlight field
    $(element).addClass(errorClass);

    },
    unhighlight: function(element, errorClass) {
    var errorContainer = $(element).parents('div').eq(0);

    // Account for groups of questions
    if ($(element).parents('.group').size()) {
    errorContainer = $(element).parents('.group');
    }

    // Replace icon with that of success
    if ($(':input.error', errorContainer).size() <= 1) {
    $('img.icon', errorContainer).replaceWith('<img src="images/icon-valid.gif" alt="Valid" class="icon" />');
    }

    // Unhighlight field
    $(element).removeClass(errorClass);
    },
    showErrors: function(errorMap, errorList) {
    var numErrors = this.numberOfInvalids();

    this.defaultShowErrors();

    // Populate/update error message
    if (!$('h2', errorContainer).size()) {
    errorContainer.prepend('<h2></h2>');
    }
    if (numErrors) {
    $('h2', errorContainer).html('<strong>Oops!</strong> Your form contains ' + numErrors + " error" + ((numErrors == 1) ? '' : 's') + ':');
    $(this.currentForm).removeClass('valid');
    }
    // Success is ours!
    else {
    $('h2', errorContainer).text('All errors have been corrected, please continue');
    $(this.currentForm).addClass('valid');
    }
    // Setup links
    $('a', errorContainer).each( function() {
    var el = $(this),
    fieldID = el.attr('htmlfor'),
    field = $('#' + fieldID);

    // Add href attribute to linsk
    el.attr('href', '#' + fieldID);

    // Focus on click
    el.bind('click', function() {
    field.trigger('focus');
    $('html,body').animate(
    {scrollTop: field.offset().top - 20}, 100
    );
    return false;
    });
    });
    },
    submitHandler: function(form) {
    $(form).hide();
    $('<p class="introduction">Thank you for your interest! A confirmation email has been sent to you. If a response is required I will get back to you within two business days or sooner. Thank you!</p>')
    .insertBefore(form)
    .show();
    $('html,body').animate(
    {scrollTop: $("div#form-messages").offset().top}, 1000
    );
    }
    });

    // Add a placeholder for form messages
    var errorContainer = $('<div id="form-messages"><ul></ul></div>').hide();
    errorContainer.insertBefore('fieldset div:first');

    // Bind event to invalid form submission
    $("form").bind("invalid-form.validate", function(e, validator) {
    errorContainer.show();
    $('html,body').animate(
    {scrollTop: errorContainer.offset().top - 20}, 100
    );

    errorContainer.focus();
    });

    // Override default messages
    $.extend($.validator.messages, {
    required : "This field is required",
    email : "Please enter a valid email",
    digits : "Please enter a numeric value"
    });


    /*
    * Initiate Validation Plugin
    */
    $('#sign-up form').validate({
    rules : {
    // Email
    'email' : {
    required : true,
    email: true
    },
    // Password
    'password' : {
    required : true
    },
    // Password Confirmation
    'password_confirmation' : {
    required : true,
    equalTo : '#password'
    },
    // Profile Link
    'profile_link' : {
    required : true
    },
    // Terms of Service
    'agree_tos' : {
    required : true
    }
    },
    messages : {
    'email' : {
    required : 'Enter your email address',
    email : 'Enter a valid email address, for example user@example.com'
    },
    'password' : {
    required : 'Ensure your passwords match'
    },
    'password_confirmation' : {
    required : 'Confirm your password',
    equalTo : 'Ensure your passwords match'
    },
    'profile_link' : {
    required : 'Enter a link for your profile'
    },
    'agree_tos' : {
    required : 'You must agree to the terms of service'
    }
    }
    });

    $('#feedback form').validate({
    rules : {
    // Name
    'name' : {
    required : true
    },
    // Email
    'email' : {
    required : true,
    email: true
    },
    // Comments
    'comment' : {
    required : true
    }
    }
    });

    });

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sonofadoc View Post
    First of all, I need to enter some code that will automatically generate a confirmation e-mail to the user upon clicking the submit button. I would also like it to generate an e-mail to me at the same time notifying me and containing the users information.
    It is not possible for JavaScript to do that. At best it can pass the form information to a server-side script (such as PHP) where the PHP code can send the email instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need to know how to write the JavaScript code to call the server-side script into action when the submit button is clicked on.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sonofadoc View Post
    I need to know how to write the JavaScript code to call the server-side script into action when the submit button is clicked on.
    You are using what looks to be jQuery, so this info on jQuery.post() should be of some use.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    I'll check it out.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •