0

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
4
Views
6 Years
Discussion Span
Last Post by Amr87
0

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: n/a

0

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

Edited by extemer: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.