提出ボタンをクリックするとモーダルボックス

Question

私は、ドイツ語名詞の記事をユーザーが入力するWebアプリケーションを作成しています。 私は名詞がユーザによって受け入れられ、データベースの記事がモーダルボックスに表示されるコードを書いた。 しかし、モーダルボックスは残っていません。さらに、最初に[送信]ボタンをクリックすると、その単語がデータベースに存在していてもelseセクションが実行されます。

ここのコードです：

<!-- Parallax Image with noun Text --> 
 
<div class="bgimg-2 w3-display-container w3-opacity-min"> 
 
    <div class="w3-display-middle"> 
 
    <span class="w3-xxlarge w3-text-white w3-wide">NOUN</span> 
 
    </div> 
 
</div> 
 
<!-- Container (noun Section) --> 
 
<div class="w3-content w3-container w3-padding-64" id="noun"> 
 
    <h3 class="w3-center">ENTER THE NOUN: </h3></br></br> 
 
    <form name="logged_in.jsp" method="post" action=""> 
 
    <div class="w3-center"> 
 
      <input type="text" name="noun"></br></br></br> 
 
    </div> 
 

 
    
 
    
 
    <div class="w3-center"> 
 
    <button class="w3-button w3-black w3-right w3-section" type="submit" id="article" > 
 
      GET ARTICLE 
 
     </button> 
 
    </div> 
 
    </form> 
 
    
 
</div> 
 

 

 
<!-- The Modal --> 
 
<div id="nounModal" class="modal"> 
 
    <% String s =null; 
 
     String s1=request.getParameter("noun"); 
 
      String s2 =null; 
 
      String s3 =null; 
 
      int f=0; 
 
     try{ 
 
     System.out.println(s1); 
 
      Statement st = con.createStatement(); 
 
      ResultSet rs = st.executeQuery("select * from nouns where noun='"+s1+"'"); 
 
      
 
      if(rs.next()){ 
 
       f=1; 
 
      s=rs.getString("article"); 
 
      s2=rs.getString("plural"); 
 
      s3=rs.getString("meaning"); 
 
      } 
 
     }catch(Exception e){System.out.println("e.............."+e);} 
 
    
 
     if(f==1){%> 
 
     
 

 
     <div class="modal-content"> 
 
      <button type="button" class="close" data-dismiss="modal">Close</button> 
 
      <div id="output"> 
 
       <p>Article: <%=s%></br></p> 
 
      <p>Noun: <%=s1%></br></p> 
 
      <p>Plural: <%=s2%></br></p> 
 
      <p>Meaning: <%=s3%></p> 
 
      
 
      </div> 
 
    <%} 
 
    else{%> 
 
    <div class="modal-content"> 
 
      <button type="button" class="close" data-dismiss="modal">Close</button> 
 
      <p>Sorry! no results found. 
 
       would you like to add a new word? <a>add</a> click here 
 
      </p> 
 
       
 
      
 
    <%}%> 
 
    
 
    </div > 
 

 
</div> 
 

 
<script> 
 

 
$(document).ready(function(){ 
 
    $("#article").click(function(){ 
 
     $("#nounModal").modal(''); 
 
    }); 
 
\t 
 
\t </script>

Answer 1

あなたのボタンは、データトグル= "モーダル" データ・ターゲット= "＃nounModal" atributesを含まなければならないのいずれか。

<button class="w3-button w3-black w3-right w3-section" type="submit" id="article" data-toggle="modal" data-target="#nounModal">GET ARTICLE </button> 

または$（ "＃nounModal"）を試してください。