How to keep test data intact?

Question

How do I prevent the form from refreshing the page I want to be able to send a form successfully and still have the golden input value intact. That value is created when you press the proven button first.

In other words I don't want the page to refresh but I still want it to submit the form successfully . And I created a test button call proven to test if the page refresh or not after you submit the form.

Here's the code

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  color: black;
}

#myField {
background: gold;  
}

form {
  max-width: 200px;
  margin: 10px auto;
  padding: 10px 20px;
  background: red;
  border-radius: 8px;
}

h1 {
  margin: 0 0 30px 0;
  text-align: center;
  color: white;
}


#x {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: white;
  color: black;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0 4px 8px 0;
}

select {
  padding: 6px;
  height: 32px;
  border-radius: 2px;
}

button {
  padding: 19px 39px 18px 39px;
  color: white;
  background-color: blue;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  border-radius: 5px;
  width: 100%;
  border: 1px solid blue;
  border-width: 1px 1px 3px;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
  margin-bottom: 10px;
}

fieldset {
  margin-bottom: 30px;
  border: none;
}

legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: white;
}

label.light {
  font-weight: 300;
  display: inline;
}

.number {
  background-color: #5fcf80;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 100%;
}

@media screen and (min-width: 480px) {

  form {
    max-width: 480px;
  }

}

<script>
var i=0;
function increase()
{
 i++;
var x=( ' '+   (i));  
  document.getElementById('myField').value = x;
 //..
}
</script>
<p style="width: 350px;">Press the proven button first and then fill in the name input and press the submit button. If the number disappers in the proven input then that proves that the form can still refresh the page.</p>
<input type="button" Value="Proven"  onclick="increase();">
<input type="text" id="myField" value="" />
<br>
<br>
<br>
<form action="" method="post">
  <h1>Form</h1>
  <label for="x">NAME</label>
  <input type="text" id="x">
  <button type="submit">SUBMIT</button> 
</form>

are you familiar with session storage for javascript? the thing is that, you want to retain a client side variable value though you've executed a server-side script which is a the submit form method. Anyway I can suggest that you use session storage or local storage. — jek, Sep 18 '17 at 03:10

score 0 · Answer 1 · answered Sep 18 '17 at 03:12

0

HTML data is usually lost when you refresh the page. There are several ways that you can preserve the data, but you have to implement more details manually

The simplest and most widely supported is WebStorage where you have persistent storage (localStorage) or session based (sessionStorage) which is in memory until you close the browser.

I would assume localStorage is what you are looking for right now:

window.onbeforeunload = function() {
    localStorage.setItem(myField, $('#myField').val());

    // ...
}

And when you load the page:

window.onload = function() {

    var name = localStorage.getItem(myField);
    if (myField!== null) $('#myField').val(myField);

    // ...
}

answered Sep 18 '17 at 03:12

James Maa

1,764
10
20

Look guys I simply don't want the form to refresh the page that golden input was to test if the form is still refreshing the page. – Sep 18 '17 at 03:24
How can I do this? Because the seesionstorage work only when you press on back buttons but not on form submit. – Sep 18 '17 at 03:26
@Johnson See.. You might want to consider this post here https://stackoverflow.com/questions/18169933/submit-form-without-reloading-page , we can let `jQuery` submit the form instead of using the default by html – James Maa Sep 18 '17 at 03:29

How to keep test data intact?

1 Answers1