title: Jquery | How to show div after submit form successfully
body: <p>I made the two popup windows. The one is for asking whether submit the form or not and the form is submitted if the user click the 'yes'. The one thing that i have problem is that the other one (popup window) is shown after the form is submitted successfully. It is just the announce popup window.</p>
  
  <p>This is the popup window in html.</p>
  
  <pre><code>&lt;!-- modalpopup:start (1)--&gt;
  &lt;div style="display:none;" id="popWindow" class="popWindow"&gt;
  &lt;span class="modalWindow"&gt;&lt;/span&gt;
  &lt;div class="popLayer"&gt;
      &lt;button type="button" class="xclose" onclick="document.getElementById('popWindow').style.display='none'"&gt;&lt;img src="images/x_btn.png" title="닫기" /&gt;&lt;/button&gt;
      &lt;div class="modalpopup_top"&gt;&lt;img class="left_logo" src="images/left_logo.png" title="GAMEPARTYdevelopers_logo" /&gt;&lt;/div&gt;
      &lt;div class="modalpopup_contants"&gt;
          &lt;p&gt;&lt;/p&gt;
          &lt;div class="buttonbox"&gt;&lt;button onclick="document.getElementById('popWindow').style.display='none'" class="button100"&gt;취소&lt;/button&gt;&lt;button id="sub_form" val    ue="확인" onclick="sub_form();" class="button100_01"&gt;확인&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;!-- modalpopup:start (2) --&gt;
  &lt;div style="display:none;" id="popWindow_ok" class="popWindow"&gt;
  &lt;span class="modalWindow"&gt;&lt;/span&gt;
  &lt;div class="popLayer"&gt;
      &lt;button type="button" class="xclose" onclick="document.getElementById('popWindow_ok').style.display='none'"&gt;&lt;img src="images/x_btn.png" title="닫기" /&gt;&lt;/button    &gt;
      &lt;div class="modalpopup_top"&gt;&lt;img class="left_logo" src="images/left_logo.png" title="GAMEPARTYdevelopers_logo" /&gt;&lt;/div&gt;
      &lt;div class="modalpopup_contants"&gt;
          &lt;p&gt;&lt;/p&gt;
          &lt;div class="buttonbox"&gt;&lt;button id="refresh_form" value="확인" onclick="document.getElementById('popWindow_ok').style.display='none'" class="button100_01"&gt;&gt;    확인&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and this is the sub_form function which is called the '#sub_form' is clicked.</p>
  
  <pre><code>function sub_form() {
      document.getElementById('popWindow').style.display='none';  
  
      modi_Game.action = "modify_games.html";
      modi_Game.submit(function(event) {
          event.preventDefault();
          document.getElementById('popWindow_ok').style.display='block';
      }
  }
  </code></pre>
  
  <p>The above one was not worked so i changed like below.</p>
  
  <pre><code>var modi_Game = document.modi_game;
  function sub_form() {
  document.getElementById('popWindow').style.display='none';
  
  modi_Game.submit(function(event) {
      event.preventDefault();
      $.ajax({ 
              data: $("#modi_game").serialize(), 
              type: $(this).attr('POST'), 
              url: $(this).attr('modify_games.html'), 
              success: function(response) { 
                  document.getElementById('popWindow_ok').style.display='block';
              }
      });
      return false;
      });
  }
  </code></pre>
  
  <p>This also isn't woking. How can i figure it out? 
  All i want to do is click the button (id ="sub_form") which is the children of div (id="popWindow") to submit the form and then the div (id ="popWindow_ok") is displayed after the form is submitted successfully. Is there any way to do this?
  Please let me know dose anyone have an idea. Thank you. </p>
  
  <hr>
  
  <p>Do you guys know why the alert isn't working in below code?</p>
  
  <pre><code>function sub_form() {
      document.getElementById('popWindow').style.display='none';
  
      modi_Game.action = "modify_games.html";
      modi_Game.submit(function() {
          alert("ok");
      });
  }
  </code></pre>