javascript - jQueryモーダルへの連絡フォームの追加（fallr）

Question

私はjavascriptとjQueryにかなり慣れていませんが、徐々に理解を深めています。残念ながら、私は本当に自分のWebサイトを稼働させる必要があり、連絡フォームの作成に苦労しています。

Fallr（http://codecanyon.net/item/fallr-simple-elegant-modal-box-jquery-plugin/372581）というjQueryプラグインをダウンロードすると、連絡先フォームに最適なポップアップ「モーダル」ボックスが作成されます。

フォームがその中でどのように機能するかを理解するのに本当に苦労しています。ログインフォームのコードが提供され、お問い合わせフォームに変更しようとしていますが、非常に混乱しています。jsコード：

                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'}
                },
            }); 

PHPの連絡先ファイルを設定しました。3番目のテキストフィールドを大きくして、送信ボタンがクリックされたときに連絡先ファイルに送信したいだけです。アラートと検証をなんとかして解決できると確信しています。

Answer 1

1. ログイン関数thisでは、onclickイベントまたはボタンになります（誰が知っているか、それはjavascriptです！）
2. 入力にIDを追加し、フォームにアクション、メソッド、IDを追加します

3. 提出する

   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'}
       },
   });