フォームの内容をカスタムメッセージに置き換える方法

Question

私は、簡単な名前のフォームを持ち、評価が&であるフィードバックモーダルを持っています。ユーザーがフォームを送信すると、フィードバックが提出されたようなカスタムメッセージを表示したい。以下は私のアヤックスコールです。成功したAjaxレスポンスの後、フォームの内容をカスタムメッセージに置き換えます。私のモーダルは空白として表示されます。カスタムコンテンツは表示されません。 #modal_windowは元のフィードバックフォーム用の私のDivです。カスタム#message divに置き換えています。私はカスタムメッセージの下にOKボタンを追加したい、それのonlcick、それはモーダルを閉じる必要があります。提案してください。以下は #modal_windowのHTMLコードとJSコード

JSPコード

<div id="modal_wrapper"> 
<div id="modal_window"> 

    <div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div> 

<p><Strong>We'd love your feedback.</Strong><br></p> 

<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p> 

<form id="modal_feedback" method="POST" action="" accept-charset="UTF-8" > 
    Your Name :<br> 
    <input type="text" name="name" id="name" value=""><span></span><br> 
    <div class="feedback"> 
    <div class="feedbackCl" > 
    <input id="overall_0" name="overall" id="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l"> 
    <label for="overall_0" class="labelClass"> 
     <span class="sight">— —</span> 
     <span class="screen_reader" id="o1-l">Poor</span> 
    </label> 
    </div> 
    <div class="feedbackCl"> 
    <input id="overall_1" name="overall" id="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l"> 
    <label for="overall_1" class="labelClass"> 
     <span class="sight">—</span> 
     <span class="screen_reader" id="o2-l">Fair</span> 
    </label> 

    </div> 
    <div class="feedbackCl"> 
    <input id="overall_2" name="overall" id="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l"> 
    <label for="overall_2" class="labelClass"> 
     <span class="sight">+ —</span> 
     <span class="screen_reader" id="o3-l">Good</span> 
    </label> 
    </div> 
    <div class="feedbackCl"> 
    <input id="overall_3" name="overall" id="overall" type="radio" value="4" tabindex="0" aria-describedby="o4-l"> 
    <label for="overall_3" class="labelClass"> 
     <span class="sight">+</span> 
     <span class="screen_reader" id="o4-l">Very Good</span> 
    </label> 
    </div> 
    <div class="feedbackCl"> 
    <input id="overall_4" name="overall" id="overall" type="radio" value="5" tabindex="0" aria-describedby="o5-l"> 
    <label for="overall_4" class="labelClass"> 
     <span class="sight">+ +</span> 
     <span class="screen_reader" id="o5-l">Excellent</span> 
    </label> 
    </div> 
    </div> 
    <br> 
    <span><br></span><br> 
    <textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="80" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" ></textarea><br> 
    <span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br> 
    <input type="submit" name="feedbackForm" class="buttonFb button1" value="Submit" id="submit_btn"> 
</form> 
</div> 
</div> 

JSコード

 document.getElementById("modal_feedback").addEventListener("submit", function(e) { 
     e.preventDefault(); 
     var form = this; 
     var name = form.name.value; 
     var rating = form.overall.value; 
     var msg = form.message.value; 
      if(name == "") { 
      alert("Please enter your Name"); 
      form.name.focus(); 
      e.preventDefault(); 
      } else if(rating == "") { 
     alert("Please select a rating"); 
     form.overall[0].focus(); 
     e.preventDefault(); 
     } else if(msg == "") { 
     alert("Please enter your comment in the Message box"); 
     form.message.focus(); 
     e.preventDefault(); 
    } 
    $.ajax({ 
    type: "POST", 
    url: "feedbackData.htm?ratingId="+rating+"&msg="+msg, 
    async : false, 
    dataType: "html", 
    success: function(response) { 
     console.debug(response); 
     if(response == 'Y'){ 
     $('#modal_window').html("<div id='message'></div>"); 
     $('#message').html("<h2>Feedback Form Submitted!</h2>").append("<p>We will be in touch soon.</p>") 
     } 
    }, 
    error : function(e) { 
     alert('Error: ' + e); 
    } 
    }); 
    return false; 
}); 

    document.addEventListener("DOMContentLoaded", function() { 
    var modalWrapper = document.getElementById("modal_wrapper"); 
    var modalWindow = document.getElementById("modal_window"); 

    var openModal = function(e) 
    { 
     modalWrapper.className = "overlay"; 
     modalWindow.style.marginTop = (-modalWindow.offsetHeight)/2 + "px"; 
     modalWindow.style.marginLeft = (-modalWindow.offsetWidth)/2 + "px"; 
     e.preventDefault(); 
     }; 

     var closeModal = function(e) 
     { 
     modalWrapper.className = ""; 
     e.preventDefault(); 
     }; 

     var clickHandler = function(e) { 
     if(e.target.tagName == "DIV") { 
     if(e.target.id != "modal_window") closeModal(e); 
     } 
     }; 

     var keyHandler = function(e) { 
     if(e.keyCode == 27) closeModal(e); 
     }; 

     document.getElementById("modal_open").addEventListener("click", openModal, false); 
     document.getElementById("modal_close").addEventListener("click", closeModal, false); 
     document.addEventListener("click", clickHandler, false); 
     document.addEventListener("keydown", keyHandler, false); 
     }, false); 

     function toCount(entrance,exit,text,characters) { 
       var entranceObj=document.getElementById(entrance); 
       var exitObj=document.getElementById(exit); 
       var length=characters - entranceObj.value.length; 
       if(length <= 0) { 
       length=0; 
       text='<span class="disable"> '+text+' <\/span>'; 
       entranceObj.value=entranceObj.value.substr(0,characters); 
        } 
       exitObj.innerHTML = text.replace("{CHAR}",length); 
       } 

Answer 1

は、このようなあなたのsuccess関数コードを変更してみてくださいされています

if(response == 'Y'){ 
    $('#modal_window').html("<div id='message'><a onclick='closeModal()' href="javascript:void(0)">close <b>X</b></a><h2>Feedback Form Submitted!</h2><p>We will be in touch soon.</p></div>"); 
} 

モーダルを閉じる関数を閉じる：

function closeModal() { 
    $('#modal_wrapper').hide(); 
}