|
JavaScript - Onchange Forms Inside A Table
I have a table with an input box inside a table cell. The following code returns the value of the cell when it is not in a table, but returns the name of the cell when inside a table:
PHP Code: <script type="text/javascript"> function statvalue(v) { var abv=document.getElementById('ab'); alert (abv.value) } </script> <table> <tr> <td><input type="text" size="3" name="ab" onChange="statvalue();"></td> </tr> </table> The code as it is returns AB on the alert. If I don't have it in the table, it correctly returns the value of the ab input box. How can I get it to work inside the table? Similar TutorialsMy issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript">
addLoadEvent(function() { function1(1); })
//function1 makes the table rows do something appearance wise.
</script>
<tr>
<td></td>
<td></td>
<td>
<img src="pics/delete.png" alt="Delete" onclick="function2();">
</td>
</tr>
I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. OK, so I have this table I am putting on a new website I am building. The table works great. Does exactly what I want it to do, except for one thing. Here's the code for the table: <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["table"]}); google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Artist'); data.addColumn('string', 'Title'); data.addColumn('string', 'Song #'); data.addRows([ ['Colin Hay', 'Overkill (Men at Work Acoustic)', 'GKK-02'], ['Colin Hay', 'Waiting for My Real Life to Begin', 'GKK-01'], ['Lindsey Buckingham', 'Big Love (Fleetwood Mac Acoustic)', 'GKK-03'] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true}); } </script> </head> <body> <div id="table_div"></div> </body> </html> Now, here's the problem. In the third column, I need to insert a unique hyperlink for each song # in each row. When I try to add a hyperlink, it shows the code instead of a link. I am a coding NOVICE. Everything I know, I have taught myself. The solution to this is escaping me. Please help? Reply With Quote 12-31-2014, 02:11 AM #2 CanYouDigIt View Profile View Forum Posts New Coder Join Date Dec 2014 Posts 14 Thanks 1 Thanked 0 Times in 0 Posts Also.... forum admin.... please edit my typo in the thread title so I don't look like more of an idiot than I actually am. Thanks. Reply With Quote 12-31-2014, 03:37 AM #3 Kharahs View Profile View Forum Posts New to the CF scene Join Date Dec 2014 Posts 2 Thanks 0 Thanked 0 Times in 0 Posts I'm fairly new to javascript (but have quite a bit of experience working with HTML and CSS - also self taught) so I could be misunderstanding, but are you using something along the lines of... Code: <a href="http://etcetc.com">Text you want the hyperlink applied to</a> ...for the hyperlink? Reply With Quote 12-31-2014, 03:39 AM #4 CanYouDigIt View Profile View Forum Posts New Coder Join Date Dec 2014 Posts 14 Thanks 1 Thanked 0 Times in 0 Posts Originally Posted by Kharahs I'm fairly new to javascript (but have quite a bit of experience working with HTML and CSS - also self taught) so I could be misunderstanding, but are you using something along the lines of... Code: <a href="http://etcetc.com">Text you want the hyperlink applied to</a> ...for the hyperlink? Exactly correct. But that code is not functioning inside the javascript for the table. Reply With Quote 12-31-2014, 04:18 AM #5 Kharahs View Profile View Forum Posts New to the CF scene Join Date Dec 2014 Posts 2 Thanks 0 Thanked 0 Times in 0 Posts Create link in an html table with javascript - Stack Overflow - looks like a similar issue? One of the responses may have a clue Reply With Quote 12-31-2014, 04:31 AM #6 low tech View Profile View Forum Posts Regular Coder Join Date Dec 2009 Posts 905 Thanks 177 Thanked 104 Times in 104 Posts Hi I haven't worked with this before but something like this maybe as an example would produce links on song column example link <a href="http://www.example.com/GKK-01">GKK-01</a> PHP Code: <div id="table_div"></div> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["table"]}); google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Artist'); data.addColumn('string', 'Title'); data.addColumn('string', 'Song #'); data.addRows([ ['Colin Hay', 'Overkill (Men at Work Acoustic)', 'GKK-02'], ['Colin Hay', 'Waiting for My Real Life to Begin', 'GKK-01'], ['Lindsey Buckingham', 'Big Love (Fleetwood Mac Acoustic)', 'GKK-03'] ]); var table = new google.visualization.Table(document.getElementById('table_div')); var formatter = new google.visualization.PatternFormat( '<a href="http://www.example.com/{1}">{0}</a>'); // Apply formatter and set the formatted value of the first column. formatter.format(data, [2, 2]); //table.draw(data, {showRowNumber: true}); table.draw(data, {allowHtml: true, showRowNumber: true}); } </script> Forgive me, I come from a ColdFusion background and DOM manipulation is not one of my strongest assets. I am trying to dynamically create (and also delete) a row inside a table, which contains three cells that each have three form elements (a input box, a select drop-down box that is populated by a query to a database, and a textarea). Now all the JavaScript/jQuery examples I've seen for dynamically creating elements are very basic, nothing this complex. Could I get some help?! This is what I'm trying to dynamically create so that the user can add more options but also delete them. Would the jQuery clone() function be a good choice for this? Code: <tr> <td> <input type="text" id="rejectName" /> </td> <td> <select id="divSelectReason"> <option value="" selected="true">Enter Rejection Reason</option> <cfoutput query="queryReasonReturn"> <option>#codeAndReason#</option> </cfoutput> </select> </td> <td> <textarea id="editReason" cols="30"></textarea> </td> </tr> Now when a row is dynamically created I also have to access those values as well, so I would assume using a variable that counts each row created, and appends that iteration to the name of that particular element. I'm using the autofill forms plugin for firefox which can be found he https://addons.mozilla.org/en-US/firefox/addon/4775 I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create. I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum. So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated. Thanks a lot in advance for any further guidance! Note: Here are sample dynamic tags from the plugin: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() Hi folks. I'm working on a calculator and need to use the 'onchange' function. Basically, the user selects the year (id=taxYear) and once the year is select (default is 2008) this year will appear in 2 different lines of the page under 2 seperate ID's(ageYear & totalYear). I've looked at a few example of the function but I'm still not sure how to approach it. At the moment the year changes once I hit the 'calculate' button but the onChange would obviously offer a better alternative with the date changing once 'taxYear' is changed. here is the script; Code: //check the year
var taxYear = document.getElementById('taxYear').options[document.getElementById('taxYear').selectedIndex].value;
document.getElementById('ageYear').innerHTML = taxYear;
document.getElementById('totalYear').innerHTML = taxYear;
Here is the jsp; Code: <tr>
<td align="left" width="203" colspan=""><p> Your Tax Year: </p></td>
<td align="left" >
<s:select name="taxYear" id="taxYear" list="#{'2008':'2008', '2009':'2009'}" theme="simple" />*
</td>
</tr>
<tr>
<td align="left" width="203"><p> Age at December 31st <span id="ageYear"></span></p></td>
<td align="left" colspan="1">
<s:textfield name="age" id="age" theme="simple" cssClass="text" value="30" /> *
<div id="errorage" class="warningmessage" style="display:none">
Please enter your Age to proceed.
</div>
</td>
</tr>
<tr>
<td colspan="2" class="basicboldtext">
<br/>
The total pension contribution you can make for year <span id="totalYear"></span> is €<span id="totalTax2"></span>
<br/>
</td>
</tr>
Appreciate any help on this! I have a onChange value
Code:
var people = [
["Timothy Conner", "1999-Present", "Age: 12", "Male", ""],
["Andrew Conner", "1992-Present", "Age: 19", "Male", ""]
];
var how = "Brothers";
function find()
{
if(document.getElementById("name").value == people [0] [0])
{
document.getElementById("desc").value = people [0] [1] + " " + people [0] [2] + " " + people [0] [3];
}
if(document.getElementById("name").value == people [1] [0])
{
document.getElementById("desc").value = people [1] [1] + " " + people [1] [2] + " " + people [1] [3];
}
document.getElementById("relateb").value = document.getElementById("name").value;
}
Code: Name: <input type="text" id="name" value="" onChange="find()"/> So for it to proses a name you must click out of a box is ther a way to make it instead of when you click out of it, it would immidiatly change? Code: <input type = "text" style ='display:none;' onchange="display_data_from_server(this.value)"/> Value inside that input is cahanged from js. Is there any reason that onchange would not happen ? i mean, it does not. I am trying to create an onChange action that will validate that confirmation checkbox has been checked, and if not, popup an alert message and put the focus on the checkbox input and change the class of the container DIV to "highlight". Here is the form, with the 'onchange' trigger: Code: <form id="checkout" name="my_form" method="post" action="!---SCRIPT_NAME---" onsubmit="return validForm(this);"> <div id="verification" class="aligncenter required"> <input type="checkbox" id="verified" name="verified" value="" /> <label for="verified">YES</label>, the items and quantities shown above are correct.</div> <div class="required"><label for="name">Name:</label><input id="name" name="contactname" type="text" class="L" onchange="" /></div> <div class="required"><label for="company">Company Name:</label><input id="company" name="company" type="text" class="L" /></div> <div class="buttonRow"><input type="submit" name="VERIFY" class="btn red" value="Continue" /></div> </form> And here is my javascript code: Code: function verifyOrder() {
if (document.my_form.verified.checked != "true") {
alert("Please verify the contents of your order");
document.my_form.verified.focus();
getElementById('document.my_form.verification').className='highlight'
return false;
}
}
But this is not working and generates errors in firebug. What am I doing wrong? Thanks!! I'm trying to figure out how to call multiple functions within the same onchange attribute, associated in the same select object. I have a drop-down menu in which I can select MN, WI, and Other. I've worked it now so that when I select MN, a new drop-down menu appears in which I can select one of MN's Counties. I want to be able to do the same with WI and Other, but my code is only calling MN. Here it is: Code: <html>
<head>
<script="text/javascript">
function showMN(select)
{
select.form.MN.value=""; // reset the text box value
document.getElementById("MNBox").style.display =
select.value == "MN" ? "inline" : "none";
}
function showWI(select)
{
select.form.WI.value=""; // reset the text box value
document.getElementById("WIBox").style.display =
select.value == "WI" ? "inline" : "none";
}
function showOther(select)
{
select.form.otherState.value = ""; // reset the text box value
document.getElementById("otherBox").style.display =
select.value == "Other" ? "inline" : "none";
</script>
</head>
<body>
<select name="state" onchange="showMN(this);showWI(this);showOther(this)">
<option value="" selected="selected">Choose...</option>
<option value="MN">MN</option>
<option value="WI">WI</option>
<option value="Other">Other</option>
</select><font color="red">*</font>
<span id="MNBox" style="display:none">
County: <select name="MN">
<option value="" selected="selected">Choose...</option>
<option value="List of MN Counties">List of MN Counties</option> </select><font color="red">*</font>
<span id="WIBox" style="display:none">
County: <select name="WI">
<option value="" selected="selected">Choose...</option>
<option value="List of WI Counties">List of WI Counties</option>
</select><font color="red">*</font>
<span id="otherBox" style="display:none">
<input type="text" name="otherState" placeholder="Enter state here"/><font color="red">*</font> <input type="text" name="otherCounty" placeholder="Enter County here"</span>
</body>
</html>
Am I even close? How can i change this code to do not duplicate the boxes when one option is selected in the same box as before? http://www.plpgolfandturf.com.au/rr/rrboxes_test.php Code: <script type="text/javascript">
function SetHTML2(type) {
//document.getElementById("1").style.display = "none"
//document.getElementById("2").style.display = "none"
//document.getElementById("3").style.display = "none"
//document.getElementById("4").style.display = "none"
//document.getElementById("1.1").style.display = "none"
//document.getElementById("1.2").style.display = "none"
//document.getElementById("1.3").style.display = "none"
//document.getElementById("1.4").style.display = "none"
document.getElementById("2.1").style.display = "none"
document.getElementById("2.2").style.display = "none"
document.getElementById("2.3").style.display = "none"
document.getElementById("2.4").style.display = "none"
document.getElementById("3.1").style.display = "none"
document.getElementById("3.2").style.display = "none"
document.getElementById("3.3").style.display = "none"
document.getElementById("3.4").style.display = "none"
document.getElementById("4.1").style.display = "none"
document.getElementById("4.2").style.display = "none"
document.getElementById("4.3").style.display = "none"
document.getElementById("4.4").style.display = "none"
document.getElementById("1.1.1").style.display = "none"
document.getElementById("1.1.2").style.display = "none"
document.getElementById("1.1.3").style.display = "none"
document.getElementById("1.1.4").style.display = "none"
document.getElementById("1.2.1").style.display = "none"
document.getElementById("1.2.2").style.display = "none"
document.getElementById("1.2.3").style.display = "none"
document.getElementById("1.2.4").style.display = "none"
document.getElementById("1.3.1").style.display = "none"
document.getElementById("1.3.2").style.display = "none"
document.getElementById("1.3.3").style.display = "none"
document.getElementById("1.3.4").style.display = "none"
document.getElementById("1.4.1").style.display = "none"
document.getElementById("1.4.2").style.display = "none"
document.getElementById("1.4.3").style.display = "none"
document.getElementById("1.4.4").style.display = "none"
document.getElementById(type).style.display = ""
}
</script>
<!--Display box -->
<font face="Verdana, Geneva, sans-serif" size="4" color="#FF0000"><br />
Search Parts</font><br />
<br />
<select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1">Beck</option>
<option value="2">BobCat</option>
<option value="3">Briggs</option>
<option value="4">Yazoo</option>
</select>
<span id="1" style="display:none" ><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.1">Beck 1</option>
<option value="1.2">Beck 2</option>
<option value="1.3">Beck 3</option>
<option value="1.4">Beck 4</option>
</select></span>
<span id="2" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="2.1">BobCat 1</option>
<option value="2.2">BobCat 2</option>
<option value="2.3">BobCat 3</option>
<option value="2.4">BobCat 4</option>
</select></span>
<span id="3" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="3.1">Briggs 1</option>
<option value="3.2">Briggs 2</option>
<option value="3.3">Briggs 3</option>
<option value="3.4">Briggs 4</option>
</select></span>
<span id="4" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="4.1">Yazoo 1</option>
<option value="4.2">Yazoo 2</option>
<option value="4.3">Yazoo 3</option>
<option value="4.4">Yazoo 4</option>
</select></span>
<span id="1.1" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.1.1">Beck 1.1</option>
<option value="1.1.2">Beck 1.2</option>
<option value="1.1.3">Beck 1.3</option>
<option value="1.1.4">Beck 1.4</option>
</select></span>
<span id="1.2" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.2.1">Beck 2.1</option>
<option value="1.2.2">Beck 2.2</option>
<option value="1.2.3">Beck 2.3</option>
<option value="1.2.4">Beck 2.4</option>
</select></span>
<span id="1.3" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.3.1">Beck 3.1</option>
<option value="1.3.2">Beck 3.2</option>
<option value="1.3.3">Beck 3.3</option>
<option value="1.3.4">Beck 3.4</option>
</select></span>
<span id="1.4" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.4.1">Beck 4.1</option>
<option value="1.4.2">Beck 4.2</option>
<option value="1.4.3">Beck 4.3</option>
<option value="1.4.4">Beck 4.4</option>
</select></span>
<span id="2.1" style="display:none"> text </span>
<span id="2.2" style="display:none"> text </span>
<span id="2.3" style="display:none"> text </span>
<span id="2.4" style="display:none"> text </span>
<span id="3.1" style="display:none"> text </span>
<span id="3.2" style="display:none"> text </span>
<span id="3.3" style="display:none"> text </span>
<span id="3.4" style="display:none"> text </span>
<span id="4.1" style="display:none"> text </span>
<span id="4.2" style="display:none"> text </span>
<span id="4.3" style="display:none"> text </span>
<span id="4.4" style="display:none"> text </span>
<span id="1.1.1" style="display:none"> text </span>
<span id="1.1.2" style="display:none"> text </span>
<span id="1.1.3" style="display:none"> text </span>
<span id="1.1.4" style="display:none"> text </span>
<span id="1.2.1" style="display:none"> text </span>
<span id="1.2.2" style="display:none"> text </span>
<span id="1.2.3" style="display:none"> text </span>
<span id="1.2.4" style="display:none"> text </span>
<span id="1.3.1" style="display:none"> text </span>
<span id="1.3.2" style="display:none"> text </span>
<span id="1.3.3" style="display:none"> text </span>
<span id="1.3.4" style="display:none"> text </span>
<span id="1.4.1" style="display:none"> text </span>
<span id="1.4.2" style="display:none"> text </span>
<span id="1.4.3" style="display:none"> text </span>
<span id="1.4.4" style="display:none"> text </span>
<br />
<br /><a href="http://www.plpgolfandturf.com.au/rr/rrboxes_test.php"><img src="http://www.plpgolfandturf.com.au/rr/bt2.png" border="0" /></a>
Hi I'm a newbie. Please help me. I'm using Joomla. I've got a dropdown which reads the filename from the database. When the user selects it I want an onchange event to open the pdf. I've been at it for 2 days now. Code: <?php
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("metnet", $con);
$sql="SELECT * FROM newsletter";
$result = mysql_query($sql);
echo "<form method='post'>";
$dropdown = "<select name='sname' onChange='location(this.form.sname)' >";
while($row = mysql_fetch_assoc($result)) {
$dropdown .= "\r\n<option value='{$row['fpath']}'>{$row['fpath']}</option>";
}
$dropdown .= "\r\n</select>";
echo $dropdown;
?>
i keep getting the following error: - there is no attribute "onChange" Code: <select name="type" id="type" onChange="gettype('type');">
<option selected="selected">--Car type--</option>
<option value="1">Bmw</option>
<option value="2">Merc Blinds</option>
<option value="3">Ford</option>
<option value="4">Saab</option>
</select>
Hi everyone. i hope you could help me for my problem. I want to place a value in the option when i change the contenent. ie when i select North America It shoulde be <option value='1'>Canada</option><option value='2'>United States</option> and so on and so fort... Please help. Code: <script type="text/javascript">
//<![CDATA[
// array of possible countries in the same order as they appear in the country selection list
var countryLists = new Array(4)
ccountryLists["empty"] = ["Select a Country"];
countryLists["North America"] = ["Canada", "United States", "Mexico"];
countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"];
countryLists["Asia"] = ["Russia", "China", "Japan"];
countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"];
/* CountryChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function countryChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the countryLists array
cList = countryLists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
</script>
Code: <noscript>This page requires JavaScript be available and enabled to function properly</noscript>
<h1>Dynamic Select Statements</h1>
<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">Select a Continent</option>
<option value="1">North America</option>
<option value="2">South America</option>
<option value="3">Asia</option>
<option value="4">Europe</option>
</select>
<br/>
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
HI, i know very little about javascript, just enough to get me into trouble actually lol. Here is what im working with. I have a custom Instant messenger for members. It uses embed object macromedia as well as javascript to diplay the window and send messages. What i want to do is simply add an onchange that when one person is typing it shows they are typing (ie xxxxx is typing....) My experience is in php and html and i looked thru the script and the javascript functions but im not sure what im looking for exactly. Do i need to have access to the swf or fla file and be able to edit them to do this? I dont see any form inputs or i would know exactly where to put the onchange lol. Im guessing the input is in the swf or fla file not sure how that works. what im guessing is that in the embed or the object tags (ill play with it) i can put something like Code: document.write('test on change\n');
i think i need to wrap that in doc write script type=javascript in quotes so it parses. If i can get that text to show up inside the IM where i want it then i can try to figure out how to set focus on box and recongize onchange and do some testing. I think i might even be able to doc write the onchange command but not sure. Thanks All, If I have the following code: Code: <form name="datatoshow" id="datatoshow"> Want to learn more about the sie? Use the drop down menu:<br /> <select name="thingtoshow" onchange="javascript:showvalues(this.datatoshow);"> <option value="home">Home</option> <option value="help">Help!</option> <option value="refer">Refer a Friend</option> </select> </form> This doesn't do anything on the onchange. The code it's supposed to send to is: Code: function showvalues(selObj){
alert("it gets here");
var valuetoshow;
valuetoshow = "valuetoshow="+selObj.options[selObj.selectedIndex].value;
alert(valuetoshow);
makePOSTRequest('showhome.php', valuetoshow);
}
This is in external js file. For some reason it doesn't send it and the alert never gets triggered. Thanks. I need the code to run a few functions on change, the box is a "date picker" and I unsure how to add my onchange function without breaking the date picker, can anyone help ? Code: p>end date:</p>
<input id='secondDate' type="text" size="25"><a href="javascript:NewCal('secondDate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date" onchange="dateDiff() ;calculate() ;deposit() ;milecharge() ;agecheck()"></a>
Hi there - this seems like it should be an obvious problem - can anyone spot it? I have an object, declared this way: Code: var FK_gid = new picChooser('FK_gid', FK_gidArray);
FK_gid.init();
and a select group like this: Code: <select id = "FK_gid" name = "FK_gid"> <option value="none" selected="true" >None</option> <option value="335" >pics/zoobins.jpg</option> etc. etc. </select> picChooser in construction sets the onchange of the select group like this: Code: this.list = document.getElementById('FK_gid');
this.list.setAttribute("onchange", "FK_gid.displayImage();");
and the object's displayImage(); is like this: Code: this.displayImage = function () {
this.clearImage();
if (this.list.selectedIndex != 0)
{
pic = new Image();
pic.src = this.reformat(this.list.options[this.list.selectedIndex].innerHTML);
img = document.createElement("img");
img.src = pic.src;
this.preview.appendChild(img);
}
}
But whenever I choose something else off the list I get this error message: Code: TypeError: Result of expression 'FK_gid.displayImage' [undefined] is not a function. It's bizarre because when I type FK_gid.displayImage(); into Safari's dynamic console the function works perfectly... Any ideas? Thanks Edd Hi, I am trying to copy the value of one textbox to another using onchange event. For some reason, my code does not work, please let me know where I went wrong. here is my code: Code: <html>
<head>
<script type="text/javascript">
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>
Field1: <input type="text" id="field1"/><br />
Field2: <input type="text" id="field2" onchange="copyText()"/>
</body>
</html>
Thank you. I have an onchange event JS working fine in IE, but not in FF. It's intended to reset an input field to zero when an adjacent drop-down menu value is changed. I've spent a half-hour looking for answers, and nothing has worked. Decided to post here in the hope there is a quick solution I've overlooked. TIA. Code: function resetInput()
{
y = document.getElementById("baseInput");
y.setAttribute("value","0");
}
And the HTML... Code:
<select id="baseMethod" onchange="resetInput()">
<option value="baseGrowth" selected="selected">Annual Growth Rate (%)</option>
<option value="baseTarget">Target Year Projection</option>
</select>
<input type="text" name="baseInput" id="baseInput" value="0" size="14" maxlength="14" /><br />
|
|||||||