2014-02-26 41 views
1

如何在表單提交後顯示Div並隱藏表單?香港專業教育學院試圖jQuery的,但它沒有奏效。幫我?這裏是代碼:如何在表單提交後顯示Div並隱藏表單?我試過jquery,但它不起作用。幫我?

website body {
background-color: black; color: green; }

#theirname { 
    color:red; 
    font-size: 6.0em; 
    margin:auto; 
    text-align:center; 
    display:none; 
} 

#hellos { 
    color:yellow; 
    font-size:6.5em; 
    margin-top:auto; 
    text-align:left; 
    display:none; 
} 
#thanks { 
    color:yellow; 
    font-size:4.3em; 
    margin-right:20px; 
    text-align:right; 
    display:none; 
} 

#hello { 
    border-style:groove; 
    border-color: yellow; 
    margin:auto; 
    text-align:center; 
    width:300px; 
} 

marquee { 
    color:yellow; 
    font-size:30px; 
} 
form { 
    text-align:center; 
    margin:auto; 
    margin-top:120px; 
} 
</style> 
<script> 
function handler() { 
    var div = document.getElementById('theirname'); 

    var form = document.getElementById('fore'); 

    div.innerHTML = document.getElementById('textbox').value; 
    return false; 
} 

$(document).ready(function(){ 
    $("#Fore").submit(function(e){ 
    $("#fore").hide(slow); 
    $("#hellos").show(3000); 
    $("#theirname").show(3030); 
    $("#thanks").show(4000); 
    }); 
}); 

</script> 
</head> 

<body> 
<div id="hello">Welcome to here :D</div> 

<marquee behavior="scroll" scroll="left" bgcolor="red" onClick="">ill update this soon...</marquee> 

<div id="hellos">Hello,</div> 
<div id="theirname"></div> 
<div id="thanks">thank you for coming!</div> 

<form id="Fore" action="submit" method="post" onSubmit="return handler();"> 
Your name: <input id="textbox" type="text" name="fname" size="20" /> 
<input type="submit" value="post" /> 
</form> 


</body> 
</html> 

這裏是你可以看到我的意思。 jfiddle

+1

+1爲選取框... –

+0

+50爲選取框... – Kody

+0

你什麼意思? lol – Mrawesome4ever

回答

1

你在你的JavaScript中的錯誤:

變化

$("#fore").hide(slow); 

$("#Fore").hide('slow'); // Your id is Fore and not fore 
+1

+1已更新jsFiddle:http://jsfiddle.net/P2knf/9/ –

+0

我剛剛更新了我的代碼,並且還在[jsfiddle](http://jsfiddle.net/mrawesome4ever/P2knf/10/)上,但它仍然不起作用。 – Mrawesome4ever

+0

刪除

相關問題