Javascript in PHP/HTML hiding Div not working - javascript

I am new to coding so be gentle. I am building a new user interface in PHP for a database of marriage listings for use at our county library. I am using this javascript code that was part of a solution I found here that I though I could use and modify the corresponding HTML to meet my needs:
<--Javascript code-->
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
I have modified the body of the html inside the php page to attempt to provide a listing of records on the left hand side and when they select a record from the list, it displays it in the right hand side div/table that allows them to edit it in the form, then to submit after making changes. It works well for the first couple of records you view, but on the third click it no longer hides the old records, it starts displaying additional ones in the right div. For some reason after two successful displays, the third and any further clicks on records in the left list will just start displaying more and more records in the right side div. Any help with this would be greatly appreciated. Here is the PHP/HTML:
<--PHP Code-->
<?php
include 'config-admin-marriages.php';
if (isset($_POST['lastname'])) { $one=$_POST['lastname']; }
if (isset($_POST['firstname'])) { $two=$_POST['firstname']; }
$sql = 'SELECT * FROM names WHERE ';
if (!empty($one) && !empty($two)) {
$sql.="glast like :lastname and gfirst like :firstname or blast like :lastname and bfirst like :firstname";
} elseif (!empty($one)) {
$sql.="glast like :lastname or blast like :lastname";
} else {
$sql.="gfirst like :firstname or bfirst like :firstname";
}
$stmt = $conn->prepare($sql);
foreach ($_POST as $key => $value)
{
if (!empty($value)) {
$mod="$value%";
$stmt->bindValue(':'.$key, $mod);
}
}
$stmt->execute();
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
$numrows = $stmt->rowCount();
if ($numrows == 0) {
?>
<html>
<head>
<link href="style_results.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="contact">
<h1>No results were returned from your search.</h1>
</div>
</body>
</html>
<?php
} else {
?>
<!DOCTYPE HTML>
<html>
<head>
<title> Marriage Database Modification </title>
<link href="style_mod.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="/js/modpage.js"></script>
</head>
<body>
<div id="contact">
<table border="2" width="100%">
<tr><td colspan="7"><h1>Marriage Record Modifications</h2></td></tr>
<tr>
<td>
<table border="2" width="100%">
<div id="linkDiv">
<tr><th>Last Name</th><th>First Name</th><th>Last Name</th><th>First Name</th><th>Month</th><th>Day</th><th>Year</th><th>Page</th><th>Source</th><th>Select</th></tr>
<?php for ($x=0;$x < $numrows;$x++) { ?>
<tr><td><?php echo $row[$x]['glast']?></td><td><?php echo $row[$x]['gfirst']?></td><td><?php echo $row[$x]['blast']?></td><td><?php echo $row[$x]['bfirst']?></td><td><?php echo $row[$x]['month']?></td><td><?php echo $row[$x]['day']?></td><td><?php echo $row[$x]['year']?></td><td><?php echo $row[$x]['page']?></td><td><?php echo $row[$x]['id']?></td><td><input type="button" value="select" onclick="showDiv('<?php echo $row[$x]['id']?>');return false"></td></tr> <?php }?>
</div>
</table>
</td>
<td rowspan="6" height="800px" width="1000px">
<?php for ($x=0;$x < $numrows;$x++) { ?>
<div id="divLinks">
<div id="container<?php echo $row[$x]['id']?>" style="display:none">
<table border="2">
<tr>
<td>
<!-- The 4 container content divs. -->
<label><?php echo $row[$x]['id']?></label>
<form method="POST" action="showoutput.php">
<table height="790px" width="990px">
<tr>
<td valign="top"><label>Groom's Last name:</label></td>
<td><input name="glname" type="text" value="<?php echo $row[$x]['glast']?>" placeholder="Last Name of Groom [Required]"/></td>
<td valign="top"><label>Groom's First name:</label></td>
<td><input name="gfname" type="text" value="<?php echo $row[$x]['gfirst']?>" placeholder="First Name of Groom [Required]"/></td>
</tr>
<tr>
<td valign="top"><label>Bride's Last Name:</label></td>
<td><input name="blname" type="text" value="<?php echo $row[$x]['blast']?>" placeholder="Last Name of Bride [Required]"/></td>
<td valign="top"><label>Bride's First Name:</label></td>
<td><input name="bfname" type="text" value="<?php echo $row[$x]['bfirst']?>" placeholder="First Name of Bride [Required]"/></td>
</tr>
<tr>
<td valign="top"><label>Month:</label></td>
<td>
<select name="mon">
<option selected="selected" value="<?php echo $row[$x]['month']?>"><?php echo $row[$x]['month']?></option>
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>
</td>
<td valign="top"><label>Day:</label></td>
<td><input name="da" type="text" value="<?php echo $row[$x]['day']?>"placeholder="Day number here [Required]"/></td>
</tr>
<tr>
<td valign="top"><label>Year:</label></td>
<td><input name="yr" type="text" value="<?php echo $row[$x]['year']?>"placeholder="4 digit year i.e. 1990 [Required]"/></td>
<td valign="top"><label>Page Number:</label></td>
<td><input name="page" type="text" value="<?php echo $row[$x]['page']?>"placeholder="Page Number i.e. 4D [Required]"/></td>
</tr>
<tr>
<td valign="top"><label>Source:</label></td>
<td>
<select name="src">
<option selected="selected" value="<?php echo $row[$x]['source']?>"><?php echo $row[$x]['source']?></option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="mod" value="Modify Record"></td>
<td colspan="2"><input type="submit" name="del" value="Delete Record"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</div>
<?php } ?>
</td>
</tr>
</table>
</div>
</body>
</html>
<?php } ?>
If there is a better way, I am all ears as well. Thanks again. I am sorry if the code didn't format well as this is my first time using these forums. I tried to space modify it and it didn't change in the code block.


Here is a revised vision of your code I did, and an example.
Condensed code using global variable:
JSFIDDLE DEMO
var lastDiv = false;
function showDiv(idInfo) {
var elm = document.getElementById('container'+idInfo);
if ( lastDiv ) {
lastDiv.style.display = 'none';
}
elm.style.display = 'block';
lastDiv = elm;
}
And lastly using a loop like you had before:
JSFIDDLE DEMO
function showDiv(idInfo) {
var elm = document.getElementById('container'+idInfo),
cdiv = document.getElementById("divLinks"),
div = cdiv.getElementsByTagName("div");
for( var i=0; i<div.length; i++ ) {
div[i].style.display = 'none';
}
elm.style.display = 'block';
}
This selects the target to be displayed, then loops through only the div links, making sure they are hidden before displaying the target.

Related

pass all rows selected option values which is determined by user input from php

How can I pass selected option values if it's randomly generate by user?
How can I get the values of each selected option for each rows if I determined the values?
something like this.
Javascript
<script>
function submitForm(action)
{
document.getElementById('columnarForm').action = action;
document.getElementById('columnarForm').submit();
}
</script>
PHP
<form class="form-horizontal" action="" method="post" id="columnarForm">
<!-- some html tag -->
<?php
if ($_SERVER['REQUEST_METHOD'] =='POST' && isset($_POST['addButton1'])) {
$table = $_POST['selectTable'];
if($table == 'company')
{
$num = $_POST['num'];
for($j = 1; $j <= $num; $j++) {
?>
<tr id="row1">
<td align="right"><?php echo $j; ?></td>
<td id="name_row1" width="2px">
<input type="text" id="new_name" name="text<?php echo $j; ?>" value=""></td>
<td id="country_row1">
<select class="selectField" onChange="" id="selectcom" name="selectcom<?php echo $j; ?>">
<option value="">-- Select Field --</option>
<option value="comp_id<?php echo $j; ?>">comp_id</option>
<option value="comp_name<?php echo $j; ?>">comp_name</option>
</select>
</td>
<td><input type="text" name="default" size="10"></td>
<td id="data_row"><div id="new_text<?php echo $j;?>"></div></td>
<td id="size_row"><div id="size_row<?php echo $j;?>"></div></td>
<td>
<input type="button" value="Delete" class="delete btn btn-small btn-info" onclick="delete_row('row1')">
</td>
</tr>
<?php
}
}
?>
<button type="submit" class="btn btn-primary noty" name="next" onclick="submitForm('import.php')">Create Template</button>
How can I give variable at the next page (import.php)?
sorry for my english imperfections

$('#noc').change(function(e) {
$('.child').remove();
id = $(this).val();
for(var i=1; i<id; i++){
var thisRow = $('.dd').last(".dd");
var newid = parseInt(thisRow.attr('divid'))+1;
newRow = thisRow.clone(true).insertAfter(thisRow).find('input').val('').end().
find('.name').each(function(){
$(this).attr('id', 'name-'+newid);
$(this).attr('name','name-'+(newid));
$(this).attr('placeholder','Name '+(newid));
}).end().find('.drop').each(function(){
$(this).attr('id', 'dd-'+newid);
$(this).attr('name','dd-'+(newid));
}).end();
thisRow.next('.dd').attr("divid",newid).addClass("child");
}
});
div{ display: inline-table;}
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><section style="width:40%" align="center">
<form>
<div class="col-md-12"><input type="text" class="form-control" id="noc" /></div>
<div class="dd" divid="1" align="center">
<div class="col-md-6">Field Name</div>
<div class="col-md-6">Column Name</div>
<div class="col-md-6"><input type="text" placeholder="Name 1" class="name form-control" id="name-1" name="name-1" /></div>
<div class="col-md-6">
<select name="dd-1" id="dd-1" class="drop form-control">
<option>value 1</option>
<option>value 2</option>
<option>value 3</option>
<option>value 4</option>
</select>
</div>
</div>
</form>
</section>
Check this code

Getting Submit button before the looped form

I have a form where I need to input data to store. I used a while loop because I need to use same code over 4/5 times. The problem is the submit button is coming before the form. It's working. I checked that. But, I need to place the submit button below the form.
I tried to change it up a few times. It still give me the same output.
How to solve this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../sns/bootstrap.min.css">
<script type="text/javascript" src="../sns/jquery.min.js"></script>
<script type="text/javascript" src="../sns/bootstrap.min.js"></script>
</head>
<body>
<table>
<tr>
<th>Department:</th>
<th>Year:</th>
<th>Course:</th>
<th>Date(dd/mm/yyyy):</th>
<th>Time:</th>
<th>Roll:</th>
</tr>
<form method="post" style="width: auto;">
<?php
$i=0;
while ($i<5) {
echo '<tr id="c1">
<td>
<select name="dept'.$i.'" size="1">
<option value="EEE ">EEE</option>
<option value="CSE ">CSE</option>
<option value="CE ">CE</option>
<option value="ME ">ME</option>
<option value="IPE ">IPE</option>
<option value="GCE ">GCE</option>
<option value="ECE ">ECE</option>
<option value="ETE ">ETE</option>
<option value="MTE ">MTE</option>
<option value="URP ">URP</option>
<option value="Arch ">Architecture</option>
</select>
</td>
<td>
<select name="year'.$i.'" size="1">
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
</select>
</td>
<td>
<input type="text" name="course'.$i.'" size="10">
</td>
<td>
<input type="text" name="date'.$i.'" style="width: auto">
</td>
<td>
<select name="time'.$i.'" size="1">
<option>9:00</option>
<option>10:00</option>
<option>2:00</option>
</select>
</td>
<td>
<input type="text" name="Roll'.$i.'">
</td>
</tr>';
$i++;
}
?>
<input class="btn btn-default" type="Submit" value="Submit">
</form>
</table>
</body>
</html>

You need to put the submit button inside a td as well, I also recommend moving the form fully outside of the table as some browser (webkit/chrome mostly) will add or rearrange elements they think are incomplete:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../sns/bootstrap.min.css">
<script type="text/javascript" src="../sns/jquery.min.js"></script>
<script type="text/javascript" src="../sns/bootstrap.min.js"></script>
</head>
<body>
<form method="post" style="width: auto;">
<table>
<tr>
<th>Department:</th>
<th>Year:</th>
<th>Course:</th>
<th>Date(dd/mm/yyyy):</th>
<th>Time:</th>
<th>Roll:</th>
</tr>
<?php
$i=0;
while ($i<5) {
echo '<tr id="c1">
<td>
<select name="dept'.$i.'" size="1">
<option value="EEE ">EEE</option>
<option value="CSE ">CSE</option>
<option value="CE ">CE</option>
<option value="ME ">ME</option>
<option value="IPE ">IPE</option>
<option value="GCE ">GCE</option>
<option value="ECE ">ECE</option>
<option value="ETE ">ETE</option>
<option value="MTE ">MTE</option>
<option value="URP ">URP</option>
<option value="Arch ">Architecture</option>
</select>
</td>
<td>
<select name="year'.$i.'" size="1">
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
</select>
</td>
<td>
<input type="text" name="course'.$i.'" size="10">
</td>
<td>
<input type="text" name="date'.$i.'" style="width: auto">
</td>
<td>
<select name="time'.$i.'" size="1">
<option>9:00</option>
<option>10:00</option>
<option>2:00</option>
</select>
</td>
<td>
<input type="text" name="Roll'.$i.'">
</td>
</tr>';
$i++;
}
?>
<tr>
<td colspan="6" align="right">
<input class="btn btn-default" type="Submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
Renders:

<form method="post" style="width: auto;" action="">
<table>
<?php
$i = 0;
while ($i <= 5) {
#my form
if($i == 5)
echo '<button class="btn btn-default" type="Submit" style="margin-left: 18%; width: 14%">Submit0</button>';
$i++;
}
?>
<input class="btn btn-default" type="Submit" value="Submit1">
</table>
</form>

How to display the list from database using selected value in drop down

manage_bank
Hi everyone,
Can someone help me, How to display the bank name based on selected drop down, when we choose
for example:- 50 records
then it will display 50 records of the bank name from database.
When we logout the value still remain the same 50 records.
<?php
// Includes the required files
include ("../ecompany/terms_includes.php");
?>
<?php
// Check user authority for this page
$ModuleName = "Manage Banks";
$ModuleAction = "view";
base_checkAuthority($ModuleName,$ModuleAction)
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
include PATH_INC_HEAD;
?>
<?php
//get page number
$page = $_GET["page"];
$record = $_GET["record"];
//get Miscellaneous detail
$MiscellaneousDetail = base_getMiscellaneousDetail();
?>
<?php
if(!isset($page))
{
$page = 1;
}
if(!isset($record))
{
$record = $MiscellaneousDetail['base_mis_default'];
}
//go to reload page
if(isset($_POST['load']))
{
$page = 1;
$record = $_POST['records_per_page'];
}
//go to add profile page
if(isset($_POST['add']))
{
echo '<script type="text/javascript">' . "\n";
echo 'window.location="../ecompany/add_bank.php";';
echo '</script>';
}
//go to home page
if(isset($_POST['cancel']))
{
echo '<script type="text/javascript">' . "\n";
echo 'window.location="../terms_base/home.php";';
echo '</script>';
}
?>
</head>
<body>
<div class="container">
<?php
include PATH_INC_HEADER;
?>
<div class="main_body1">
<div id="update_category"></div>
<div style="width:800px; margin:auto">
<?php
include PATH_INC_DESC;
?>
<div style="clear:both"></div>
<form name="bank_list_form" id="bank_list_form" method="post" action="">
<div style="width:800px; margin:auto; text-align:left">
<select name="records_per_page" id="records_per_page" >
<option value="<?php echo $record; ?>">Default Records/Page :</option>
<option value="1" title="1" >1</option>
<option value="3" title="3" >3</option>
<option value="5" title="5" >5</option>
<option value="10" title="10" >10</option>
<option value="20" title="20" >20</option>
<option value="30" title="30" >30</option>
<option value="50" title="50" >50</option>
<option value="100" title="100" >100</option>
<option value="200" title="200" >200</option>
<option value="500" title="500" >500</option>
<option value="1000" title="1000" >1000</option>
</select>
<input type="" size="4" style="width:25px" name="record"
id="record"value="<?php echo $record; ?>" readonly="readonly" />
<div id="searchbutton">
<input type="submit" id="load" name="load" value="Refresh">
</div>
</div>
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th></th>
<th>Code</th>
<th>Name</th>
<th>Description</th>
<th>Remark</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php ecoy_listBank($page, $record) ?>
</tbody>
<tr>
<td align="center" colspan="8"><input type="submit" id="add"
name="add" value="Add Bank" /><input type="submit" id="cancel"
name="cancel" value="Cancel" /></td>
</tr>
</tfoot>
</table>
</form>
<br />
</div>
<div class="clearboth"></div>
</div>
<?php
include PATH_INC_FOOTER;
?>
</div>
</body>
</html>
Much appreciate, Thanks.

The title of your question is misleading. But if I got it right you actually succeed in querying your data correctly and refreshing the number of records with your refresh button.
You real question is how to persist the default value of the dropdown after a logout.
By mentioning your logout feature I assume you have users and a user table in your database.
From here you have two solutions I can think of:
1. Save the users preferences like the default value of your dropdown within your users table or create a separated table dedicated for this purpose.
2. Store users preferences in cookies

Unable to post tag returned through document.getElementById('div').innerHTML

I am working on this form with several select elements with options Yes, No or Not applicable. It was required that whenever the user select yes option a separate date field appears next to it. I used HTML DOM document.getElementById("id").innerHTML for this date field. Everything went well but I was not able to pass the value of date to the form action page using POST method. Check this code:
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2"> </div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3"> </div></td>
</tr>
</form>
</table>

Demo - Change function credit_check(name) to window.credit_check = function(name)
window.credit_check = function(name){
if(name=='YES') document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
window.employment_check = function (name){
if(name=='YES') document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
You're script wasn't loading properly,
Uncaught ReferenceError: credit_check is not defined in your console shows the error. The functions were not being defined. You can set your functions like above or reposition your code.

Put the inputs into the HTML at loading, then simply hide/show them.
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').style.display = 'block';
else document.getElementById('div2').style.display = 'none';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').style.display = 'block';
else document.getElementById('div3').style.display = 'none';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2" style="display: none;">
Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3" style="display: none;">
Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
</form>
</table>
It's also a good idea to check out jQuery, it makes this kind of stuff a lot easier to do.

Your code is already working. See http://jsfiddle.net/2wg4u6ut/
Make sure your JavaScript is in the head section of your document.
There were some minor issues in your formatting where the <form> tag belongs around the table.
You also were missing the submit button, but then it's already working.

IE showing two div instead of one

I made a button which is showing and hiding div on click by using jQuery. But IE showing another extra div and rest of the browsers showing it properly.
<div class="hide-search-button">
<div class="l-f-w" id="locate">
<h1> Location </h1>
<input type="hidden" value="" id="loc_hidden"/>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><h1>State</h1></td>
<td> <select onChange="selectCity(this.options[this.selectedIndex].value)" name="state_name" id="state_name">
<option value="Choose">Choose</option>
<?php
//connect with database
$sqlCountry="select DISTINCT state from sheet1
order by state asc ";
$resCountry=mysql_query($sqlCountry);
$checkCountry=mysql_num_rows($resCountry);
// fetch all country
while($rowCountry=mysql_fetch_array($resCountry)){
?>
<option value="<?php echo $rowCountry['state']?>">
<?php echo $rowCountry['state']?>
</option>
<?php
}
?>
</select></td>
</tr>
<tr>
<td><h1>Region</h1></td>
<td><select id="region_name" name="region_name"
onchange="selectState(this.options[this.selectedIndex].value)">
<option value="Choose">Choose</option>
</select>
</td>
</tr>
<!--<tr>
<td><h1>Suburb</h1></td>
<td><select id="suburb_name" name="suburb_name">
<option value="Choose">Choose</option>
</select></td>
</tr>-->
<tr>
<td><h1>Pin Code</h1></td>
<td> <input type="text"value=" " name="pin" id="pin"></td>
</tr>
</table>
<input type="hidden" value="2" name="searchform" />
<script>
function span_go()
{
//var locate = document.getElementById("menuSelection").innerHTML;
var service = document.getElementById("sertype").innerHTML;
//document.getElementById("locatetext").value = locate;
document.getElementById("servicetext").value = service;
//alert (service);
}
</script>
<input type="hidden" value="" id="servicetext" name="servicetext"/>
<?php /*?><a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><div class="arrow_wrap"><span class="ui-icon ui-icon-triangle-1-s"></span> </div> <span id="menuSelection"> <?php echo $location ?></span></a><?php */?>
</div> <!-- location field wrapper ends here -->
<div class="service_type_wrap s-t-w">
<h1> Service Type </h1>
<select multiple="multiple" label="choose" style="margin-left:8px;" name="tex_value" id="worktype">
<option value="Long Day Care">Long Day Care</option>
<option value="Occasional Care">Occasional Care</option>
<option value="In Home Care">In Home Care</option>
<option value="Before School Care">Before School Care</option>
<option value="After School Care">After School Care</option>
<option value="Vacation">Vacation Care</option>
<option value="Special Care">Special Care</option>
<option value="Permanent / Contract">Permanent / Contract</option>
<option value="Part time">Part time</option>
</select>
</div> <!-- service type wrapper ends here -->
<div class="f-r-w" style="margin-left:10px;">
<h1> Filter Results </h1>
<select data-placeholder="<?php echo $sorting; ?>" class="chzn-select" style="width:200px;" tabindex="2"name="q_state" id="jobsort">
<option value="title">Sort by job title</option>
<option value="date">Sort by date</option>
</select>
</div> <!-- filter results wrapper ends here -->
<div class="go_button_wrap">
<input name="submit" type="submit" value="Go" id="custum_button" onclick="span_go();">
</div> <!-- go button ends here -->
</form>
</div>
JS:
$(document).ready(function() {
$("#button").toggle(function() {
//$(this).text('Hide Advance Search');
}, function() {
//$(this).text('Show Advance Search');
}).click(function(){
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});
});
Screenshot shown below:

Try to change click part of your code. You need to pass event object into the handler. In IE actually there is window.event object. Maybe it causes the issue:
.click(function(event) {
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});

Categories