how to disable callback with submit button

I am using cakephp and I simply want t hide and show a div area with the press of a button.
I can do this but what happens is that when the div shows it then disappears after a few secs due to callback default function of the button.
  <?php 
          echo $this->Form->button('showsearch', array('label' => 'Search',  'onclick' => 'hide()'));
        
           ?>
        
            <div id="lessonSearch" style="display: none" >
..

<script type="text/javascript">
function hide()
{

  
  
	var e = document.getElementById("lessonSearch");

	  if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
  
  
  
}
</script>

Open in new window

jagguyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brant SnowCommented:
Unfortunately your callback function is not in the code provided above so it is difficult to debug, but I would suggest using jquery for any dom manipulation, specifically the .toggle function which will hide or show based upon you clicking something, also this will avoid any callback elements , the code below should work for you

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
	$("#mybutton").click(function(){
		$("#lessonSearch").toggle();
	});

});
</script>
</head>
<body>
        <input type="submit" value="Submit" id="mybutton" />
		
		
            <div id="lessonSearch" style="display: none" >
.. I will show and hide
			</div>

</body>
</html>

Open in new window

jagguyAuthor Commented:
Sorry no good as i get the same as before, the div shows and after a few secs it goes again.
. A submit button in php is an automatic callback.
Brant SnowCommented:
I guess i am not understanding your PHP cake button functionality, Im not sure where the callback is executed, but if it is true it is an automatic callback, perhaps you dont use PHP,

Why not just use jquery's ajax and make everything raw HTML

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
	$("#mybutton").click(function(){
		

             $.ajax({
                    url: '/services/something.php',
                    type: "post",
                    data: yourdata
                    beforeSend: function () {
                       
                    },
                    success: function (data) {


                    },
                   complete: function () {
                             $("#lessonSearch").toggle();
                   }
                        
                   

                });

	});

});
</script>
</head>
<body>
        <div id="mybutton" style="cursor:pointer;">Submit</div>
		
		
            <div id="lessonSearch" style="display: none" >
.. I will show and hide
			</div>

</body>
</html>

Open in new window

Julian HansenCommented:
I suspect your problem is caused by the form submitting and re-rendering the screen. Try this

1 Change your onclick to return the value returned by hide() like so

echo $this->Form->button('showsearch', array('label' => 'Search',  'onclick' => 'return hide()'));

2. Change hide() to return false
<script type="text/javascript">
function hide()
{
    var e = document.getElementById("lessonSearch");

    if(e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'block';

    // ADD THIS
    return false;
}
</script>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.