フォーム提出後にモーダルウィンドウを開いたままにして、同じモーダルウィンドウで新しいページを表示する方法

Iveには、モーダルウィンドウを開くリンク付きの簡単なhtmlページがあります。モーダルウィンドウにはフォームがあります。フォームを送信し、同じモーダルウィンドウに「フォームアクション（test.asp）」ページを表示するにはどうすればよいですか。 test.aspページはデータベースエントリです/フォームページに記入していただきありがとうございます。フォーム提出後にモーダルウィンドウを開いたままにして、同じモーダルウィンドウで新しいページを表示する方法

<!DOCTYPE html> 
<style> 
#overlay { 
visibility: hidden; position: absolute; left: 0px;top: 0px; width:100%; height:100%; text-align:center; z-index: 1000; 
} 

#overlay div {width:300px; margin: 100px auto; background-color: #fff; border:1px solid #000; padding:15px; text-align:center; 
} 
</style> 
<script> 
function overlay() { 
el = document.getElementById("overlay"); 
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";  
}   
</script> 

<body> 
<a href='#' onclick='overlay()'>Click here to show the overlay</a> 
<div id="overlay"> 
<div> 
     <p>Please complete the form below.</p> 

     <form action="test.asp" method="post" id="contact-form"> 
     <input type="text" name="field1"><br> 
     <input type="text" name="field2"><br> 
     <input type="submit" value="Go"> 
    </form><br> 
    Click here to [<a href='#' onclick='overlay()'>close</a>]<br> 
</div> 
</div> 
</body> 
</html>

出典

2016-07-15 John Moore

ここではAJAXを使用してくださいフォームが正常に送信されると、モーダルの内容を上書きします。 –

モーダル決算防ぐためにjavascript関数event.preventDefault()を使用してみてください：同じウィンドウ内に次のページのロードのためのjQueryを使ってAJAX要求を行う、その後

function overlay() { 
 
    el = document.getElementById("overlay"); 
 

 
    el.style.visibility = 
 
     (el.style.visibility == "visible" ? "hidden" : "visible"); 
 

 
    document.getElementById("submit").addEventListener("click", 
 
     function(event){ 
 
      event.preventDefault(); 
 
     } 
 
    );  
 
}

#overlay { 
 
    visibility: hidden; position: absolute; left: 0px; top: 0px; 
 
    width: 100%; height: 100%; text-align:center; z-index: 1000; 
 
} 
 

 
#overlay div { 
 
    width: 300px; margin: 100px auto; background-color: #fff; 
 
    border: 1px solid #000; padding: 15px; text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<a href='#' onclick='overlay()'>Click here to show the overlay</a> 
 
<div id="overlay"> 
 
    <div> 
 
     <p>Please complete the form below.</p> 
 

 
     <form action="test.asp" method="post" id="contact-form"> 
 
      <input type="text" name="field1"><br> 
 
      <input type="text" name="field2"><br> 
 
      <input type="submit" id="submit" value="Go"> 
 
     </form><br> 
 
     Click here to [<a href='#' onclick='overlay()'>close</a>]<br> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

を：

$.ajax({ 
    url: '/path/to/file', 
    type: 'default GET (Other values: POST)', 
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, html)', 
    data: {param1: 'value1'}, 
}).done(function() { 
    console.log("success"); 
}).fail(function() { 
    console.log("error"); 
}).always(function() { 
    console.log("complete"); 
});

出典

2016-07-15 12:19:34

フォーム提出後にモーダルウィンドウを開いたままにして、同じモーダルウィンドウで新しいページを表示する方法

答えて

関連する問題