asked on

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

Brant Snow

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

jagguy

ASKER

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 Snow

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

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial