My goal is to display form data within the same div after clicking on the submit button, but without including the form itself. However, in my current code, the hidden div does not appear after clicking on the submit button. Please review the code below that I have attempted and refer to the attached image for the desired output. The title and description should be displayed in the same div instead of the form.
I am seeking assistance in identifying where I may have made a mistake with the code. Thank you. Link to Image
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function fn(){
var fn = document.getElementById("f1").value;
var des = document.getElementById("t1").value;
var mainDiv = document.getElementById("d2");
var div = document.getElementById("d1");
if(mainDiv.style.display==="block"){
mainDiv.style.display="none";
div.style.display="block";
}
document.getElementById("fn1").innerHTML = fn;
document.getElementById("t2").innerHTML = des;
}
</script>
</head>
<body>
<div style ="height:400px; width:500px; border:1px solid black; display:block;" id="d2">
<form>
First Name: <input type="text" name="fn" id="f1" /><br /><br />
Description: <textarea id="t1" rows="5" cols="20"></textarea><br /><br />
<input type="submit" name="b1" id="b1" value="Add" onclick="add()" />
<input type="submit" name="b1" id="b2" value="Cancel" onclick="Cancel()" />
</form>
</div>
<div style ="height:400px; width:500px; border:1px solid black; display:none;" id="d1">
<p><span id="fn1"></span></p>
<p><span id="t2"></span></p>
</div>
</body>
</html>