Allow me to explain my current project.
- I am in the process of developing a Modal that enables users to input a password
- There will be an option to toggle between showing or hiding the text in the password field using a button positioned on the right side of the field.
Up to now, everything is working flawlessly. Here's a live demo:
This snippet showcases my HTML code:
<div class="input-group col-md-8 col-md-offset-2">
<input type="password" class="form-control" id="password" placeholder="Password">
<span class="input-group-btn">
<button type="button" id="passwordButton" class="btn btn-primary">Show</button>
</span>
</div>
And here is the jQuery function I am implementing:
<script>
$(function () {
$(".form-control").each(function (index, input) {
var $input = $(input);
$("#passwordButton").click(function () {
var change = "";
if ($(this).html() === "Show") {
$(this).html("Hide");
change = "text";
} else {
$(this).html("Show");
change = "password";
}
var rep = $("<input type='" + change + "' />")
.attr("id", $input.attr("id"))
.attr("name", $input.attr("name"))
.attr('class', $input.attr('class'))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
}).insertAfter($input);
});
});
</script>
However, after adding the jQuery script at the end of my file, the button disappears. You can see how it should appear prior to the addition of my jQueryhttps://i.sstatic.net/IaB6z.png
Here is the altered appearance after the jQuery inclusion:
https://i.sstatic.net/ohnx7.png
If there is anything obvious that I may be overlooking or doing incorrectly, please point it out. I have tried to present this question in a clear and concise manner for better understanding.