Question

我有一个反馈模式，其形式简单，名称，等级和等级。评论。用户提交表单后，我想显示自定义消息，例如 - 您的反馈已提交。下面是我的ajax电话。成功的ajax响应后，我将表单内容替换为自定义消息。但我的模式显示为空白。没有自定义内容出现。 #modal_window是原始反馈表单的Div，我用自定义#message div替换它。我想在自定义消息下添加Ok按钮，onlcick，它应该关闭模式。请建议。下面是#modal_window和JS代码的html代码

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(); 
}

如何使用自定义消息替换表单内容

1 个答案: