JavaScript: Div & Element hide & show cross-browser script solution
January17
Hello Guys,
Today I was working in a project where I had to add element hide and show depending on the condition. For example, if the client wants to contact by phone, the phone DIV element or area appears. If not, the phone DIV element hide quickly. I was writing scripts for this. But to my surprise, I noticed that none of them are cross-browser supporting. When one scripting working in few browsers, the same script is not working in other browsers. So, I struggled to come up with the cross-browser solution and at last, I succeeded. You can use this code in your form whenever you need to show and hide elements dynamically in JavaScript. This script is a kind of Contact Us form.
So, what am I gonna do? I am going to share my small script so that you can save your time I you find my this article by Google search or any other search.
OK!
No more introduction. Let us start.
Download:
I suggest you first download the script and take a look.
http://www.tanzilo.com/demo/code/hide_show/hide_show.zip
Features:
- It is a totally CSS-based and table-less scripting
- I have used phpMailer version 2.3 and it works for PHP 5 and/or 6 version
- JavaScript used as you already know
CSS Code:
<style type="text/css"> body { font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; } #contactForm { width:500px; height:auto; float:left; clear:both; } #contactForm INPUT, OPTION, TEXTAREA { font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; } #formRow { width:500px; float:left; padding:3px 0px 0px 0px; } #columnLeft { width:250px; height:auto; float:left; } #columnRight { width:250px; height:auto; float:left; } #formOutput { } #errorMessage { color:#FF0000; font-weight:bold; } #successMessage { color:#009900; font-weight:bold; } #formRowForum { width:500px; float:left; padding:3px 0px 0px 0px; } #formRowDatabase { width:500px; float:left; padding:3px 0px 0px 0px; } #formRowUsers { width:500px; float:left; padding:3px 0px 0px 0px; } #formRowProvider { width:500px; float:left; padding:3px 0px 0px 0px; } #formRowCurrentSpecs { width:500px; float:left; padding:3px 0px 0px 0px; } </style>
HTML Code:
<form id="contact_form" name="contact_form" method="post" action=""> <div id="contactForm"> <div id="formRow"> <div id="columnLeft">Name:</div> <div id="columnRight"><input name="name" type="text" value="<?php echo $_SESSION['name']; ?>" /></div> </div> <div id="formRow"> <div id="columnLeft">Email:</div> <div id="columnRight"><input name="email" type="text" value="<?php echo $_SESSION['email']; ?>" /></div> </div> <div id="formRow"> <div id="columnLeft">Best method to contact you:</div> <div id="columnRight"> <select name="contact_method" id="contact_method" onchange="displayContactMethod();"> <option value="Please Select One">Please Select One</option> <option value="Phone">Phone</option> </select> <div id="phoneNoDiv">Phone No: <input name="phone" id="phone" type="text" value="<?php echo $_SESSION['phone'] ;?>" /></div> </div> </div> <div id="formRow"> <div id="columnLeft">Will this server host a vBulletin site?</div> <div id="columnRight"> <select name="host_vb" id="host_vb" onchange="controlServerHostOptions();"> <option value="No">No</option> <option value="Yes">Yes</option> </select> </div> </div> <div id="formRowForum"> <div id="columnLeft">Forum Link:</div> <div id="columnRight"><input name="forum_link" type="text" value="<?php echo $_SESSION['forum_link'] ;?>" /></div> </div> <div id="formRowDatabase"> <div id="columnLeft">Current size of database:</div> <div id="columnRight"><input name="size" type="text" value="<?php echo $_SESSION['size']; ?>" /></div> </div> <div id="formRowUsers"> <div id="columnLeft">Average concurrent users:</div> <div id="columnRight"><input name="users" type="text" value="<?php echo $_SESSION['users']; ?>" /></div> </div> <div id="formRow"> <div id="columnLeft">Do you currently have a dedicated server?</div> <div id="columnRight"> <select name="server" id="server" onchange="controlCurrentHostOptions();"> <option value="No">No</option> <option value="Yes">Yes</option> </select> </div> </div> <div id="formRowProvider"> <div id="columnLeft">Current Provider:</div> <div id="columnRight"><input name="current_provider" type="text" value="<?php echo $_SESSION['current_provider']; ?>" /></div> </div> <div id="formRowCurrentSpecs"> <div id="columnLeft">Current Server Specs:</div> <div id="columnRight"><textarea name="current_specs" cols="30" rows="5"><?php echo $_SESSION['current_specs'] ;?></textarea></div> </div> <div id="formRow"> <div id="columnLeft">Are there any specs you must have with your new server or additional notes you would like us to consider?</div> <div id="columnRight"><textarea name="specs" cols="30" rows="5"><?php echo $_SESSION['specs']; ?></textarea></div> </div> <div id="formRow"> <div id="columnLeft">Time frame to purchase</div> <div id="columnRight"><input name="time" type="text" value="<?php echo $_SESSION['time']; ?>" /></div> </div> <div id="formRow"> <div id="columnLeft">Do you have a budget we need to consider?</div> <div id="columnRight"><input name="budget" type="text" value="<?php echo $_SESSION['budget']; ?>" /></div> </div> <div id="formRow"> <div id="columnLeft">Anti Spam Question: How much is: 5+5+3=?</div> <div id="columnRight"><input name="total" type="text" /></div> </div> <div id="formRow"> <div id="columnLeft"> </div> <div id="columnRight"> <input name="submit" type="submit" value="Submit" /> <input name="reset" type="reset" /> </div> </div> </div> </form>
JavaScript Code:
function displayContactMethod()
{
var id = 'phone';
var contatMethod = document.contact_form.contact_method.value;
if(contatMethod == "Phone")
{
displayDiv('phoneNoDiv')
}
else
{
hideDiv('phoneNoDiv');
document.contact_form.phone.value = '';
}
}
function initialHiddenDivs()
{
var divID_1 = 'phoneNoDiv';
var divID_2 = 'formRowForum';
var divID_3 = 'formRowDatabase';
var divID_4 = 'formRowUsers';
var divID_5 = 'formRowProvider';
var divID_6 = 'formRowCurrentSpecs';
hideDiv(divID_1);
hideDiv(divID_2);
hideDiv(divID_3);
hideDiv(divID_4);
hideDiv(divID_5);
hideDiv(divID_6);
}
function hideDiv(id)
{
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function displayDiv(id)
{
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
function controlServerHostOptions()
{
var host_vb = document.contact_form.host_vb.value;
if(host_vb == "Yes")
{
displayDiv('formRowForum');
displayDiv('formRowDatabase');
displayDiv('formRowUsers');
}
else
{
hideDiv('formRowForum');
hideDiv('formRowDatabase');
hideDiv('formRowUsers');
document.contact_form.forum_link.value = '';
document.contact_form.size.value = '';
document.contact_form.users.value = '';
}
}
function controlCurrentHostOptions()
{
var server = document.contact_form.server.value;
if(server == "Yes")
{
displayDiv('formRowProvider');
displayDiv('formRowCurrentSpecs');
}
else
{
hideDiv('formRowProvider');
hideDiv('formRowCurrentSpecs');
document.contact_form.current_provider.value = '';
document.contact_form.current_specs.value = '';
}
}
PHP Code:
<?php if($_POST) { $name = trim($_POST['name']); $email = trim($_POST['email']); $contact_method = trim($_POST['contact_method']); $phone = trim($_POST['phone']); $host_vb = trim($_POST['host_vb']); $forum_link = trim($_POST['forum_link']); $size = trim($_POST['size']); $users = trim($_POST['users']); $server = trim($_POST['server']); $current_provider = trim($_POST['current_provider']); $current_specs = trim($_POST['current_specs']); $specs = trim($_POST['specs']); $time = trim($_POST['time']); $budget = trim($_POST['budget']); $total = trim($_POST['total']); $_SESSION['name'] = $name; $_SESSION['email'] = $email; $_SESSION['contact_method'] = $contact_method; $_SESSION['phone'] = $phone; $_SESSION['host_vb'] = $host_vb; $_SESSION['forum_link'] = $forum_link; $_SESSION['size'] = $size; $_SESSION['users'] = $users; $_SESSION['server'] = $server; $_SESSION['current_provider'] = $current_provider; $_SESSION['current_specs'] = $current_specs; $_SESSION['specs'] = $specs; $_SESSION['time'] = $time; $_SESSION['budget'] = $budget; if($total != 13) { echo '<div id=errorMessage>Anti Spam Question is wrong!<br /> Please sum up and type the current result of: 5+5+3=?</div>'; } else { $emailBody = ''; if(!empty($name)) { $emailBody .= 'Name : ' . $name . chr(10); } if(!empty($email)) { $emailBody .= 'Email : ' . $email . chr(10); } if(!empty($contact_method)) { $emailBody .= 'Best method to contact you : ' . $contact_method . chr(10); } if(!empty($phone)) { $emailBody .= 'Phone : ' . $phone . chr(10); } if(!empty($host_vb)) { $emailBody .= 'Will this server host a vBulletin site? : ' . $host_vb . chr(10); } if(!empty($forum_link)) { $emailBody .= 'Forum Link : ' . $forum_link . chr(10); } if(!empty($size)) { $emailBody .= 'Current size of database : ' . $size . chr(10); } if(!empty($users)) { $emailBody .= 'Average concurrent users : ' . $users . chr(10); } if(!empty($server)) { $emailBody .= 'Do you currently have a dedicated server? : ' . $server . chr(10); } if(!empty($current_provider)) { $emailBody .= 'Current Provider : ' . $current_provider . chr(10); } if(!empty($current_specs)) { $emailBody .= 'Current Server Specs : ' . $current_specs . chr(10); } if(!empty($specs)) { $emailBody .= 'Are there any specs you must have with your new server or additional notes you would like us to consider? : ' . $specs . chr(10); } if(!empty($time)) { $emailBody .= 'Time frame to purchase : ' . $time . chr(10); } if(!empty($budget)) { $emailBody .= 'Do you have a budget we need to consider? : ' . $budget . chr(10); } include_once('php5Mailer/class.phpmailer.php'); $mail = new PHPMailer(); $body = $emailBody; $body = eregi_replace("[\]",'',$body); $subject = eregi_replace("[\]",'',$subject); $mail->From = $email; $mail->FromName = $name; $mail->Subject = "New Email from $name ($email)"; // optional, comment out and test $mail->AltBody = "To view the message, please use an HTML compatible email viewer!"; $mail->Body = nl2br($body); $mail->AddAddress("todd@urljet.com", "Todd"); $mail->IsHTML(true); if(!$mail->Send()) { echo '<div id=errorMessage>Failed to send mail</div>'; } else { echo '<div id=successMessage>Mail sent</div>'; $_SESSION['name'] = ''; $_SESSION['email'] = ''; $_SESSION['contact_method'] = ''; $_SESSION['phone'] = ''; $_SESSION['host_vb'] = ''; $_SESSION['forum_link'] = ''; $_SESSION['size'] = ''; $_SESSION['users'] = ''; $_SESSION['server'] = ''; $_SESSION['current_provider'] = ''; $_SESSION['current_specs'] = ''; $_SESSION['specs'] = ''; $_SESSION['time'] = ''; $_SESSION['budget'] = ''; } } } ?>
Once again I would like to remind you that you first download this small script from the above download link and take a look at the whole script.
That is all for now, Dude!
Thank you for reading.
