|
JavaScript - Dependend Autocomplete Boxes
Hi all,
I am trying to create a dependend autocomplete (based on JQuery) box for example: Field 1 has a autocomplete value of America. Field 2 has to fetch based on the value America the availible states like Kansas However if field 1 has the value England i want field 2 to reflect this by offering for example Schotland. I have the following code in place: Code: $(
document).ready(
function() {
var ac_config = {
source: "getcountry.php",
select: function(event, ui){
$("#
field1").val(ui.item.name),
$("#
field1hidden").val(ui.item.id);
},
minLength:3
};
$("#
field1").autocomplete(ac_config);
}
);
The code above will autocomplete the field1 (country's) input field and an hidden id field. Now i want to base the selection of field2 (the states) on the returned value in field1. i have the following code to try and do this (placed inside document.ready function()): Code:
var stateinput = document.getElementById('field1').value
var ac_config2 = {
source: "getstate.php?country=" + stateinput,
select: function(event, ui){
$("#
field2").val(ui.item.name),
$("#
field2hidden").val(ui.item.id);
},
minLength:3
};
$("#
field2").autocomplete(ac_config);
However the selection is not restricted based on the given input. Can anybody tell me what i am doing wrong? Thanx in advance..... Similar TutorialsI would like to use a JavaScript to fill in the total based on the responses given by the user in this form stub:
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" xml:lang="en" lang="en">
<head>
<title>Formstub</title>
</head>
<body>
<form id="theform" id="theform" action="formstub.html" method="post">
<table width="90%" border = "1
" style="margin-left:40px; font-family: helvetica, ariel, sans-serif; font-size: 0.95em; color: #2D8AB9;">
<tr style="height:3em">
<td width="2em"><input type="checkbox" name="skipperReg" id="skipperReg" value="30" /></td>
<td width="12em">Registration Fee</td>
<td width="4em" >$<input type="text" name="skipperFee" id="skipperFee" readonly="readonly" size ="2" value="30" style="text-align:right" /></td>
<td width ="20em"> </td>
</tr>
<tr>
<td ><input type="checkbox" name="guestReg" id="guestReg" value="8" /></td>
<td>Guest Fee</td><td>$<input type="text" name="guestFee" id="guestFee" readonly="readonly" size ="2" value="8" style="text-align:right" /></td>
<td> # Guests <input type="text" name="guestQty" id="guestQty" size="2" /></td>
</tr>
<tr>
<td ><input type="checkbox" value="" name="miscAmt" id="miscAmt" /></td>
<td>Misc</td><td>$<input type="text" name="miscTotal" size ="2" style="text-align:right" /></td>
<td> List details <input type="text" name="miscDetails" size="35" /></td>
</tr>
<tr style="height:2em"><td > </td>
<td>Total</td><td>$<input type="text" id="total" name="total" size ="2" style="text-align:right" ></td>
</tr>
</table>
</form>
</body>
</html>
The script should add the skipperfee to the total if the skipperReg box is checked, multiply the guestFee by the guestQty and add that to the total if the guestReg box is checked, and add the miscTotal to the total if the miscAmt box is checked. So I found this code and I've manipulated it a little bit for what I want. It was designed to autocomplete an input field when countries were typed, but I changed the values to match ingredients or cooking terms, etc. I was wondering if it would be possible through javascript to autcomplete a word after one is already typed in the input field. For instance, if one person types an 'f' into the input field it will suggest 'flour' as an autocomplete, but if the person types 'f' again, it will not perform the same autocomplete function. How would you go about doing that? Thank you! Code: <head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Timothy Groves | http://www.brandspankingnew.net/ */
countries = new Array(
"flour",
"cup",
"tsp.",
"tbsp.",
"lb.",
"pound",
"tablespoon",
"teaspoon",
"sugar",
"olive oil",
"vegetable oil",
"gallon",
"quart",
"qt."
);
var sug = "";
var sug_disp = "";
function getCountry() {
var input = document.forms['address_frm'].country.value;
var len = input.length;
sug_disp = ""; sug = "";
if (input.length) {
// get matching country from array
for (ele in countries)
{
if (countries[ele].substr(0,len).toLowerCase() == input.toLowerCase())
{
sug_disp = input + countries[ele].substr(len);
sug = countries[ele];
break;
}
}
}
document.forms['address_frm'].sug_country.value = sug_disp;
if (!sug.length || input == sug_disp)
document.getElementById('sug_btn').style.display = "none";
else
document.getElementById('sug_btn').style.display = "block";
}
function setCountry() {
document.forms['address_frm'].country.value = sug;
hideSug();
}
function hideSug() {
document.forms['address_frm'].sug_country.value = "";
document.getElementById('sug_btn').style.display = "none";
}
</script>
</head>
<body>
<div style="width: 202px; margin: 100px auto 0 auto;">
<form name="address_frm">
<div></a>
<div style="position: relative; margin: 5px 0 5px 0; height: 30px;">
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 1;">
<input type="text" name="sug_country" style="background-color: #fff; border: 1px solid #999; width: 200px; padding: 2px" disabled />
</div>
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 2;">
<input autocomplete="off" type="text" name="country" style="background: none; color:#000; border: 1px solid #999; width: 200px; padding: 2px" onfocus="getCountry()" onkeyup="getCountry()" />
</div>
<div id="sug_btn" style="position: absolute; top: 2px; right: 5px; z-index: 4; display:none;">
<p onclick="setCountry()" style="cursor:pointer">></p>
</div>
</div>
</form>
</div>
</div>
</body>
How do I fix the problem that autocomplete does not validate, I have heard before that there is a dirty way to do this but did not want to do this before, but now feel i must as my boss wants the site error free ! does anyone know how I do this ? Hello, i have coded this page: http://www.advance2000.net/system/ad...rchasepeso.php click on the "ADD ITEM" button TWICE. now you have created two rows of textboxes. next, enter the letter "M" on the description textbox on the second row. this would then initialize an autocomplete function... you will see two words "memory" and "motherboard" try clicking one of these.. after clicking, i guess you will notice the error in my program. the clicked value (for example "memory") would be sent in the FIRST ROW TEXTBOX instead of the second.... can anyone help me? Here is the Code of the said Dynamic Textbox: Code: <script language ="javascript">
row_no=0;
function addRow(tbl,row){
row_no++;
if (row_no<=200){
if (row_no<=200){
if (row_no>=100){
var textbox = '<input type="text" id="item[]" value='+row_no+' size = "2" maxlength= "99" name="item[]>"';}
if (row_no<100){
var textbox = '<input type="text" id="item[]" value='+row_no+' size = "2" maxlength= "99" name="item[]">';}
var textbox2 = '<input type="text" id="stockcode[]" size = "20" maxlength= "100" name="stockcode[]">';
var textbox3 = '<input type="text" autocomplete="off" id="description" size = "95" maxlength= "100" name="description" onkeyup="lookup(this.value);" onChange="fill();"><div class="suggestionsBox" id="suggestions" style="display: none;"><img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /><div class="suggestionList" id="autoSuggestionsList"></div>';
var textbox4 = '<input type="text" id="qty'+row_no+'" size = "6" maxlength= "100" onChange="Sum()" name="qty[]">';
var textbox5 = '<input type="text" id="price'+row_no+'" size = "15" maxlength= "100" onChange="Sum()" name="price[]">';
var textbox6 = '<input type="text" id="subtotal'+row_no+'" size = "15" maxlength= "101" onChange="Grand()" name="subtotal[]" readonly>';
var tbl = document.getElementById(tbl);
var rowIndex = document.getElementById(row).value;
var newRow = tbl.insertRow(row_no);
var newCell = newRow.insertCell(0);
newCell.innerHTML = textbox;
var newCell = newRow.insertCell(1);
newCell.innerHTML = textbox2;
var newCell = newRow.insertCell(2);
newCell.innerHTML = textbox3;
var newCell = newRow.insertCell(3);
newCell.innerHTML = textbox4;
var newCell = newRow.insertCell(4);
newCell.innerHTML = textbox5;
var newCell = newRow.insertCell(5);
newCell.innerHTML = textbox6;
}
if (row_no>200){
alert ("Too Many Items. Limit of 20.");
}
}
}
</script>
The VAR TEXTBOX 3 would create the said "description textbox" that is also the textbox that calls the "Fill()" and the Lookup() function of the autocomplete HERE, we have the said functions: Code: function lookup(description) {
if(description.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+description+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#description').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
Hi So, I have a working single autocomplete function, but I want to use the same function on different fields.... this is my code: Code:
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<div>
<form>
<script type="text/javascript">
var index = '1';
</script>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
I know the id's are the same in this, but I tried changing them and it still seems to make little difference.. I did wonder if I could add something variable to the id's and pass that in the function call, but could not figure it out.... the above gives me autocomplete on two fields, but will only fill one of them... Any suggestions would be appreciated Hello, I have a problem with autocomplete of jQuery. Here is my code Code: $('input#recipient').autocomplete ({
source: function (request, callback) {
var dataString = {username : request.username};
$.ajax({
url: url.root + 'email/',
data: dataString,
//cache: false,
complete: function(xhr, result) {
if(result != 'success') return;
var response = xhr.responseText;
var usernameList = [];
$(response).filter('li').each (function() {
usernameList.push($(this).text());
)};
callback(usernameList);
}
});
}
});
Can you tell me what's the problem Thank you Hi All, Im a newbie when it comes to Javascript and trying to learn as I go along. I am working on an internal work site. In the site I have a text box and on entering a specific code I want it to open a new page that links to a document that has the same name. ie. if user types red, I want it to find the document red.html in a folder. To make my colleagues job easier, I want the text box to autocomplete. Below is a section of the code I plan to use Code: <script> var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"]; </script> </head> <body> <h2>Autocomplete Textbox Example</h2> <p>Type in a color in lowercase:<br /> <input type="text" value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" /></p> </body> </html>Can anyone help me to modify this to: 1) link the text entered to the document I want opened 2) open this document upon 'enter' pressed If anyone can provide help it will be greatly appreciated. Thanks Glen Hi there Im a relative newbie and am trying to have a searchbar that users can complete, with the text entry being from a pre-defined list. The hope is that a new page will open with the link that relates to the search bar entry. Im using an Autocomplete code but cant work out how to get the link part to work. See below code Code: <html>
<head>
<script src="jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "092 610 343 505 Utilities".split(" ");
$("#example").autocomplete(data);
});
var data = [ {text:'Link A', url:'/page2'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
location.href = item.url;
});
</script>
</head>
<body>
Number: <input id="example" /><p></p>
</body>
</html>
Can someone help me complete this code? For example, how can I change the code so that a text entry of "092" opens "www.google.com" when I hit enter after text entry? Your help with this is greatly appreciated Glen I want to use a database query to grab all of a member's friends from a table in order to add the friend's email address to a form, to ready it for POSTing. I am using the jquery ui, so on my form.php page, I have the script and html: Code: <script>
$(function() {
$( "#friendsearch" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.id + " " + ui.item.value :
"Nothing selected, input was " + this.value );
}
});
});
</script>
<form>...
<input id="friendsearch" />
</form>
And on my search.php I have: Code: //code to connect to database.... etc
$query = "
//this code goes through a table LEFT JOIN to grab a list of the logged-in member's friends' info (id, email, first name, last name)
"
$sql = mysql_query($query);
while($row = mysql_fetch_array($sql)) {
$fid = $row["id"];
$firstname = $row["firstname"];
$lastname = $row["lastname"];
$email = $row["email"];
echo $fid <br /> $f_firstname <br /> $f_lastname <br /> $email <br /> ";
The "echo" above works. It lists out all the info perfectly, so I know my query is good. The problem, I am having, is with what comes next in the search.php: Code: $q = strtolower($_GET["term"]);
// supposed to do something with $q here (not sure what!)
$return = array();
while ($row = mysql_fetch_array($query)) {
array_push($return,array('id'=>$row['firstname'],'value'=>$row['lastname']));
}
echo(json_encode($return));
This is the part that's suppose to work with the jquery autocomplete. I know it's wrong, but I need to know how I can fix it to do the following: 1) when the user starts typing the first name or last name of the friend, auto-complete shows a drop-down list of firstname lastname. 2) once the friends' names are placed in the input box, on submit, i want to POST the friends' email addresses (not their name)! Complex, I know... Any help would be much appreciated! Thanks, June http://auspost.com.au/apps/postcode.html Basically I want to build the same thing. The data is freely available there as a download. I couldn't find anything existing in the jquery plugin space. Can anyone offer pointers on how to achieve it? I have a JQuery autosuggest working properly on my form.php page... Now I want to get my form to actual POST the input values. So currently if I just run search.php, I get the following (using echo json_encode): {"label":"Henry Gale","value":"henrygale@gmail.com"},{"label":"Amy Gerges","value":"amy@yahoo.com"}, and the list goes on. So since the search is working properly. Now, I want to POST only the values that I place in the form's input field. I currently have: Code: <script>
$(document).ready(function() {
$( "#autocomp" ).autoSuggest("search.php", {
minChars: 2,
selectedItemProp: "label",
searchObjProps: "label",
selectedValuesProp: "value",
selectionLimit: 8,
formatList: function(data, elem){
var my_image = data.image ;
var my_label = data.label;
var new_elem = elem.html(my_image + my_label);
return new_elem;
}
});
});
</script>
<input name="contacts" type="text" id="autocomp" maxlength="35" />
But if I do an echo of the $_POST['contacts'] I just get the word: Array I am doing something wrong, just not sure what... Since my input gets a list of comma separated values, how can I: 1) make sure the input values get the "value" attribute which corresponds to the emails. 2) post the emails so I can do things with the emails (run them through format checks, insert them into a mysql db, etc). Here is what I'm envisioning: The user selects a state, then in the 'Cities' box, he starts typing the name of his city. However, it autocompletes the name for him based on the state he chose. So if he chose California and started typing in "Los Angeles", it would autocomplete "Los Angeles" for him. Does that make sense? Is there a script out there that can do this? i have this, Code: $(function() {
$('#input').autocomplete('test.php', {json: true});
});
that bring back values from the database here is my php section Code: $result = mysqli_query($db,$query);
while( $row = mysqli_fetch_array($result) )
{
$aResults[] = array( "id"=>($row['s_id']) ,"value"=>($row['s_last']), "info"=>($row['s_first']) );
}
$return = array();
foreach ($aResults as $key => $res) {
$return[] =$res['value'] . ' , ' . $res['info'];
}
echo json_encode($return);
}
}
}
i would like, when i select a name from the auto suggest to be able to have the id be filled in a input text area... uncle Google says this, but i am having a hard time implementing it. Code: myCallback = function(li, $input) {
// I need to refer to the appropriate "myXxxInput" here
alert($input.attr('id'));
}
setup = function() {
setupInput($('#myFirstInput'));
setupInput($('#mySecondInput'));
}
function setupInput($input) {
$input.autocomplete('blah.php', {onItemSelect: function(li) {
myCallback(li, $input);} });
}
ok i have to selection boxes and they need to read each other and input either a yes or a no into a text form i would really appreciate some help thanks heres what i have if it helps Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Galvanic Corrosion Chart</title> </head> <body> <br /> <form name="gcc"> <div align="center"><a href="website.html"><img style="border: 0px solid ; width: 278px; height: 50px;" alt="" src="pics/LOGO.png" border="0" height="50" width="278" /></a><br /> </div> <p style="text-align: center;" align="center"><font size="+2"><span style="font-family: Century Gothic;"><font style="text-decoration: underline;" size="+3"> <font face="Futura Bk BT">Galvanic Corrosion Chart<span style="text-decoration: underline;"><span style="text-decoration: underline;"><span style="text-decoration: underline;"><span style="text-decoration: underline;"><span style="text-decoration: underline;" /></span></span></span></span></font></font></span></font><font face="Futura Bk BT"><br /> </font> </p> <br /> <table style="text-align: left; margin-left: auto; margin-right: auto;" height="119" width="610"> <tbody> <tr> <td style="vertical-align: top; text-align: center;" align="center" valign="middle"><font face="Futura Bk BT"><font size="+1"> <font size="+1"> Material 1</font></font><br /> <select name="mat1"> <option>Zinc Plating</option> <option>Zinc Die Casting</option> <option>Galvanize</option> <option>Tin-Zinc</option> <option>Cadmium-Zinc Solder</option> <option>Aluminum(Clad.1100.3003.5052.6160)</option> <option>Cadmium Plate</option> <option>Aluminum Castings</option> <option>Carbon & Alloy Steel, Cast Iron</option> <option>Aluminum(2024.2017.7075)</option> <option>Lead</option> <option>Lead-Silver Solder</option> <option>Tin-Lead Solder</option> <option>Tin Plating</option> <option>Chromium Plate</option> <option>Stainless 18/2</option> <option>Copper & Alloys</option> <option>Stainless 18/8</option> <option>Silver Solder</option> <option>Monel</option> <option>Nickel Plate</option> <option>Titanium</option> <option>Silver Plate</option> </select> <br /> </font></td> <td colspan="1" rowspan="1" style="vertical-align: top; text-align: center;" valign="middle"><font face="Futura Bk BT"><font size="+1"> Material 2</font><br /> </font> <select name="mat2"> <option>Zinc Plating</option> <option>Zinc Die Casting</option> <option>Galvanize</option> <option>Tin-Zinc</option> <option>Cadmium-Zinc Solder</option> <option>Aluminum(Clad.1100.3003.5052.6160)</option> <option>Cadmium Plate</option> <option>Aluminum Castings</option> <option>Carbon & Alloy Steel, Cast Iron</option> <option>Aluminum(2024.2017.7075)</option> <option>Lead</option> <option>Lead-Silver Solder</option> <option>Tin-Lead Solder</option> <option>Tin Plating</option> <option>Chromium Plate</option> <option>Stainless 18/2</option> <option>Copper & Alloys</option> <option>Stainless 18/8</option> <option>Silver Solder</option> <option>Monel</option> <option>Nickel Plate</option> <option>Titanium</option> <option>Silver Plate</option> </select> </td> </tr> <tr> <td colspan="2" rowspan="1" align="center" valign="top"><font face="Futura Bk BT" size="+1">Acceptable</font><br /> <font face="Futura Bk BT"><input name="AR" readonly="readonly" /></font></td> </tr> </tbody> </table> </form> </body> </html> Hello, I have a drop down box, which display an images. It is also saved through a cookie on what option you leave it on. Is there a way you can make it so there are several drop downs on the same page that will also display images corresponding to the option chosen? Here's a live example: www.cirula.com/options here is my coding Code: <script language="javascript">
function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="http://www.google.com"
mylinks[1]="http://www.ebay.com"
mylinks[2]="http://www.yahoo.com"
window.location=mylinks[which]
}
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
</script>
</head>
<body onLoad="setDefaultValues()">
<div align="center">
<form name="mygallery">
<p><select name="picture" onChange="showimage(); setCookie(this.name,this.selectedIndex)" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>
<p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="http://www.cirula.com/images/google.png" name="pictures" width="150"
height="150" border=0></a>
Hi Can anyone help with this.... I'm trying to create and object that has text on either side of the flip boxes and when the correct answers are showing (some will need to be flipped and some not). The boxes are disapled and a message appears to say this is correct. I need to work out how to write different text on the other side of each flip box How to differentiate between when the box is flipped and when it isnt (to assign a value) How to disable boxes when all are correct or how to add a subit button so that when users think the boxes are correct they click to check answers So far I have this and now im stuck, its not doing exactly what i want. I'm new to all this and just need a bit of guidance... Code: <style>
.content {
width: 880px;
height:180px;
}
.test {
width:800
height:100
}
.answers{
position:absolute;
width:25px;
height:20px;
left: 200px;
top: 4px;
}
.correct{
background-repeat:no-repeat;
background-image:url(assets/correct-small.png);
z-index:1;
}
.incorrect{
background-repeat:no-repeat;
background-image:url(assets/incorrect-small.png);
z-index:1;
}
.flip {
position:relative;
float:left;
margin-left:3px;
margin-right:3px;
width: 500px;
height: 22px;
padding: 3px;
margin-bottom: 2px;
border: 1px #CCC solid;
background-color: #EFEFEF;
text-align: center;
}
.flip:hover{
cursor: pointer;
background-color: #FFF;
}
</style>
<script language="javascript">
trueCount = 0;
falseCount = 0;
for(i=1;i<=15;i++) {
$("#flipbox" + i).click(function(){
$(this).flip({
direction:'tb',
color: '#EFEFEF',
});
});
}
function addAnswer(div, answer){
if($("#"+div).hasClass("correct")) {
trueCount--;
$("#"+div).removeClass("correct");
}
else {
$("#"+div).addClass("correct");
answersArray[trueCount] = $("#"+div).parent().html().substr(0, $("#"+div).parent().html().indexOf('<'));
trueCount++;
if(trueCount == 2) {
$(".test").fadeOut(1000, function(){
$(this).html("<h3>Correct - </h3>"
).fadeIn(1000);
})
}
}
}
updateBookmark();
</script>
<br /><br />
<div class="content">
<div class="flip" onclick="addAnswer('answer1','c')" id="flipbox1">Reading a book<div class="answers" id="answer1"></div></div>
<div class="flip" onclick="addAnswer('answer2','t')" id="flipbox2">Position their body so that they are facing you <div class="answers" id="answer2"></div></div>
<div class="flip" onclick="addAnswer('answer3','c')" id="flipbox3">Talk<div class="answers" id="answer3"></div></div>
<div class="flip" onclick="addAnswer('answer4','t')" id="flipbox4">Make eye contact<div class="answers" id="answer4"></div></div>
<div class="flip" onclick="addAnswer('answer5','c')" id="flipbox5">Ask questions<div class="answers" id="answer5"></div></div>
</div>
<div class="test"></div>
Ok I know there are a few other posts about this but I can't find one similar to my problem. The confirmation box pops up, but cancel does nothing. it is for deletion of a movie off a server for class, but if you hit cancel it deletes the entry anyway. here is my code: Code: <script type="text/javascript">
function show_confirm()
{
var r=confirm("Are you sure you want to delete?");
if (r==true)
{
window.location="movie_delete.cfm?FilmID=#FilmID#";
}
}
</script>
[<a href="movie_delete.cfm?FilmID=#FilmID#" onclick="show_confirm()">Delete</a>]
notice anything wrong? Ok, this HAS to be some stupid typo I can't find somewhere or something but I don't see where. Basically the alertbox works just fine when only the show_alert() function and the button calling it are in the code. But neither work if only the alert() function and the button calling that are in the code, nor does it work by itself. However I see no differences in how they are coded unless I am missing something very very simple. Code: <html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
function alert()
{
alert("again");
}
</script>
</head>
<body>
<input type="button" onClick="show_alert()" value="Show alert box" />
<input type="button" onClick="alert()" value="CLICK me" />
</body>
</html>
Hi, I've been searching for a good tut on modal boxs for a while where they open in middle of screen like facebook boxs & i want to have one where you use onClick function from href link. example: <a href="#" onclick="'files/delete.php?postId=$post['id']','modal_box'">Delete</a> and so on with other things. Can anyone help. Thanks. |
|||||||