Question

I’m pretty new to javascript and jQuery, but I am slowly gaining a grasp on it. Unfortunately I really need to get my website up and running, and am struggling to build my contact form.

I downloaded jQuery plugin called Fallr ( http://codecanyon.net/item/fallr-simple-elegant-modal-box-jquery-plugin/372581 ) and it creates pop up ‘Modal’ boxes which are prefect for my contact form.

I’m just really struggling to work out how the form works inside it. Code for a login form was provided, and I have been trying to modify it to be a contact form, but I am getting super confused. The js code:

                var login = function(){
                var user = $(this).children('form').children('input[type="text"]').val();
                var pass = $(this).children('form').children('input[type="text"]').val();
                var pass = $(this).children('form').children('input[type="text"]').val();

                if(user.length < 1 || pass.length < 1){
                    alert('Invalid!\nPlease fill all required forms');
                } else {
                    alert('username: '+user+'\npassword: '+pass);
                    $.fallr('hide');
                }
            }

            $.fallr('show', {
                icon        : 'mail',
                width       : '600px',
                content     : '<h4>contact me!</h4>'
                            + '<form>'
                            +     '<input placeholder="email" type="text"/'+'>'
                            +     '<input placeholder="subject" type="text"/'+'>'
                            +     '<input placeholder="message" type="text"/'+'>'
                            + '</form>',
                position : 'center',
                buttons : {
                    button1 : {text: 'Send :)', onclick: login},
                    button4 : {text: 'Cancel'}
                },
            }); 

I have a PHP contact file set up. I just want to get the third text field to be larger, and send it off to the contact file when the send button is clicked. I’m sure I can work out the alerts and validations somehow.

Answer 1

1. In your login function this is going to be the onclick event or the button (who knows, it’s javascript!)
2. Add ids to your inputs and an action, method and id to your form

3. Submit it

   var login = function(){
       # These are only used for client-side validation
       var user = $('#email').val();
       var subject = $('#subject').val();
       var message = $('#message').val();
   
       # This is where the validation occurs
       if(user.length < 1 || message.length < 1){
           alert('Invalid!\nPlease fill all required forms');
       # If the form passes validation, submit it.
       } else {
           alert('username: '+user+'\nsubject: '+subject);
           # This submits the form 
           # using the action and method attributes of the form
           $('#contactForm').submit();
           $.fallr('hide');
       }
   
   $.fallr('show', {
       icon        : 'mail',
       width       : '600px',
       content     : '<h4>contact me!</h4>'
                   # submit.php is the relative url of your script
                   + '<form id="contactForm" action="submit.php" method="post">'
                   +     '<input id="email" placeholder="email" type="text"/'+'>'
                   +     '<input id="subject" placeholder="subject" type="text"/'+'>'
                   +     '<input id="message" placeholder="message" type="text"/'+'>'
                   + '</form>',
       position : 'center',
       buttons : {
           button1 : {text: 'Send :)', onclick: login},
           button4 : {text: 'Cancel'}
       },
   });