We Keep Coding

How to hide placeholder on a button click event?

I have an input text field with placeholder and its value as shown below:
<input type="text" name="test" placeholder="testing">
and I have two buttons, one is used to hide and another one is used to show the placeholder:
<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>
I want to hide the placeholder when I click on the button hide and show the placeholder when I click on the button show.I have googled and I come to know that it is possible to do by using css, but I still can not find any solution. Can anyone help me either using jquery or css or whatever? Thank you so much for answering my question.

If you wan't jQuery solution. Save your placeholder in a global var so you can reset it.
var placeholder = $('#txtInput').attr('placeholder');
$('#btn-hide').on('click', function() {
$('#txtInput').attr('placeholder' ,'');
});
$('#btn-show').on('click', function() {
$('#txtInput').attr('placeholder' ,placeholder);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtInput" type="text" name="test" placeholder="testing">
<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>

you can remove and add attrbiute with jquery
$('#btn-hide').on('click', function(){
$('input[name="test"]').removeAttr("placeholder")
})
$('#btn-show').on('click', function(){
$('input[name="test"]').attr("placeholder", 'text')
})

This solution is pure css. It targets all input fields and onFocus it makes the font color transparent.
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Maybe something like this can help you?
$("#btn-hide").click(function(){
$("input[name='test']").attr("placeholder"," ");
});
$("#btn-show").click(function(){
$("input[name='test']").attr("placeholder","testing");
});
P.S: It's not tested

Jquery :
$('#btn-hide').click(function(){
$('input').removeAttr('placeholder');
})
$('#btn-show').click(function(){
$('input').attr('placeholder','testing');
})

if you are using jquery just use this code
$("#btn-hide").click(function () {
$("[name=test]").removeAttr("placeholder");
});
$("#btn-show").click(function () {
$("[name=test]").attr("placeholder","testing");
});

You need to create a jquery/javascript function to show or hide your controls.
HTML:
<input type="text" name="test" placeholder="testing"/>
<button id="btn-hide" click="hide_text()">Hide</button>
<button id="btn-show" click="show_text()">Show</button>
jQuery:
function hide_text(){
$('input[placeholder:testing]').hide();
}
function show_text(){
$('input[placeholder:testing]').show();
}
.show and .hide are jQuery function that will set the display of the indicated control.

You actually don't need separate buttons for hide and show. You could have a single button that toggles placeholder and the button text is changed accordingly. https://jsfiddle.net/x337ey8p/2/
JS (pure)
function togglePlaceholder(btn) {
var tb = document.getElementById('test1');
if (tb.placeholder != '') {
tb.placeholder = '';
btn.innerHTML = 'Show';
}
else {
tb.placeholder = 'testing';
btn.innerHTML = 'Hide';
}
}
HTML
<input id="test1" type="text" name="test" placeholder="testing">
<button id="btn-show" onclick="togglePlaceholder(this)">Hide</button>

I am sharing a pure javascript way to achieve the same.
JS(pure)
HTML
<input id="inputId" type="text" name="test" placeholder="testing">
<button id="btn-hide" onclick ='hidePlaceholder()'>Hide</button>
<button id="btn-show" onclick ='showPlaceholder()'>Show</button>
JS
var placeholderVal;
function hidePlaceholder(){
placeholderVal = document.getElementById("inputId").placeholder;
document.getElementById("inputId").placeholder = "";
}
function showPlaceholder(){
document.getElementById("inputId").placeholder = placeholderVal;
}
This is how you can show/hide placeholder of an input using javaScript only.
Thanks!

PHP Ajax live search box

I am trying to make a PHP Ajax live search Box, so far is working good but it seems that I am facing two problems:
The first one is that when data is showing on the screen, I want it to disappear if I move the mouse outside the search box.
The second one is related to CSS, I want the position of data results to be just under my search box, now is floating right.
Here the code:
<div class="widget-container widget_search">
<span class="adds"></span>
<form action="" id="searchform" method="POST">
<p>
<input type="text" id="search" placeholder="Chercher" size="30" name="search">
<button type="submit" id="searchsubmit"></button>
</p>
</form><!--/ #searchform-->
<div id="livesearch" style=" width:auto; height:auto; margin:auto; position: absolute;"></div>
</div><!--/ .widget-container-->
JS:
$(document).ready(function(){
$("#search").keyup(function(){
var valor = $("#search").val();
$.ajax({
type: "POST",
url: "/auto/search/",
data: {word:valor},
success: function(res) {
$('#livesearch').html(res);
}
});
});
});

Let'suppose the data container has an id, like "myid". Then, you can hide it like this:
document.getElementById('myid').style.display = "none";
You can make it visible like this:
document.getElementById('myid').style.display = "block";
To make this general, you can do something like this:
function changeDisplay(element, display) {
element.style.display = display;
}
You can store the data container like this:
var dataContainer = document.getElementById("myid");
Now, you want to hide it when the mouse leaves. So, you need to set the onmouseout of your search box to a function like this:
function left() {
changeDisplay(dataContainer, "none");
}
But you probably want to make it reappear when you hover to the element. So you need to set the onmouseover event to a function like this:
function entered() {
changeDisplay(dataContainer, "block");
}
As about positioning the results, you might consider adding a <br> after the search tag and then position it to the left.

using jquery:
livesearch-id of div (search box)
one-id of div where search elements are being showed
$("#livesearch").mouseout(function(){$('#one').hide(); //hides the div
});
$("#livesearch").mouseover(function(){$('#one').show(); //shows the div when mouse is pointed again
});
CSS:
set style="margin-left:(number) px;"

Change image onclick with div toggle

I have some code I'm working on that toggles a div of information depending on the user clicking an image. What I'm looking for is assistance in getting the image to swap when the user clicks, then to swap back when it's clicked again. The image should be changing to: https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif
I'm a newbie when it comes to coding with JS, so any help provided would be much appreciated!
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block";
}
else{
e.style.display="none";
}
return true;
}
</script>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para1')" value="Toggle"><br>
<div id="para1" style="display:none">
This is my text for section 1!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para2')" value="Toggle"><br>
<div id="para2" style="display:none">
This is my text for section 2!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para3')" value="Toggle"><br>
<span id="para3" style="display:none">
This is my text for section 3!
</span>

You've got the right idea. What I did for this case was add an id to each image with the name of the div + _img -- grabbed that element the same way, then updated the src:
javascript
function toggleMe(a){
var e=document.getElementById(a);
var i=document.getElementById(a+'_img');
if(!e)return true;
if(e.style.display=="none"){
i.src="https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif"
e.style.display="block"
}
else{
i.src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif"
e.style.display="none"
}
return true;
}
html
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para1')" value="Toggle" id="para1_img"><br>
<div id="para1" style="display:none">
This is my text for section 1!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para2')" value="Toggle" id="para2_img"><br>
<div id="para2" style="display:none">
This is my text for section 2!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para3')" value="Toggle" id="para3_img"><br>
<span id="para3" style="display:none">
This is my text for section 3!
</span>
here's a working example: http://jsfiddle.net/8h4T7/1/

PURE CSS
There's no need to use JS.
Here you go with a simple HTML / CSS solution:
LIVE DEMO
<input id="_1" class="toggler" type="checkbox">
<label for="_1"></label>
<div>This is my text for section 1!</div>
CSS:
.toggler,
.toggler + label + div{
display:none;
}
.toggler + label{
background: url(https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif);
position:relative;
display:inline-block;
width:11px;
height:11px;
}
.toggler:checked + label{
background: url(https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif);
}
.toggler:checked + label + div{
display: block;
}
The good part is that both your images are loaded in the browser so there won't happen an useless image request to the server (creating a time-gap) with no image visible (while it's loading).
As you can see the trick is to hide the checkbox and the div,
than using the :checked state you can do your tricks.
PURE JS
If you really want to play with JS than here's some changes to simplify the HTML markup:
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" value="para1"><br>
<div id="para1" style="display:none">This is my text for section 1!</div>
Note that I've changed the useless value to something useful, and removed the unnecessary ID from your inputs. Also, I've removed the messy HTML inline onclick callers. They're hard to maintain in production.
The input value will now help us to target your ID containers.
var imgSRC = "//casetest.blackboard.com/bbcswebdav/users/kas200/";
function toggleFn(){
var tog = this.tog = !this.tog;
var targetEl = document.getElementById(this.value);
targetEl.style.display = tog ? "block" : "none";
this.src = imgSRC + (tog?"collapse":"expand") + ".gif";
}
var $para = document.querySelectorAll("[value^=para]");
for(var i=0; i<$para.length; i++) $para[i].addEventListener('click', toggleFn, false);
LIVE DEMO 1
Another JS version:
var imgSRC = "//casetest.blackboard.com/bbcswebdav/users/kas200/";
function toggleFn(){
var el = document.getElementById(this.value);
el.style.display = el.style.display=='none' ? "block" : "none";
this.src = imgSRC +(this.src.match('expand') ? "collapse" : "expand")+ ".gif";
}
var $para = document.querySelectorAll("[value^=para]");
for(var i=0; i<$para.length; i++) $para[i].addEventListener('click', toggleFn, false);
LIVE DEMO 2
jQuery VERSION
Having the exact same as above HTML this is the needed jQuery code:
var imgSRC = "//casetest.blackboard.com/bbcswebdav/users/kas200/";
$(':image[value^="para"]').click(function(){
var tog = this.tog = !this.tog;
$('#'+ this.value).fadeToggle(); // or use .slideToggle();
this.src = imgSRC + (tog?"collapse":"expand") + ".gif";
});
LIVE DEMO
The interesting part of the code above is the way we store the current state directly into the this element reference Object:
var tog = thistog = !this.tog;
and using a set negation we create the toggle state.
Instead, if you're familiar with the bitwise XOR operator you can use it (to achieve the same) like:
var tog = this.t ^= 1;
XOR DEMO

Using jQuery
You can also use jQuery. It's a tool designed to help young coders. It allows manipulation of JavaScript through minimal functions.
Adding <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> to the head of your document will allow you to use jQuery. Then you can add some style to your collapsibles like this method based on pennstatephil's code.
function toggleMe(a){
var e=$('#'+a);
var i=$(a+'_img');
if(!e) return false;
if(e.css('display') == "none" ) {
i.attr('src', 'https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif');
e.fadeIn('slow');
}
else {
i.attr('src', 'https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif');
e.fadeOut('fast');
}
return true;
}
And an example can be seen here
jQuery API Documentation can be found here

Javascript Hide/Show div not working

im having trouble running javascript hide/show div using CSS classes, when i click on the trigger nothing happens. The relevant codes are the following:
HTML
Click
<div id="test" class="hidden">
test
</div>
CSS
.hidden{
display:none;
}
JS
function toggleClass(eid, myclass) {
var theEle = document.getElementById(eid);
var eClass = theEle.className;
if (eClass.indexOf(myclass) >= 0) {
theEle.className = eClass.replace(myclass, "");
} else{
theEle.className += "" +myclass;
}
}

two issues: you missed a "#" for the href + ' for the test and hidden (must be strings):
Click
<div id="test" class="hidden">
test
</div>

im not 100% certain, but im pretty sure you need to enclose the arguments in quotation marks
Click
<div id="test" class="hidden">
test
</div>

get the size of label text inside the div?

I am trying to get the size of label text inside the div and chech of the size is 0 hide this div
Update the text is in dnn_ctr2802_View_lblHelp class dnnHelpText
javascript
$('.dnnTooltip').dnnTooltip();
//get the size of the hiden label
var labelTextSize = $(".dnnHelpText").val().length;
console.log("labelTextSize");
if(labelTextSize == 0)
{
$('.dnnTooltip').hide()
}
html
<div class="pull-right eyeball">
<img id="img_type" src="/ideaPark/DesktopModules/ExplorationTypeSaftyAlert/img/3.png" />
<img id="img_safety_alert" class="eyeball-warning" src="/ideaPark/DesktopModules/ExplorationTypeSaftyAlert/img/exploration-warning.png" />
</div>
<div class="dnnTooltip">
<label id="dnn_ctr2802_View_label">
<a id="dnn_ctr2802_View_cmdHelp" tabindex="-1" href="javascript:__doPostBack('dnn$ctr2802$View$cmdHelp','')"><span id="lblLabel"></span></a>
</label>
<div id="dnn_ctr2802_View_pnlHelp" class="dnnFormHelpContent dnnClear" style="display:none;">
<span id="dnn_ctr2802_View_lblHelp" class="dnnHelpText"> bnmbnmbnmbnmtfgjnfvyg</span>
</div>

try this & BTW try to use jquery UI function .remove()
var labelTextSize = $('.dnnHelpText').text().length;
console.log("text:" + labelTextSize.length);
if (labelTextSize == 1) {
$('.dnnTooltip').remove();
}

Try this:
var labelTextSize = $("#lblLabel").width();
And to test, try this:
console.log(labelTextSize);
UPDATE:
As anything worked I have search for other way to achieve this. I have found this question and maybe it works for you.
Try this:
$(".dnnHelpText").bind("DOMSubtreeModified", function(){
var labelTextSize = $(this).width();
if(labelTextSize == 0)
{
$('.dnnTooltip').hide()
}
});
That snipet add an event listener when the content of the label is been changed. So then, inside the event you may have access to it's properties to do your routine.