[SOLVED] Automatically hiding div

dc_jt · January 22, 2008

Is there a way of hiding a div without clicking a button?

Basically ive got a form which when complete needs to be hidden. The way its set up is this:

1. Got the main form in register page.

2. This posts to userRegister page (within a div) where all validation is done and form gets saved to database etc. However, at the bottom I set a thank you for registering p tag to show instead of the form. At the moment it just displays above the form (as that is where this div is) but I need the form div to be hidden so that when its complete the form dissapears and you just have the thank you message.

Hope this makes sense and someone can help.

Thanks

rhodesa · January 22, 2008

<div id="myTestDiv">
...place form stuff in here...
</div>

to hide it call this JavaScript:

document.getElementById('myTestDiv').style.display = 'none';

dc_jt · January 23, 2008

Thanks for the reply, although this doesnt seem to work for some reason?!

If I do an onclick with that function then it works but when I just do the following it doesnt:

<div id="TestDiv">
test
</div>

<?php
	if ($_REQUEST['mode'] == 'complete')
 {
 	echo '<p>Thank You for your enquiry.</p>';

 	?>

 	<script type="text/javascript">
	document.getElementById('TestDiv').style.display = 'none';
	</script> 

<?php
	}?>

Any ideas?

Thanks

pdkv2 · January 23, 2008

create one function to hide the div and call this function on load event of body.

dc_jt · January 23, 2008

create one function to hide the div and call this function on load event of body.

Thanks, but could you give me an example please? Where would I load the body? Shall I copy and paste the whole code for you to see?

pdkv2 · January 23, 2008

Please give me the code

i'll make the corrections.

Regards

Sharad

priti · January 23, 2008

Thanks for the reply, although this doesnt seem to work for some reason?!

If I do an onclick with that function then it works but when I just do the following it doesnt:
<div id="TestDiv">
test
</div>

<?php
	if ($_REQUEST['mode'] == 'complete')
 {
 	echo '<p>Thank You for your enquiry.</p>';

 	?>

 	<script type="text/javascript">
	document.getElementById('TestDiv').style.display = 'none';
	</script> 

<?php
	}?> 
Any ideas?

Thanks

Hi,

when your page load you want to hide the div so

test

</div>

and when you click you call js function show_div() to show the div or on any event you can call this.

function hide_div()

{

document.getElementById('TestDiv').style.display = 'none';

}

function show_div()

{

document.getElementById('TestDiv').style.display = 'block';

}

</script>

Regards

pdkv2 · January 23, 2008

Thats good !

dc_jt · January 23, 2008

Thanks for the replies I will show you the whole code:

The first page is register.php which holds the following code:

<div id="register" style="opacity:0;">

<div class="breadcrumb">
<a href="#" id="welcomeclick">Back to Welcome.</a>
</div>


<h1>Register with 10 Network</h1>

<div id="log">
<div id="form_code"></div>
</div>

<form id="myForm" action="pages/userRegister.php" method="get">
<div id="formbox">
<div class="question">     
        <label for="title">Title.</label>
       <select name="title" id="title">
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
            <option value="Miss.">Miss.</option>
            <option value="Ms.">Ms.</option>
            <option value="Dr.">Dr.</option>
        </select>
    </div>   
    
<div class="question">
        <label for="forename">Forename.</label>
        <input type="text" name="name" value="" />
    </div>    
    
    <div class="question">    
        <label for="surename">Surname.</label>
        <input type="text" name="surname" value="" />
    </div>    
    
    <div class="question">     
        <label for="network">Select you region.</label>
        <select>
            <option>Select Network</option>
            <option>Lancashire</option>
            <option>Cheshire</option>
        </select>
    </div>   
    
    <div class="question">    
        <label for="address">Address.</label>
        <div class="multiple">
         <input type="text" name="address1" value="" />
        <input type="text" name="address2" value="" />
         <input type="text" name="address3" value="" />
        </div>
    </div>   
     
    <div class="question">    
        <label for="postcode">Postcode.</label>
        <input type="text" name="postcode" value="" />
    </div>    
    
    <div class="question">    
        <label for="daytel">Daytime Tel.</label>
         <input type="text" name="daytime_telephone" value="" />
    </div>    
    
    <div class="question">    
        <label for="evetel">Evening Tel.</label>
         <input type="text" name="evening_telephone" value="" />
    </div>   
     
    <div class="question">    
        <label for="mobtel">Mobile Tel.</label>
         <input type="text" name="phone" value="" />
     </div>   
     
     <div class="question">   
        <label for="email">Email Address.</label>
         <input type="text" name="email" value="" />
     </div>   
     
     <div class="question">   
        <label for="contact">How would you prefer to be contacted for invitations?</label><br />
        <div class="multiple">
       		<div class="checkchoice">
            	<input name="contact_telephone" type="checkbox" class="check" value="1">
            	<label>Telephone.</label>
                <div class="clear"></div>
            </div>
            <div class="checkchoice">
        		<input name="contact_mail" type="checkbox" class="check" value="1">
                <label>Mail.</label>
                <div class="clear"></div>
            </div>    
        
        	<div class="checkchoice">
       			<input name="contact_email" type="checkbox" class="check" value="1">
                <label>Email.</label>
                <div class="clear"></div>
            </div>        
        </div>        
     </div>   

 <div class="question">   
        <label for="terms">Please tick the checkbox to accept the <a href="terms.php">Terms & Conditions</a>.</label>
        <input name="newsletter" value="1" type="checkbox" class="check">
     </div>
     <div class="clear"></div>
     <input type="image" src="assets/images/buttons/registerbig.gif" width="167" height="19" name="button" id="submitter" class="submit" />
</div>
</form>

</div>

<script language="javascript" type="text/javascript"> 
window.addEvent('domready', function() {

// fade in content 

var content = $('register');

var fx = new Fx.Style(content, 'opacity').set(0);

var fx = new Fx.Style(content, 'opacity', {
	duration: 1000,
	transition: Fx.Transitions.Quad.easeInOut
}).start(0, 1);


});


// ajax form

$('myForm').addEvent('submit', function(e) {

/**
 * Prevent the submit event
 */
new Event(e).stop();

/**
 * This empties the log and shows the spinning indicator
 */
var log = $('form_code').empty().addClass('ajax-loading');

/**
 * send takes care of encoding and returns the Ajax instance.
 * onComplete removes the spinner from the log.
 */
this.send({
	update: log,
	onComplete: function() {
		log.removeClass('ajax-loading');

	}
});
});


// back to welcome 

$('welcomeclick').addEvent('click', function(e) {
e = new Event(e).stop();

var url = "pages/welcome.php";

var ajax = new Ajax(url, {
	method: 'get',
	update: $('rightcol'),
	evalScripts: true


	}).request();

});


</script>

The other page is userRegister.php which contains the error checking and validtion etc:

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/config.inc.php');
require_once(LOCAL_CLASSES.'/Tables/RCLTblUsers.class.php');
$oTblUsers = new RCLTblUsers();

if(!$_POST['name']){$_REQUEST[errors]['Name']='<li>Please enter your name. </li>';}
if(!$_POST['surname']){$_REQUEST[errors]['Surname']='<li>Please enter your surname. </li>';}
if(!$_POST['address1']){$_REQUEST[errors]['Address']='<li>Please enter your address. </li>';}
if(!$_POST['postcode']){$_REQUEST[errors]['Postcode']='<li>Please enter your postcode. </li>';}
if(validateemail($_REQUEST['email'])===false){$_REQUEST[errors]['Email']='<li>Please enter a valid email address</li>';}
if(!$_POST['newsletter']){$_REQUEST[errors]['Newsletter']='<li>You must accept the terms and conditions. </li>';}



if($_REQUEST[errors]){
	?>

	<ul class="errors">
	<?
		//for each erorr, echo the error message
		foreach($_REQUEST[errors] as $error){echo $error.'';}
	?>
        </ul>

	<?
	}

	if(sizeof($_REQUEST['errors'])<1)
	{
		$oTblUsers->AddUser($_POST);
		$_REQUEST['mode']="complete";

		$title=$_REQUEST['title'];
		$name=$_REQUEST['name'];
		$surname=$_REQUEST['surname'];
		$address1=$_REQUEST['address1'];
		$address2=$_REQUEST['address2'];
		$address3=$_REQUEST['address3'];
		$postcode=$_REQUEST['postcode'];
		$daytime_telephone=$_REQUEST['daytime_telephone'];
		$evening_telephone=$_REQUEST['evening_telephone'];
		$email=$_REQUEST['email'];
		$phone=$_REQUEST['phone'];
		$contact_telephone=$_REQUEST['contact_telephone'];
		$contact_mail=$_REQUEST['contact_mail'];
		$contact_email=$_REQUEST['contact_email'];
		$newsletter=$_REQUEST['newsletter'];

		if($contact_telephone == "1") $contact_telephone = 'Telephone';
		if($contact_mail == "1") $contact_mail = 'Mail';
		if($contact_email == "1") $contact_email = 'Email';
		if($newsletter == "1") $newsletter = 'Yes';

		$from = $email;
		$subject = "Website Registration";
		$message = 'The following information has been submitted through the 10Network Registration form:'."<br />"."<br />". '<font style="font-size:26px; font-weight:bold;">Registration</font><br /><br />
		<strong>Title: </strong>' .$title."<br />". '
		<strong>Christian Name: </strong>' .$name."<br />". '
		<strong>Surname: </strong>' .$surname."<br />". '
		<strong>Address: </strong>' .$address1." ".$address2." ".$address3."<br />". '
		<strong>Postcode: </strong>' .$postcode."<br />". '
		<strong>Daytime Telephone Number: </strong>' .$daytime_telephone."<br />". '
		<strong>Evening Telephone Number: </strong>' .$evening_telephone."<br />". '
		<strong>Mobile Phone Number: </strong>'.$phone."<br />". '
		<strong>Email: </strong>'.$email."<br />". '
		<strong>How would you prefer to be contacted for invitations?: </strong>'.$contact_telephone." ".$contact_mail." ".$contact_email."<br />". '
		<strong>Terms and conditions accepted?: </strong>'.$newsletter;

		function sendmail($to,$subject,$message,$from) {
		$headers = "";
    		mail($to,$subject,$message,"From: $from\nReply-To: $from\nX-Mailer: PHP/".phpversion()."\nContent-type: text/html");
		}

		$sendmail = sendmail("dconnor@***.com",$subject,$message,$from);

	}?>

<?php
	if ($_REQUEST['mode'] == 'complete')
 	{
 		echo '<p>Thank You for your enquiry.</p>';

 	?>

	<script language="javascript" type="text/javascript"> 

	function hideForm()
{
document.getElementById('formbox').style.display = 'none';
}
		//window.addEvent('domready', function() {

		//document.getElementById('formbox').style.display = '';
		//var log = $('form_code').empty()


 	//});
	</script>

<?php
	}?>

dc_jt · January 23, 2008

By the way using the testDiv isnt a good example because i want to show the form which is in the <formbox> div and hide it on complete.

Thanks

pdkv2 · January 23, 2008

By the way using the testDiv isnt a good example because i want to show the form which is in the <formbox> div and hide it on complete.

Thanks

Do You mean you want to hide the dive on submit of form ?

dc_jt · January 23, 2008

I want to hide the form div (formbox its called) after the form is submitted and there are no errors (hence, mode = complete)

Hope this helps

Thanks

dc_jt · January 23, 2008

Heres that userRegister.php without all the unnecessary email stuff so its easier for you to see:

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/config.inc.php');
require_once(LOCAL_CLASSES.'/Tables/RCLTblUsers.class.php');
$oTblUsers = new RCLTblUsers();

if(!$_POST['name']){$_REQUEST[errors]['Name']='<li>Please enter your name. </li>';}
if(!$_POST['surname']){$_REQUEST[errors]['Surname']='<li>Please enter your surname. </li>';}
if(!$_POST['address1']){$_REQUEST[errors]['Address']='<li>Please enter your address. </li>';}
if(!$_POST['postcode']){$_REQUEST[errors]['Postcode']='<li>Please enter your postcode. </li>';}
if(validateemail($_REQUEST['email'])===false){$_REQUEST[errors]['Email']='<li>Please enter a valid email address</li>';}
if(!$_POST['newsletter']){$_REQUEST[errors]['Newsletter']='<li>You must accept the terms and conditions. </li>';}



if($_REQUEST[errors]){
	?>

	<ul class="errors">
	<?
		//for each erorr, echo the error message
		foreach($_REQUEST[errors] as $error){echo $error.'';}
	?>
        </ul>

	<?
	}



<?php
	if ($_REQUEST['mode'] == 'complete')
 	{
 		echo '<p>Thank You for your enquiry.</p>';

 	?>

	<script language="javascript" type="text/javascript"> 

	function hideForm()
{
document.getElementById('formbox').style.display = 'none';
}
		//window.addEvent('domready', function() {

		//document.getElementById('formbox').style.display = '';
		//var log = $('form_code').empty()


 	//});
	</script>

<?php
	}?>

pdkv2 · January 23, 2008

Call the function hideForm()

I made the change in it

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/config.inc.php');
require_once(LOCAL_CLASSES.'/Tables/RCLTblUsers.class.php');
$oTblUsers = new RCLTblUsers();

if(!$_POST['name']){$_REQUEST[errors]['Name']='<li>Please enter your name. </li>';}
if(!$_POST['surname']){$_REQUEST[errors]['Surname']='<li>Please enter your surname. </li>';}
if(!$_POST['address1']){$_REQUEST[errors]['Address']='<li>Please enter your address. </li>';}
if(!$_POST['postcode']){$_REQUEST[errors]['Postcode']='<li>Please enter your postcode. </li>';}
if(validateemail($_REQUEST['email'])===false){$_REQUEST[errors]['Email']='<li>Please enter a valid email address</li>';}
if(!$_POST['newsletter']){$_REQUEST[errors]['Newsletter']='<li>You must accept the terms and conditions. </li>';}



if($_REQUEST[errors]){
	?>

	<ul class="errors">
	<?
		//for each erorr, echo the error message
		foreach($_REQUEST[errors] as $error){echo $error.'';}
	?>
        </ul>

	<?
	}



<?php
	if ($_REQUEST['mode'] == 'complete')
 	{
 		echo '<p>Thank You for your enquiry.</p>';

 	?>

	<script language="javascript" type="text/javascript"> 

	function hideForm()
{
document.getElementById('formbox').style.display = 'none';
}
		//window.addEvent('domready', function() {

		//document.getElementById('formbox').style.display = '';
		//var log = $('form_code').empty()


 	//});
hideForm();
	</script>

<?php
	}?>

dc_jt · January 23, 2008

Thanks but still doesnt work?!!

Any more ideas?

Thanks again

dc_jt · January 23, 2008

Solved finally! Its because I didnt have evalScripts:true, in my ajax.

Thanks for your help anyway

Sign In

[SOLVED] Automatically hiding div

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information