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