2017-11-02 5 views
0

フォームからデータを取得しています。データが無効であれば送信ボタンに、falseが返され、データが有効であれば、成功メソッドでajaxを通してメールを送信しています送信されたかどうかのためにモーダルは、私は、モーダルは、二つの問題モーダルがajaxで開かれるまでフォームを停止する

  1. をフォームでもモーダルはそう表示される前に提出するから、私はそれを停止するevent.preventdefaultを使用し提出するように隠れたが、今持っているされた後にwindow.location.hrefが変更になりたいですモーダルウィンドウが開かれるまでブラウザはステッチを取得する

  2. モーダルウィンドウの位置が変更されていない。ここ

送信ボタンを

<input type="submit" class="button btn btn-primary" onclick ="return SendEmail();" /> 

のための私のコードはここのsendEmail()

function SendEmail() 
     { 
      if (!CheckContactUsFormValidation()) { 
       return false; 
      } 
      else{ 
       var l_strEmail = document.getElementById('txtEmail').value; 
       var l_strComents = document.getElementById('txtComments').value; 
       var l_strEventLocation = document.getElementById('txtEventLocation').value; 
       var l_strStartDate = document.getElementById('txtStartDate').value; 
       var l_strOrganization = document.getElementById('txtOrganization').value; 
       var l_strPhone = document.getElementById('txtPhone').value; 
       var l_strLastName = document.getElementById('txtLastName').value; 
       var l_strFirstName = document.getElementById('txtFirstName').value; 
      var rent = document.getElementById("inlineRadio1").value; 
      var lease = document.getElementById("inlineRadio2").value; 
      if (rent.checked == true) { 
       var l_strCheck = 'rent'; 
      } 
      else { 
       if (lease.checked == true) { 
        var l_strCheck = 'lease'; 
       } 
      } 
      var l_strTitle = "Contact Us"; 

      var l_strContents = 'Hi, ' + l_strFirstName + ' ' + l_strLastName + '\n'; 
      l_strContents += 'he is mail for requesting product on ' + l_strCheck + ' and start date is ' + l_strStartDate + ' for organization ' + l_strOrganization + '\n'; 
      l_strContents += 'his cell #' + l_strPhone + ' and his coments are as follows \n'; 
      l_strContents += l_strComents + '\n' + 'You can contact him on email: ' + l_strEmail; 
      l_strContents += 'End here!';   
      var l_strtoEmail = '[email protected]'; 
      SendEmailWithCustomTitle(l_strtoEmail, l_strContents, l_strTitle);   
     } 
     return true; 
    }  

    function CheckContactUsFormValidation() { 
     var m_boolValidator = true; 

     if (!CheckRequiredFieldValidation('FirstName', 'Enter first name')) { 
      m_boolValidator = false; 
     } 
     if (!CheckRequiredFieldValidation('LastName', 'Enter last name')) { 
      m_boolValidator = false; 
     } 
     if (!CheckRequiredFieldValidation('Organization', 'Enter Organization')) { 
      m_boolValidator = false; 
     } 
     if (!CheckRequiredFieldValidation('Email', 'Enter Email')) { 
      m_boolValidator = false; 
     } 
     else 
     { 
      if (!CheckEmailValidation('Email', 'Enter valid email address')) { 
       m_boolValidator = false; 
      } 
     } 
     if (!CheckRequiredFieldValidation('Phone', 'Enter phone#')) { 
      m_boolValidator = false; 
     } 
     if (!CheckRequiredFieldValidation('StartDate', 'Enter start date')) { 
      m_boolValidator = false; 
     } 
     return m_boolValidator; 
    } 

、ここではのsendEmail(内部で呼び出されているAJAX機能である)

function SendEmailWithCustomTitle(txtEmail, txtContents, l_strTitle) { 
event.preventDefault(); 
$.ajax({ 
    async:false, 
    type: "POST", 
    url: "PTServiceRoutines.aspx/AjaxSendEmail", 
    data: "{'p_strEmail':'" + txtEmail + "','p_strTitle':'" + l_strTitle + "','p_strContents':'" + txtContents + "'}", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: successAjaxSendEmailWithCustomTitleHandler, 
    failure: failureAjaxSendEmailWithCustomTitleHandler, 
    error: errorAjaxSendEmailWithCustomTitleHandler 
}); 
return false; 
} 
function successAjaxSendEmailWithCustomTitleHandler(data) { 

    ShowAlert(data.d); 


//ShowAlert is method used to open modal showing data.a 
}; 

function failureAjaxSendEmailWithCustomTitleHandler(data) { 
}; 

function errorAjaxSendEmailWithCustomTitleHandler(data, status) { 
}; 
があります

私はすでにevent.prevenを試していますtdefault、event.soppropogationしかし、私はAjax成功関数SendEmail呼び出しからtrueを返す簡単な方法を見つけることができませんでした。

+1

お祝いを閉じているときにリダイレクトするには、以下のイベントを使用して完了するために、AJAXを待ってからブラウザを停止するために、AJAXあなたからasync:false,を削除します関数名バッジ** :))) – madalinivascu

+1

メールサーバーを深刻なメール​​トラフィックに公開する – madalinivascu

+0

ajaxが完了した後、モーダルを開くためのモーダルコードはどこですか? – madalinivascu

答えて

1

最大**

がモーダルはあなたが勝っ

$('#myModal').on('hidden.bs.modal', function() { 
    window.location.href = "desired-page.php" 
}) 
+0

2番目の部分はモーダルIDを持っていないので、モーダルを解除するときにwindow.location.hrefを使用します。 –

+1

あなたはモーダルの解除ボタンでクリックイベントが必要です – madalinivascu

0

ボタンをモーダルで作成し、そのボタンのクリックイベントでモーダルを非表示にしてから、ajax呼び出しを呼び出すことができます。 window.location.hrefはhtml形式では機能しません。 window.location.hrefを動作させるには、送信ボタンをフォームから移動できます。

モーダルを成功させるには、次の2つの方法のいずれかを実行します。

.done(function() { 
    $("#yourmodal").modal(); 
}); 

それとも

success: function(data) { 
     $("#yourmodal").modal(); 
    } 

モーダル非表示に使用し、以下までAJAX呼び出しを停止します。あなたのajax呼び出しを "submitForm()"のような関数の中に置きます。これを次のように呼んでください。

$('#yourmodal').on('hidden.bs.modal', function (e) { 
     // do something... 
    }) 
+0

モーダルは開いているajaxの成功は、私は成功の方法の中でモーダルを開く必要があると言っている –

+0

投稿を編集します。 –

+0

モーダルは既にshowalertによって開かれています。a);私はモーダルが開かれ、そのブラウザの間に止まってはならないまで、要約からフォームを停止する必要があります。 –

関連する問題