CODEWITHSUNDEEP
javascripthtmlcss
Burger Sasha
Burger Sasha

Reputation: 175

How to hide input value on input click with js?

I am trying to hide the input value of each individual input when clicked

My javascript is working fine but only targets the individual ID listed. I am looking for a more refined method that selects only the clicked input without having to repeat that same block of code 5 times targeting each different ID

$(document).ready(function() {

    var text = document.getElementById('first_name');
var button = document.getElementById('first_name');
button.onclick = function() {
    text.value = '';
    text.classList.add("lowercase");
}

});
input[type=text] {
    display: block;
    border: none;
    border-bottom: 1px solid;
    width: 100%;

    padding: 2rem 0 1rem;
}

input, input[type=submit] {
    font-family: 'usm', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1pt;
    text-transform: uppercase;
    color: #7A7A7A;
}

input.lowercase {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

            <form method="post" action="">
            
                <input type="text" name="first_name" id="first_name" value="First Name*">

                <br>

                <input type="text" name="last_name" id="last_name" value="Last Name*">

                <br>

                <input type="text" name="email" id="email" value="Email Address*">

                <br>

                <input type="text" name="phone" id="phone" value="Phone Number">

                <br>

                <input type="text" name="message" id="message" value="Message*">

                <div class="submit" >
                    <input type="submit" name="submit" value="Send" id="submit">
                </div><!-- End of Submit -->


            </form>

</body>

Upvotes: 0

Views: 260

Answers (3)

chirag soni
chirag soni

Reputation: 1026

Define one function with input parameter as id and call this fn in an individual input element by passing that element's id. 

  function clearText(id) {

    var text = 
    document.getElementById(id);
    var button = 
    document.getElementById(id);
    button.onclick = function() {
    text.value = '';
   text.classList.add("lowercase");

   }

Upvotes: 0

antlis
antlis

Reputation: 425

Maybe you should consider using placeholdr instead. 

$(document).ready(function() {

  $('form input[type="text"]').on('click', function() {
    this.value = '';
  });

});
input[type=text] {
    display: block;
    border: none;
    border-bottom: 1px solid;
    width: 100%;

    padding: 2rem 0 1rem;
}

input, input[type=submit] {
    font-family: 'usm', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1pt;
    text-transform: uppercase;
    color: #7A7A7A;
}

input.lowercase {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

            <input type="text" name="palceholder_example" id="placeholdr_example" placeholder="Place holder example">
            <form method="post" action="">
            
                <input type="text" name="first_name" id="first_name" value="First Name*">

                <br>

                <input type="text" name="last_name" id="last_name" value="Last Name*">

                <br>

                <input type="text" name="email" id="email" value="Email Address*">

                <br>

                <input type="text" name="phone" id="phone" value="Phone Number">

                <br>

                <input type="text" name="message" id="message" value="Message*">

                <div class="submit" >
                    <input type="submit" name="submit" value="Send" id="submit">
                </div><!-- End of Submit -->


            </form>

</body>

Upvotes: 3

brk
brk

Reputation: 50326

You can use jquery selector and use $(this)

$(document).ready(function() {
  $('input[type="text"]').on('click', function(e) {
    $(this).val('');
    $(this).addClass('lowercase')
  })

});
input[type=text] {
  display: block;
  border: none;
  border-bottom: 1px solid;
  width: 100%;
  padding: 2rem 0 1rem;
}

input,
input[type=submit] {
  font-family: 'usm', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1pt;
  text-transform: uppercase;
  color: #7A7A7A;
}

input.lowercase {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <form method="post" action="">

    <input type="text" name="first_name" id="first_name" value="First Name*">

    <br>

    <input type="text" name="last_name" id="last_name" value="Last Name*">

    <br>

    <input type="text" name="email" id="email" value="Email Address*">

    <br>

    <input type="text" name="phone" id="phone" value="Phone Number">

    <br>

    <input type="text" name="message" id="message" value="Message*">

    <div class="submit">
      <input type="submit" name="submit" value="Send" id="submit">
    </div>
    <!-- End of Submit -->


  </form>

Upvotes: 3

Related Questions