我試圖在單擊變量上的提交按鈕時存儲html表單的文本值。當點擊提交按鈕後，該值立即被存儲一秒，然後再次變爲空白。這是爲什麼發生？單擊事件時的存儲值

var userSearch = ""; 
 

 
$(document).ready(function() { 
 
    $("#buttonA").click(function() { 
 
    userSearch = document.getElementById("userSearch").value; 
 
    console.log(userSearch); 
 

 
    }); 
 
    console.log(userSearch); 
 
});

<!DOCTYPE> 
 
<head> 
 
    <link rel="stylesheet" href="stylesheet.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container text-center"> 
 
    <a href="https://en.wikipedia.org/wiki/Special:Random"> Random article</a> 
 
    <div id="searchBox"> 
 
     <form> 
 
     <input type="text" id="userSearch" name="userSearch"> 
 
     <button id="buttonA">Submit</button> 
 
     </form> 
 
    </div> 
 

 
    <div id="resultsBox"></div> 
 
    </div> 
 
</body>

來源

2016-08-03 Carlosl93

您在提交由點擊頁面重載 – Maxx

形式當你點擊提交整個頁面被重新加載從而失去了以前的值。如果您需要保留該值，請查看Cookie或本地存儲對象。 – jeff

@RoryMcCrossan +1 –

按form中的按鈕默認提交表單。因此你的頁面被重新加載，並且你失去了客戶端變量的任何狀態。

爲了防止這種情況，你可以：

防止提交由聽衆
使用另一種機制（如餅乾）傳遞的事件對象上調用e.preventDefault()從一個頁面加載變量傳遞給其他

例`preventDefault`

var userSearch = ""; 
 

 
$(document).ready(function() { 
 
    $("#buttonA").click(function(e) { 
 
    e.preventDefault(); 
 
    userSearch = document.getElementById("userSearch").value; 
 
    console.log(userSearch); 
 

 
    }); 
 
    console.log(userSearch); 
 
});

<!DOCTYPE> 
 
<head> 
 
    <link rel="stylesheet" href="stylesheet.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container text-center"> 
 
    <a href="https://en.wikipedia.org/wiki/Special:Random"> Random article</a> 
 
    <div id="searchBox"> 
 
     <form> 
 
     <input type="text" id="userSearch" name="userSearch"> 
 
     <button id="buttonA" type="button">Submit</button> 
 
     </form> 
 
    </div> 
 

 
    <div id="resultsBox"></div> 
 
    </div> 
 
</body>

來源

2016-08-03 14:13:00 Matyas

當你點擊提交，自然（的按鈕），重新加載頁面。這會重置現有的表單值。理想情況下，您可以將用戶帶到一個新的頁面，該頁面將由服務器端語言（如PHP）提供服務。如果您希望數據保持您輸入的方式，請將<button id="buttonA">Submit</button>更改爲<input type="button" value="submit">。

或者，使用cookie在頁面重新加載之間存儲表單值。

但是請注意，您現有的腳本在片段中運行良好。所以你的機器上可能會出現其他問題（在你的機器上）。

來源

2016-08-03 14:10:53

單擊事件時的存儲值

回答

例preventDefault

相關問題

例`preventDefault`