Floating label on filled up input falls back after refresh

HTML & CSS
1 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
  
 $("input").focusin(function(){
   $(this).prev().css({"color": "red", "top": "-22px"});
 });
  $("input").focusin(function(){
    $(this).next().css({"display": "block","color": "red"});//.fadein(2000);
    //$(this).prev().css({"color": "red", "top": "10"});
  });
 //$(this).prev().css({"color": "red", "top": "0px"});
  $("input").focusout(function(){
    $(this).next().css("display", "block");//.fadeOut(2000);
    if(!$(this).val()){
    	$(this).prev().css({"color": "black", "top": "4px"});
		$(this).next().text($(this).attr("name")+" Field is empty");
		}
    else{
    	$(this).prev().css({"color": "black", "top": "-22px"});
		$(this).next().text($(this).attr("name")+" Field is ok").css("color", "black");
    }
  });
  //$(window).on('load', function(){
    // your logic here
	$( "label" ).on( "focusin", function() {
  alert( "Handler for `focus` called." );

	    if(!$(this).val()){
    	$(this).prev().css({"color": "black", "top": "4px"});
		$(this).next().text($("input").attr("name")+" Field is empty");
		}
		else{
    	$(this).prev().css({"color": "black", "top": "-22px"});
		$(this).next().text($("input").attr("name")+" Field is ok").css("color", "black");
    }
});
});
</script>
<title>Page Title</title>
<style>
label, input, span{
	display:block;
}
input{
	width:180px;
    height:20px;
}
div{
	position:relative;
    top:30px;
    height:45px;
    margin:25px
	
}
label{
	position:absolute;
    top:4px;
    left:2px;}
</style>
</head>
<body>
<div>
<label>Name</label>
<input name="Name">
<span>Name</span>
</div>
<div>
<label>Email</label>
<input name="E-mail">
<span>Email</span>
</div>
</body>
</html>
2

That’s correct, because you’re not actually submitting the form, so there’s nothing to have when you refresh the screen.

To make it “permanent”, you’ll have to save the value somewhere - database, cookie, localstorage, etc.

3

thank you. I was thinking about it, but as thepage relods the values neded to be refilled, returned and the whole focus emptycheck thing should happen somehow. please help me. at the moment I do not see how can I do this thing. thank you, frank.

4

what I noticed after refresh still the value is visble however not supposed to bethere.

5

thank you for help
If I am right saving in a variable vill sort the problem. I guess I can take the value with jquery val(). how to reload it? I need help with refresh event. I think some sort of function should “listen” for reloading event and use the val(). canI get helpplease? thank you frank.

6

Not to repeat myself but…

7

Thank you. I understand that. as I save it also I have to reload it somehow, that is where I need help, thank you, Frank

8

Thank you. I understand that. as I save it also I have to reload it somehow, that is where I need help, thank you, Frank
I was thinking on a variable what I can fill up with val(). How does it work reload from variable. Val()can do it I know but when and how? Please help me, thank you.

9

The easy way would be to set a cookie, then on reload, check for a cookie and use the value set as appropriate.

10

thank you, alternatively,
how can be done with val() if it’s possible?

11

It can’t. val is not permanent. You can get or set a value there, but it’s within the same page render.

12

Thank you. I’ve seen js commands related on the net, are they useful ore not really

13

I’ve seen location.reload().method, is it useful? Thank you

14

For saving/retrieving data? No.

You need to focus a bit. Start with learning…

  • how to save the data
  • then learning how to retrieve the data
  • then learning how to reload the form.
1 Like
15

Thank you. If I am right take data before refresh, save it, after refresh retrieve it from it’s storage and relode it and put in action the relevant jquery functions.

16

I found if (document.readystate===“Complete”){}
Is it applicable as I suspect?

17

Potentially. You would need something along those veins before checking the value stored in the database, though I would do the check before the document is fully loaded to prevent screen flicker.

18

thank you for help. I tried the following code, no luck.

if (document.readyState === "complete") {}

as you mentioned saving value in certain way is crutial but I do not know how to do it.

19

this is another experiment

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".p").text("Hello world!");
  });
  let x=0;
  if (document.readyState === "complete") {
  // The page is fully loaded and ready for use
  x=x+1;
  $(".p2").text("reload"+x);
}
if (window.performance.navigation.type === 1) {
  // The page was reloaded
   $(".p3").text("reload 2");
}

});
</script>
</head>
<body>

<button>Set text content for all p elements</button>

<p class="p">This is a paragraph.</p>
<p class="p2">This is another paragraph.</p>
<p class="p3">This is another paragraph.</p>

</body>
</html>
20

thank you for help. I tried to find solution but nothing I can use. can I get something I can use? what I found It does not do anything, or I do not know how to use it. thank you