|
JavaScript - Popup Lookup Field
I am trying to create a form field which has a button attached to it which when clicked will open a popup search window used to search for a record which can search by a record id or record data and then when a record is selected it will close the popup window and enter the caption into a locked text field and store the record id in a hidden field. When the form is submitted it should pass the record id to the form handler.
Similar TutorialsI am looking for a simple script or I hope it seems. I need the script to function like this: [text box] insert telephone number here in format like this xxx-xxx-xxxx but once the number is entered I would like for it to auto detect the area code and in a box or just as text to the right or left I would like for it to display the state that the area code corresponds with. I am using a set of predetermined area codes that I can enter myself once I am made aware of the script. IF this is possible then I would greatly appreciate the help! Where can I get a script that looks up IP addresses and domain name just like http://cqcounter.com/whois/ I've seached everywhere without sucess. Thanks in advance. Hey there everybody! I'm learning javascript, and I am having trouble figuring out how to do this. Maybe you guys can help me out. What I need is for my main page to have a text field. Above the text field there should be a set of images for bold, italics, underline, etc; when you click on them it inserts the html code <b></b> at the cursor point. Next I want there to be a link, that when clicked will open a popup box with smileys. When you click on one of the smiley images it should insert the smiley code (example :smile: ) into the parent window text field. And would it be possible to make that work with pages of emotes? Or perhaps a second popup window? I hope I explained that without it sounding confusing. I would really appreciate any help. Here is my basic code, it does not include a popup code however. Code: <html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}
</script>
<body>
<form>
<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<img src="http://i570.photobucket.com/albums/ss141/vwcorrado/Docs_smiley.jpg" onclick="insert(window.lstText,'hello')">
<input type="button" value="hi" onclick="insert(window.lstText,'hi')">
<br />
</form>
</body>
</html>
Hey, I have a location lookup tool that pulls data from a Google Fusion table. User's type their address in and it drops a pin and info window at the place / result that matches their location. It works great with one location, but now I need it to display multiple results / drop multiple pins if they match the criteria Here's the working code that drops one pin (sorry it's a lot): Code: google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
var FusionTableID = 'tableid';
var map = null;
var geocoder = null;
var infowindow = null;
var marker = null;
function initialize() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50) });
// create the map
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(41.9908, -93.4208),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
layer = new google.maps.FusionTablesLayer({
query: {from:FusionTableID},
styles: [{
polygonOptions: {
fillColor:'#000000',
fillOpacity: 0.01,
strokeColor:'#000000',
strokeOpacity: 0.01
}
}],
suppressInfoWindows:true
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(e) {
var content = "<b>"+e.row['name'].value+"</b>";
infowindow.setContent(content);
infowindow.setPosition(locationgeocode);
infowindow.open(map);
});
document.getElementById('submit').onclick = function() {
document.getElementById("submit").value = "Searching";
};
}
function showAddress(address) {
var contentString = address+"<br>Outside Area";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
contentString += "<br>";
// query FT for data
var queryText ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01));";
// document.getElementById('FTQuery').innerHTML = queryText;
queryText = encodeURIComponent(queryText);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(openInfoWindowOnMarker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function openInfoWindowOnMarker(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
var content = "<b>Outside of Iowa</b><!--";
var unionBounds = null;
// alert(numRows);
for (var i=0; i < numRows; i++) {
var county = FTresponse.getDataTable().getValue(i,0);
var precinct = FTresponse.getDataTable().getValue(i,1);
var locationname = FTresponse.getDataTable().getValue(i,2);
var locationaddress = FTresponse.getDataTable().getValue(i,3);
var locationcity = FTresponse.getDataTable().getValue(i,4);
var locationstate = FTresponse.getDataTable().getValue(i,5);
var locationzip = FTresponse.getDataTable().getValue(i,6);
var locationgeocode = FTresponse.getDataTable().getValue(i,7);
// var kml = FTresponse.getDataTable().getValue(i,1);
// create a geoXml3 parser for the click handlers
content = "<b>"+locationname+"</b><br />"+locationaddress+"<br />"+locationcity+locationstate+" "+locationzip+"<br/><a href='http://maps.google.com/maps?daddr="+locationaddress+" "+locationcity+" IA "+locationzip+"' target='_blank' >Click here for Directions</a><br /></br></p><!--";
/*
var geoXml = new geoXML3.parser({
map: map,
zoom: false
});
// alert(kml);
geoXml.parseKmlString("<Placemark>"+kml+"<\/Placemark>");
geoXml.docs[0].gpolygons[0].setMap(null);
if (!unionBounds) unionBounds = geoXml.docs[0].gpolygons[0].bounds;
else unionBounds.union(geoXml.docs[0].gpolygons[0].bounds);
*/
}
// zoom to the bounds
// map.fitBounds(unionBounds);
setTimeout(function() {
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.setContent(content+marker.getPosition().toUrlValue(6));
google.maps.event.trigger(marker, 'click');
document.getElementById("submit").value = "Search";
}, 150);
geocoder.geocode( { 'address': locationaddress+","+locationcity+locationstate+" "+locationzip}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
map.setCenter(point);
map.setZoom(12);
if (marker && marker.setMap) marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: point
});
};
});
}
I basically need it to drop multiple pins if multiple queries match var queryText ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'Hours', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01));"; Any thoughts, fixes, or even a point in the right direction would be incredibly helpful. I'm really stuck on this one and have been trying at it for a couple of days now. Even something like getting it to print a second query that I can mark in the table as a second location would be helpful. Something like a second pin that matches: Code: var queryText2 ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'Hours', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01)); AND locationname = 'Location 2'";
Thanks!! Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) hiiii, im new to javascripts . Can anyone help me to know that a javascript which is validating a phone number accepts only digits but if the text field is left empty it should accept the entry as an empty entry.... plz share knowledge u will be more knowledgeable Hi folks. Looking to see if anyone could tell me where I'm going wrong with this script... I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page. Here is the script: Code: <script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[428]"]').change(function(){
var d = $('input[name="item_meta[428]"]').val();
var n = new Date(d).getDay();
if(n == 0)
val v = 'Sunday';
else if(n == 1)
val v = 'Monday';
else if(n == 2)
val v = 'Tuesday';
else if(n == 3)
val v = 'Wednesday';
else if(n == 4)
val v = 'Thursday';
else if(n == 5)
val v = 'Friday';
else if(n == 6)
val v = 'Saturday';
$('input[name="item_meta[429]"]').val(v).change();
});
});
</script>
I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday". Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday". It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc. Any assistance would be greatly appreciated. Sam. Hey everyone here is my code for looking up a city, and state by zip code. I am getting no errors and i believe it should work, but the code does not seem to want to function. Any ideas? Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>City and State Lookup</title> <style type="text/css"> h1 { font-family:Arial; color:navy; } p, td { font-family:arial; font-size:11px; } </style> <script type="text/javascript"> /* <![CDATA[ */ var httpRequest = false; function getRequestObject() { try { httpRequest = new XMLHttpRequest(); } catch (requestError) { try { httpRequest = new ActiveXObject ("Msxm12.XMLHTTP"); } catch (requestError) { try { httpRequest = new ActiveXObject ("Microsoft.XMLHTTP"); } catch (requestError) { window.alert("Your browser does not support AJAX!"); return false; } } } return httpRequest; } function updateCityState() { if (!httpRequest) httpRequest = getRequestObject(); httpRequest.abort(); httpRequest.open("get","zip.xml"); httpRequest.send(null); httpRequest.onreadystatechange=getZipInfo; } function getZipInfo() { if (httpRequest.readyState==4 && httpRequest.status == 200) { var zips = httpRequest.responseXML; var locations = zips.getElementsByTagName("Row"); var notFound = true; for (var i=0; i<locations.length; ++i) { if (document.forms[0].zip.value == zips.getElementsByTagName( "ZIP_Code")[i].childNodes[o].nodeValue) { document.forms[0].city.value = zips.getElementsByTagname( "City") [i].childNodes[0].nodeValue; document.forms[0].state.value = zips.getElementByTagName( "State_Abbreviation")[i].childNodes[0].nodeValue; notFound = flase; break; } } if (notFound) { window.alert("Invalid ZIP code!"); document.forms[0].city.value = ""; document.forms[0].state.value = ""; } } } /* ]]> */ </script> </head> <body> <h1>City and State Lookup </h1> <form action=""> <p>Zip code <input type="text" size="5" name="zip" id="zip" onblur="updateCityState()" /></p> <p>City <input type="text" name="city" /> State <input type="text" size="2" name="state" /></p> </form> </body> </html> I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help I have two drop down fields. When I select any value in the first drop down i want the second dropdown to automatically populate the value related to the first one. For e.g i have the first field as name and the second field as measured in. If I select 'Potato' in the first dropdown then the second drop down should populate 'kg'. Please help.
Hi Experts, I have designed an online registration system for a non profit in ASP/SQL. After the members register for classes they are automatically redirected to an invoice page with class fees. At the bottom of the page I have a Total Fees field of all the classes. The member is supposed to pay this amount to our organization. Question: We decided to do an online payment this year and would like to calculate a 2% additional amount on the Total Fees. This amount is paid to the Payment Merchant site. We cannot afford to lose the 2% since we are a non profit. Would really appreciate if someone can tell me how to 1) Add a new field under the Total field 2) And calculate the 2% additional fees and do a Grand Total. Thanks in advance. Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hello, I'd like to make sure that a field is a field: Code: if ( typeof( myField ) != "field" ) {
}
This doesn't work, and I can't seem to find the answer. I can know if a field is a checkbox, for example, but I don't how to find the broader category of "input field". Hi All, My boss asked me to create an Adobe form and I'm unsure how to code it to accomplish what he is asking. I'm working with an Adobe form that has required fields. FieldA is not required but if FieldA is filled in, FieldB would then become required. What would be the ideal way to code this? Thank you I found this popup window, and it works for my project, now i would like to include a close option to the popup window. Either "close", a button, or click aywhere. Here is the coding I am currently using: <script type="text/javascript"> function openWin(image, w, h){ var wh='width='+w+',height='+h var tmpPage=window.open('','',wh) tmpPage.document.write('<body style="margin:0;padding:0;"><img src="'+image+'" width="'+w+'" height="'+h+'">') tmpPage.document.close() } </script> <a href="1379_files/image296.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image296.jpg" width="348" height="261" border="0"></a> <a href="1379_files/image298.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image298.jpg" width="348" height="261" border="0"></a> <p> <a href="1379_files/image300.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image300.jpg" width="348" height="261" border="0"></a> This opens 3 pictures, that when clicked opens the popup of the same picture, only full screen. I am trying to have a photo gallery where you click on a thumbnail and it automatically changes the larger image in the cell next to it. That function is working. I am now trying to add a popup feature on the larger image that will pull an additional image and I cant seem to get it to work. In addition the text that appears under the large image is the same text no matter which image you click on. Please tell me what is wrong with my code...Thank you this is in the header function changeImage(filename,filename2,txt){ document.getElementById('mainimage').src=filename; document.getElementById('image2').src=filename2; document.getElementById('ImgTxt').innerHTML=txt; } function popUp(popupimage) { newwindow=window.open(popupimage,"name","height=500,width=500"); if (window.focus) {newwindow.focus()} return false; } This is in the body tag <table width="750" border="0" align="center" cellpadding="2" cellspacing="0"><tr bgcolor="#000000"><td valign="top" align="left" width="200" style="padding-top:20px"><img src="images/mini/bobov_reb_shloime_mini.jpg" alt="" class="thumb" onclick="changeImage('images/bobov_reb_shloime.jpg','images/originals/bobov_reb_shloime.jpg','Bobover Rebbe')" /><img src="images/mini/reb_svei_mini.jpg" alt="" class="thumb" onclick="changeImage('images/reb_svei.jpg','images/originals/reb_svei_mini.jpg','Reb Svei with Talmidim')" /><img src="images/mini/rogotchover_mini.jpg" alt="" width="63" class="thumb" onclick="changeImage('images/rogotchover.jpg','images/originals/rogotchover.jpg','Rogotchover')" /></td> <td align="center" valign="top" width="500" height="600" bgcolor="#000000" style="padding-top:20px;"><p><img src="images/bobov_reb_shloime.jpg" name="mainimage" width="424" border="0" id="mainimage" onClick="popUp(this.src)" /><br /><p> <span id="ImgTxt" class="text">Bobov Rebbe</span> </p></td></tr></table> Okay, first it should be noted I am a complete, 100% neophyte with javascript. I know HTML code pretty well, and I can do quite a bit of PHP as well, but it is all self-taught, so I am hardly an expert... and as I said, java is like French to me. I have a very simple website I've built, nothing complicated or dynamic - but we want to add one feature to this website which I have to say I am at a complete loss about. Basically, I want to have the main page of this website to have a popup form that somebody can plug in their name, email and zipcode load the first time somebody loads the page (which would obviously dump into a database or something), and then the next time the person goes to that page, that popup does not come up again. In other words, I want the feature to behave exactly like this: http://gopleader.gov/ Grey out the background, popup form, place a cookie so that in the future the popup doesn't load again, and that is it. I honestly am no kidding when I say I don't know javascript at all... so I would appreciate somebody helping me out with that in mind (in other words, don't just assume I know where I need to input my own custom values). Does anyone have any ideas here? Is there a way to make a popup appear behind the current window?
Hey everyone, I have a javascript problem which I think can be resolved by adding a few lines of code. I will try to explain my situation: Code: <img title='gameplay0001' class='popuplink' src="img/visual/gameplay/visual-gameplay-10.png"/>\
<span class='popup'>
<span>gameplay0001</span>
<img src="img/visual/gameplay/visual-gameplay-10_large.png" />
<div class='clear'></div>
<div class='popupclosebtn'>back</div>
</span>
this javascript I wrote, allows me to do this: 1) I click on the element with class .popuplink 2) The span with the class popup that contains a span whose text equals the title of popuplink (in this case gameplay0001) appears 3) when I click popupclosebtn the popup closes this is all done by the next javascript: Code: $('.popuplink').each(function() {
$(this).click(function() {
var source = $(this).attr('title');
var popupContent = $(".popup:contains('" + source + "')");
var popupContainer = $("#popcontainerbase");
popupContainer.html('');
popupContainer.html(popupContent.html());
$("#popcontainerbase").fadeIn(200, function() {
$('.popupclosebtn').click(function() {
var popupContainer = $("#popcontainerbase");
popupContainer.html('');
$('#popcontainerbase').fadeOut(200, function() {
});
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
var popupContainer = $("#popcontainerbase");
popupContainer.html('');
$('#popcontainerbase').fadeOut(200, function() {
});
}
});
});
});
});
Oh by the way, I put all the .popup content in a div called #popupcontainer, so my content won't affect my relative container div. So, this works perfect, text and images can be placed in the span .popup; no proplems. Additionally, I also have a jwplayer in my website. This works fine as well. With one exception: When I try to put a jwplayer video into a .popup window, IE fails to put the video in there. it just ignores it. My video popup page: Code: <img title='trailer01' class='popuplink' src="img/visual/trailer01.png"/>
<span class='popup'>
<span>trailer01</span>
<div id="trailer01">
</div>
<div class='clear'></div>
<div class='popupclosebtn'>back</div>
</span>
The javascript source on the bottom of the page: Code: jwplayer("trailer01").setup({
controlbar:"over",
"controlbar.idlehide": false,
controlbar:"bottom",
autostart: true,
flashplayer: "jwplayer/player.swf",
skin: "jwplayer/skins/glow.zip",
wmode: "transparent",
file: "video/trailer01.mp4",
width: 490,
height: 340
});
so, that is my situation. This script will not work in internet explorer. Can anyone tell me how to fix this? thanx in forward I am having a heck of a time closing this popup window when i logoff the site. i open it by Code:
shoutwindow = window.open("<?=$MY_LINK_ROOT?>/shoutbox/minichat.php", "shoutwindow", "location=0,status=0,scrollbars=0,menubar=0,resizable=0 width=300,height=310");
when i click logoff the site i want the popup to close also here is the logoff php Code:
session_start();
//only for testing will remove this
if(!shoutwindow.closed)
{
echo "window open";
self.close();
//shoutwindow.close (); // also tried both these didnt work
// window.close();
}
else
{
echo "Window already closed";
}
mysql_close($link);
unset($_SESSION['Sess_UserId']);
// Unset all of the session variables.
session_unset();
// Finally, destroy the session.
session_destroy();
echo "<script> location.href='$MY_LINK_ROOT'</script>";
exit;
?>
what am i missing here lol ? thanks UPDATE: i just had an idea, can i mix a href and an onClick together so that both are executed like this (i never tried it before) Code: the reason i use self.close is because i heard that it always closes the child not the parent. <a href="logoff.php" onClick="self.close()" return:true;>Log Off</a> the return true will make it execute the href as well right? |
|||||||