保留div後顯示一個下拉和按鈕提交

Question

下面的代碼將顯示與文本字段用戶名後div您選擇下拉是，但它會隱藏div如果你點擊提交，我希望它仍然顯示你點擊提交後感謝div。

<script type="text/javascript" 
window.onload=function(){ 
document.getElementById('user').addEventListener('change', function() { 
    var style = this.value == 1 ? 'block' : 'none'; 
    document.getElementById('hidden_div').style.display = style; 
}); 
} 
</script> 

<form method="post" action=""> 
Are You Ready:<br> 
    <select id="user" name="form_select"> 
     <option value="0">No</option> 
     <option value="1">Yes</option> 
    </select> 

<div id="hidden_div" style="display: none;"> 
    Username: <br> 
    <input type="text" name="username"><br> 
</div> 

<br><input type="submit" name="submit" value="submit" /> 
</form> 

Answer 1

提交強制頁面刷新。

您可以將事件偵聽器添加到提交，並防止默認行爲。

document.querySelector('form').addEventListener('submit', function(e) { 
    e = e || event; 

    e.preventDefault(); 

    // Do Something 
}); 

Answer 2

使用jQuery：

$(document).ready(function() { 
 
    $("#user").change(function() { 
 
     var style = $(this).val() == 1 ? 'block' : 'none'; 
 
     $("#hidden_div").css("display", style); 
 
    }); 
 
    
 
    $('form').submit(function(e) { 
 
     e.preventDefault(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    Are You Ready:<br> 
 
    <select id="user" name="form_select"> 
 
     <option value="0">No</option> 
 
     <option value="1">Yes</option> 
 
    </select> 
 

 
    <div id="hidden_div" style="display: none;"> 
 
     Username: <br> 
 
     <input type="text" name="username"><br> 
 
    </div> 
 
    <br> 
 
    
 
    <input type="submit" name="submit" value="submit" /> 
 
</form>