2016-08-17 9 views
0

以下。 AJAXコールを持っています。これは.phpファイルを引っ張って人のIPをチェックし、フォームを表示します。フォームが送信されると、フォームがアクティブになります。 2番目のAJAX呼び出しでデータを送信します。サブミット機能が動作していませんか?

module.exports = { 
    init: function() { 
    $.ajax({ 
    url: "/microsub.php", 
    method: 'GET', 
    success: function (data) { 
     if (data == 1) { 
     $('#rdm-below-header').append('<div id=\"modal\" class=\"modalStyle\">' + 
       '<div>' + 
       '<button type=\"button\" id=\"close\" class=\"close\" data-dismiss=\"modal\" aria-label=\"close\"><span aria-hidden=\"true\">&times;</span></button><br>' + 
       '<div id=\"titleText\" style=\" text-align:center; font-size: 24px; margin-top: 15px;\">Fill in your details for 24hr access to Risk.net</div><br>' + 
       '<form style="text-align:center; clear:both" id="microsubs_form">' + 
       '<input type=\"text\" id=\"ms_firstName\" name=\"ms_firstName\" required placeholder=\"First Name\" style=\"float:left;\" >' + 
       '<input type=\"text\" id=\"ms_lastName\" name=\"ms_lastName\" required style=\"float:left; margin-left:20px;\" placeholder=\"Last Name\">' + 
       '<input type=\"email\" id=\"ms_email\" name=\"ms_email\" required placeholder=\"Corporate Email address\" pattern=\"^.*(\*barclays|\*barcap.com).*$\" oninvalid=\"this.setCustomValidity(\'Please enter your corporate email\')\" style=\"float:left; margin-top: 10px;\">' + 
       '<input type=\"password\" id=\"ms_password\" name=\"ms_password\" required style=\"clear:right; margin-top: 10px; margin-left: 20px;\" placeholder=\"Password\" pattern=\".{6,}\">' + 
       '<input type=\"text\" id=\"microsub_flag\" name=\"microsub_flag\" hidden=\"true\">' + 
       '<input type=\"submit\" name=\"submit\" style=\"alignment-adjust:central; margin-top:30px; clear:right;\" class=\"msProcess\" id=\"submit\" onclick=\"formSubmit()\"><br>' + 
       '</form>' + 
       '<div style=\"text-align:center; clear: both; font-size: 16px; margin-top: 5px; \"><br>' + 
       'If you already have a subscription, <a href=\"login\">sign in here.</a>' + 
       '</div>' + 
       '</div>' + 
       '</div>'); 
     } 
     console.log(data); 
    }, 
    error: function (error) { 
     console.log(error); 
    } 
    }); 

    //Display IP Form 

    //On Submit form via AJAX 

    // Bind to the submit event of our form 
    function formSubmit() { 
    $("#microsubs_form").submit(function (event) { 
     var request; 
     // Abort any pending request 
     if (request) { 
      request.abort(); 
     } 
     // setup some local variables 
     var $form = $(this); 
     // Let's select and cache all the fields 
     var $inputs = $form.find("input, select, button, textarea"); 
     // Serialize the data in the form 
     var serializedData = $form.serialize(); 
     // Let's disable the inputs for the duration of the Ajax request. 
     // Note: we disable elements AFTER the form data has been serialized. 
     // Disabled form elements will not be serialized. 
     $inputs.prop("disabled", true); 
     // Fire off the request to /form.php 
     request = $.ajax({ 
     url: "/ms_form_handler.php", 
     type: "POST", 
     data: serializedData, 
     success: function (data) { 
      console.log(data); 
     }, 
     error: function (error) { 
      console.log(error); 
     } 
     }); 
     // Prevent default posting of form 
     event.preventDefault(); 
    }); 
    } 
    ; 
}}; 
//On Success Hide form, show success message ask to login 
//Set cookie to hide the form 
//utility.setCookie(name); 
+0

あなたの '$( '#micro_subs_form')'は、そのDOM IDがまだ存在しないときに実行されているので、実際にサブミットするためのものは何もありません。 –

+0

Marc Bは、イベントが作成された後、(click、submit、function(event){})on。(すなわちmsProcess) – Yondaime14

答えて

1

あなたはときにイベントをバインドする必要があります。しかし、好ましくは、成功したFORMSUBMIT機能を最初AJAX呼び出しを呼び出したいとのonclickその機能を活性化させる、ボタンがクリックされた提出するときに、第2の機能が有効にされていないようです最初のajaxが完了しました。最初のajax呼び出しで成功関数に

を追加してください。

関連する問題