How to make the text box value stay when clicking on another box?

Question

I'm working on validation for my jquery project, and one of the requirements is to make sure that the default value (where it says first name and last name in the box) remains when clicking out of it. Basically, if I type in a name in box, the place holder(first name or last name) disappears, but if I erase what I wrote and skip over, it'll reappear. Let me know if I'm not making sense. This is what I have so far:

<meta charset="UTF-8">

<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>


    $(document).ready(function() {


        $("#input").submit(function(e) {
            e.preventDefault(); 

            if ($("#firstName").val() == '') {
                alert("Please enter your name and submit again");

                return false;



            } else {

                $("#msg").text("Your name is: " + $("#firstName").val() + $("#lastName").val());

            }
        });

    }); 

</script>

<form id="input" method="post" action="">
    <div>
        <label for="first_name" class="label">first name</label>
        <input type="text" placeholder="first name" id="firstName" name="firstName">
    </div>
    <div>
        <label for="last_name" class="label">last name</label>
        <input type="text" placeholder="last name" id="lastName" name="lastName">
    </div>

    <input type='submit' value='Submit' name="submit" id='submitme'>
    <p id="msg"></p>

</form>
<p id="result"></p>

Answer 1

There is no issue in code. And it is totally correct that placeholder (first name or last name) will show in input boxes when you erase what you wrote up in the input boxes. As when nothing is written in the input box the placeholder attribute will work.

Answer 2

I'm not sure if I get you correctly, but here is a solution, that uses the label inside the input.

 .my-awesome-input-wrapper { display: inline-block; padding: 0.2em; background-color: white; border: 1px solid #A9A9A9; }.label { color: #A9A9A9; }.input { padding: 0; border: none; outline: none; background-color: transparent; }

 <form id="input" method="post" action=""> <div class="my-awesome-input-wrapper"> <label class="label" for="first_name" >First name:</label> <input class="input" type="text" id="first_name" name="first_name"> </div> <div class="my-awesome-input-wrapper"> <label class="label" for="last_name">Last name:</label> <input class="input" type="text" id="last_name" name="last_name"> </div> <input type='submit' value='Submit' name="submit" id='submitme'> <p id="msg"></p> </form> <p id="result"></p>

Btw: It is a normal behavior for an input, that the placeholder text disappears if the input contains text. Otherwise you would have to texts overlap, which will get hard to read. Use the label-element to keep text remaining, but be aware you do not place it above the typed text/value.