Я пытаюсь сохранить текстовое значение формы html, когда нажимает кнопку отправки на переменной. Значение сразу сохраняется сразу после нажатия кнопки отправки, а затем снова появляется blanck. Почему это происходит?Сохранять значение при событии click

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 или localstorage. – 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

Сохранять значение при событии click

ответ

Пример preventDefault

Смежные вопросы

Пример `preventDefault`