CODEWITHSUNDEEP
javascripthtmlcss
blue
blue

Reputation: 7395

Javascript/CSS: Change button to a text field on click?

I have a button that I need to change into a text field (Ideally expand into it using an animation) when clicked. Right now I have my button and text field beside each other on the page:

echo '<form id= "changePassForm" action="" method="post" enctype="multipart/form-data">';  
echo '<div class="changePass">Change Password</div>';
echo '<div class="changePassBtn" method="post"></div>';
echo '<input type="password" placeholder="Password" name="password">';
echo '</form>';

I can set the password to hidden at start but I need to know how to make the changePass button "become" or expand into the password text field either using CSS or javascript. I'm new to javascript and am unsure how to accomplish this on button click.

How can I change a button to a text field on click? I need to be able to change back to the button afterwards

I'm getting this: enter image description here

With this:

echo '<form id="changePassForm" action="" method="post" enctype="multipart/form-data">
  <div class="changePass">
    <div class="changePassBtn">Change Password</div>
    <input type="password" placeholder="Password" name="password">
  </div>';

And 

    .wrapper {
        background: #50a3a2;
        background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
        background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
        position: absolute;
        top: 0%;
        left: 0;
        width: 100%;
        height: 100%;
        margin-top: 0px;
        overflow: scroll;
        z-index: -1;
        text-align: center;
    }
.changePass {
  position: relative;
  width: 200px;
  height: 1px;
}

.changePass input {
  position: absolute;
  padding: 5px;
  display: none;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;

}

.changePass, .changePassBtn {
  background: #2d89ef;
  border-bottom: 2px solid #2b5797;
  color: white;
  padding: 4px;
  display: inline;
  border-radius: 2px;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
}

.changePass, .changePassBtn:hover {
  background: #2b5797;
  border-top: 2px solid #2d89ef;
  border-bottom: 0;
}

Even when I take it out of the wrapper entirely your colors do not come through. Why is this happening?

Upvotes: 0

Views: 3108

Answers (5)

Alex Durbin
Alex Durbin

Reputation: 196

As the other answers suggest, some jquery can do this pretty simply, but can also be done via javascript. I went the jquery route playing with the visibility in this jsfiddle:

js

$('button').on("click",function(){
    $('.hideable').toggleClass('hidden');
});

$('input').on("blur", function(){
    $('.hideable').toggleClass('hidden');
});

css:

.hideable{
  position: absolute;
  opacity: 1;
  transition: visibility .35s, opacity .5s linear;
}

.hidden{
  visibility: hidden;
  opacity: 0;
}

the fiddle includes both javascript method and jquery methods https://jsfiddle.net/youkgd2q/4/

Upvotes: 0

pandavenger
pandavenger

Reputation: 1027

Put both your button and input field in the same div and then overlap them using the positioning trick with relative and absolute. Then use JQuery to make it look pretty when hiding the elements.

JSFiddle: https://jsfiddle.net/wpbL3kjx/9/

//Shows Input Box When Focussed
$(".changePassBtn").click(function() {
  var neww = $(".changePass input").css("width");
  $(this).animate({
    width: neww
  }, 300, function() {
    $(".changePass input").fadeIn(300, function() {
      $(".changePassBtn").hide();
    }).focus();
  });
});

//Shows Button When Unfocussed
$(".changePass input").blur(function() {
  $(".changePassBtn").css("width", "auto");
  var neww = $(".changePassBtn").css("width");
  $(this).animate({
    width: neww
  }, 300, function() {
    $(".changePassBtn").show(0, function() {
      $(".changePass input").fadeOut(500, function() {
        $(".changePass input").css("width", "auto");
      });
    });
  });
});
.changePass {
  position: relative;
}
.changePass input {
  position: absolute;
  padding: 5px;
  display: none;
}
.changePass .changePassBtn {
  background: #2d89ef;
  border-bottom: 2px solid #2b5797;
  color: white;
  padding: 4px;
  display: inline;
  border-radius: 2px;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
}
.changePass .changePassBtn:hover {
  background: #2b5797;
  border-top: 2px solid #2d89ef;
  border-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="changePassForm" action="" method="post" enctype="multipart/form-data">
  <div class="changePass">
    <div class="changePassBtn">Change Password</div>
    <input type="password" placeholder="Password" name="password">
  </div>
</form>

Upvotes: 1

Mihai
Mihai

Reputation: 659

A good practice is to have the behavior(functionality) separated from the structure of the page (html document) and the presentation (css/style).

I would create some classes (show/hide) in css and use that classes to make certain changes in the DOM and this way i could find easier eventual bugs.

Another way would be to use a library like jQuery and make use of their functions, for example toggle or show and hide.

<input type="text" name="user" placeholder="username"/>
<input type="text" name="password" placeholder="password"/>

<input type="text" id="other" class="hideThis" name="other" placeholder="please fill this too.."/>
<button id="btn" class="showThis">submit</button>

.hideThis {
    display: none;
}

.showThis {
  display: block;
}

var button = document.getElementById('btn');
button.onclick = function(){
    button.className = "hideThis";
    document.getElementById('other').className = 'showThis';
}

jsFiddle

Cheers!

Upvotes: 0

Tusk
Tusk

Reputation: 1737

If you use jQuery, you could do it with .replaceWith

For example:

index.html

<button>To input</button>

script.js

$(document).ready(function(){
    $("button").click(function(){
        $(this).replaceWith('<input type="text"/>')
    });
});

result: https://jsfiddle.net/sws5m4cc/

Upvotes: 0

kmaork
kmaork

Reputation: 6022

You can echo both the button and text field, and make sure the field is hidden by default - echo '<div id="button" style="display:hidden"></div>';. Then, with javascript hide the button and show the text field when the button is clicked.

button = document.getElementById('theButtonID');
field = document.getElementById('theFieldID');
button.onclick = function(){
    button.style.display = 'hidden';
    field.style.display = '';
}

An animation can be done by changing field.style.width with javascript, or using css animations.

Upvotes: 1

Related Questions