Remove hide button from show in show/hide div script

[Dahls]

Found this great script, it has button that show contents of div when clicked and the button changes to hide div button.
it starts all over with show div button on page load so works great.

my problem is i don´t need the second button

my plan is using it in combination of captcha script,
where captcha is hidden until user clicks button, hoping making it harder for bots.
and others that make fake registrations.

i already have integrated captcha script that generate the captcha
and its that div i hide with the script.

think my solution can benefit all that is using captcha adding extra layer of security to it,
at least i hope it does :)


<script type="text/javascript">
var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Show captcha', hide_button = 'Hide captcha';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}

window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
</script>

<div id="showhide"></div>
<div id="hide_show">captcha</div>

i have tried lots of scripts but its only one i could find that works close to what i want
and spend couple of hours trying solving it my self but i cant figure it out.

[jscheuer1]

Do you have some sort of code on the page designed to prevent code injection and/or DOM manipulation from the console or other places other than that hard coded to the page and its scripts? The reason I ask is I had several ideas for this, but when I tried it out in the console, the form would submit before I had a chance to see the captcha, so they appear useless.

Oh, and bots don't use style, so they will "see" the captcha anyway. In order to catch bots, usually the opposite is done. A form field hidden from users by style is labeled as "required". If a bot reads the page, it will fill it out. Humans won't see it, so if it's filled in, you know it's a bot.

Combining that technique with a high quality captcha, which you already have, should be fine. Hiding and showing it is meaningless to bots though, and a nuisance for real people.

[Dahls]

ok thank you for your advice and for looking at it

[jscheuer1]

If you still want to do this, I discovered a method that appears to work in the console (change highlighted):


<script type="text/javascript">
var button_beg = '<button id="button" onclick="showhide();">', button_end = '</button>';
var show_button = 'Show captcha', hide_button = 'Hide captcha';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.removeChild(document.getElementById('button'));
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}

window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
</script>

I think there are "better ways", but, as I said before, they triggered the form submission before the captcha could be used. If that was due to something you know about, we can maybe work with it. But, for now, if you still want this, I think the above would likely be the way to go.

A variation on this is (also works in the console):


<script type="text/javascript">
var button_beg = '<button id="button" onclick="showhide();">', button_end = '</button>';
var show_button = 'Show captcha', hide_button = 'Hide captcha';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.style.height = showhide.offsetHeight + 'px';
showhide.removeChild(document.getElementById('button'));
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}

window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
</script>

That one preserves the space which the button had occupied.

[Dahls]

thank you for the code but you were right about my buttons they did not prevent the bot, if it is a bot who can tell :)

i love that code so i using it again at least until customers criticize they has to click show caprcha :)

[jscheuer1]

I'm not sure how one can tell if it's a bot. What makes you think it is? Is it doing anything odd, like sending you spam? You should be able to block its ip address unless it it keeps changing it.

Using the hidden field strategy should catch it if it is a bot. For example, I see you have an email field, you could add:


<input type="text" name="sender_email" size="32" value="" placeholder="Email"><br>
<br>
<input type="text" name="confirm_email" size="32" value="" placeholder="Confirm email">


Then in the stylesheet have:


input[name="confirm_email"] {display: none;}

That way, only bots should see it. If that's filled out, have the form not validate. You do have form validation, right?