Member Avatar for extemer

how to popup submit button while selecting item from the dropdown list. i had completed the task of displaying textfield while selecting item from the dropdown list but unable to figure out how to popup the submit button with textfield while an item is selected from the dropdown list...please help me out ....itried it with all my efforts please quick....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--

function ShowTB(obj,id){
 txt=obj.options[obj.selectedIndex].text;
 if (txt.match('search By')){
  document.getElementById(id).style.visibility='hidden';
 }
 if (txt.match('name')){
  document.getElementById(id).style.visibility='visible';
 }
  if (txt.match('lastname')){
  document.getElementById(id).style.visibility='visible';
 }
if (txt.match('city')){
  document.getElementById(id).style.visibility='visible';
 }

}

//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--

function ShowTB(obj,id){
 txt=obj.options[obj.selectedIndex].text;
 if (txt.match('search By')){
  document.getElementById(id).style.visibility='hidden';
 }
 if (txt.match('name')){
  document.getElementById(id).style.visibility='visible';
 }
  if (txt.match('lastname')){
  document.getElementById(id).style.visibility='visible';
 }
if (txt.match('city')){
  document.getElementById(id).style.visibility='visible';
 }
 
 if (txt.match('search1')){
  document.getElementById(id).style.visibility='visible';
 }

}

//-->
</script>



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

<!--

function validateListBox(){

var listBoxSelection=document.getElementById("type").value;

if(listBoxSelection==0){

alert("Please select a day");

return false;

}

return true;

}



-->

</script>
</head>

<body>
<form action="demo.php" method="post">

<select onchange="ShowTB(this,'fred');" name="type" id="type" >
<option value="" selected>search By</option>
<option value="name">name</option>
<option value="last">lastname</option>
<option value="city">city</option>
</select>
<br>
<input id="fred" style="visibility:hidden;"type="text" name="search" id="search"/ >
<input type="submit" value="submit"/ >


</form>
</body>

</html>
  • 2 Contributors
  • 3 Replies
  • 549 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Amr87
Member Avatar for Amr87

I made you a basic thing using Jquery and hope that is what you want

btw, I made slight modification on your html code and removed the javascript entirley

html

<!DOCTYPE html>
 
<html>
 
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="popup.js"></script>
<style>
div {margin:0; padding:0; overflow:hidden;}
.holder,#popupMSG {display:none;}
#popupMSG {
padding:20px;
width:300px;
height:100px;
border:40px soild #ff0;
background:#000;
border-radius:20px;
}

#popupMSG a {
display:block;
color:#ff0;
}

p {color:#fff;}
</style>
</head>
 
<body>

 
<select  name="type" id="type" >
<option value="" selected>search By</option>
<option value="name">name</option>
<option value="last name">lastname</option>
<option value="city">city</option>
</select>
<br>
<div class='holder'>
<form action="demo.php" method="post">
<input type="text" name="search"  id="search"/ >
<input type="submit" id="submit" name="submit" value="submit"/ >
<a href='#'>Cancel</a>

</form>
 </div>
 

<div id="popupMSG"><p></p></div>
</body>
 
</html>

popup.js

$("document").ready(function (){

$("select#type").change(function(){
var val = $("select#type").val();
if (val == "") {return;}
$("html").append('<div class="body"></div>');
$("div.body").css({position:'absolute',top:0,left:0,width:'100%',height:'100%',backgroundColor:'#000'});
$("div.body").animate({opacity:0.5},'fast');
var windowWidth = document.documentElement.clientWidth;  
var windowHeight = document.documentElement.clientHeight;  
var elemWidth = $("#popupMSG").width();
var elemHeight = $("#popupMSG").height();
$("#popupMSG").css({  zIndex:10,
"position": "absolute",  
"top": windowHeight/2-elemWidth/2,  
"left": windowWidth/2-elemHeight/2  
});

$("#popupMSG").show(400).html($("div.holder").html());
$("#popupMSG form").attr('action','demo.php?type='+val);
$("#popupMSG p").text("Please Enter "+ val );
$("#popupMSG a").click(function() {$("#popupMSG").fadeOut('slow');
$("div.body").fadeOut('slow');
});
});
});


NOTE: now that the select lest is outside the form you don`t know what type of search was choosen by the user and to solve that, I added dynamically parameter to the form action called type (that you can grab in demo.php using $_GET ) which allow you to know which type of search the user choose based on the value selected from the drop down list

if you need further assist , let me know

Edited by Amr87 because: n/a
Member Avatar for extemer

nothing is appearing beside the select list....while i select name or any other item from the select list

Edited by extemer because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.