|
JavaScript - Getelementbyid( Use Variable Here? )
Hi there,
So I got this problem, and can't seem to figure it out myself. I'm using JS ( no framework ). And that's the whole point of this script, so don't tell me to use one :P Code: var i=1;
var x=10; // Number of extraContent linked with extraContainers
for (i=1;i<=x;i++)
{
var content = "extraContent" +i;
var container = "extraContainer" +i;
document.getElementById(container).appendChild(document.getElementById(content));
}
The problem here, that the container/content, in the getElementById will not return: extraContainer1/extraContent1 Any suggestions :) ~J Similar TutorialsHi, I asked this question in an earlier post where Dormilich asked me to post the code, which I did twice but for some reason it hasn't posted so I'll try with a new thread.... I am passing a variable to a function in a separate .js file using embedded HTML. I want to use the parameter in a getElementById but I can't get it to work. Here's my HTML: Code: <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
window.onload = function ()
{
initSlideDownMenu("accordionactivity");
}
//-->
</SCRIPT>
Here's my javascript function. When the first alert pops up I get 'accordionactivity', when the second one pops up I get '[object]' but when the third one pops up I get 'null'.The rest of the function then doesn't work properly either: Code: function initSlideDownMenu(slMenuName)
{
alert(slMenuName);
alert(document.getElementById('accordionactivity'));
alert(document.getElementById(slMenuName));
dhtmlgoodies_slmenuObj = document.getElementById(slMenuName);
dhtmlgoodies_slmenuObj.style.visibility='visible';
var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
mainItemCounter = 1;
while(mainMenuItem){
if(mainMenuItem.tagName=='LI'){
var aTag = mainMenuItem.getElementsByTagName('A')[0];
var subUl = mainMenuItem.getElementsByTagName('UL');
if(subUl.length>0){
mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
initSubItems(subUl[0],2);
aTag.onclick = showSubMenu;
mainItemCounter++;
}
}
mainMenuItem = mainMenuItem.nextSibling;
}
if(location.search.indexOf('mainMenuItemToSlide')>=0){
var items = location.search.split('&');
for(var no=0;no<items.length;no++){
if(items[no].indexOf('mainMenuItemToSlide')>=0){
values = items[no].split('=');
showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
initMenuIdToExpand = false;
}
}
}else if(expandFirstItemAutomatically>0){
if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
initMenuIdToExpand = false;
}
}
if(expandMenuItemByUrl)
{
var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
for(var no=0;no<aTags.length;no++){
var hrefToCheckOn = aTags[no].href;
if(location.href.indexOf(hrefToCheckOn)==0 && (location.href.length==hrefToCheckOn.length ||
location.href.indexOf('?')==hrefToCheckOn.length)){
initMenuIdToExpand = false;
var obj = aTags[no].parentNode;
while(obj && obj.id!=slMenuName){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
break;
}
}
}
if(initMenuIdToExpand)
{
objectsToExpand = new Array();
var obj = document.getElementById(initMenuIdToExpand)
while(obj && obj.id!=slMenuName){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
}
}
Can you help me figure out what I'm doing wrong? Thank you! Hi, quick question: Code: function x() {
document.getElementById('myid').width += 200;
}
This works for "myid", but my document contains "myid1", "myid2", "myid3", and so forth. How can I alter the script to effect every instance of "myid" followed by a number? Here is my code Code: function copy_grid(from,to)
{
var copy_from = from +"_24_product_cost"; // in this instance from = grid1_White
var copy_to = to;
var tmp_field = getElementById(copy_from).value; // ERROR: getElementById is not defined
}
document.product.grid1_White_24_product_cost.value // works as expected but I wanted this to be dynamic. Any ideas? So I was wondering instead of calling document.getElementById('theTest').innerHTML; multiple times is it possible to store this as a variable and then access this later? If I want to change it though Have to go document.getElementById('theTest').innerHTML = something: right? Is it even worth it to do something like this or is document.getElementById('theTest').innerHTML fast enough? Thanks. I am trying to pass a value to a function autosuggest() f and i but i get the error... Message: Syntax error Line: 21 Char: 29 Code: 0 ajax_autocomplete2/ajax_search_for_airport_framework.js line 21 being q = ..... how do i correctly pass a value to the function and use it in the function to get the value of an element. Code: function autosuggest(f,i) {
q = document.getElementById(f).value;
....
}
Hello again, I seem to be having trouble with my string variable in innerHTML.. here's my code: Code: function header() { // Navigation Bar
110 var o = document.getElementById("header");
111 var s = '<h3 style="float:left;">'
112 + ' '
113 + '<a href="http://mattondo.com" class="link">MattOndo.Com</a></h3>'
114 + '<div style="float:right;">'
115 + '<div class="navbar">'
116 + '<a href="index.htm" class="nav" id="home">home</a>' //to homepage
117 + '<a href="about.htm" class="nav" id="about">about</a>' // to about page
118 + '<a href="construction.htm" class="nav" id="blog">blog</a>' // to blog page
119 + '<a href="contact.htm" class="nav" id="contact">contact</a>' // to contact page
120 + '</div>'
121 + '</div>';
122 o.innerHTML = s;
every time I run this using firebug, it says I have one error. That on line 122 variable o is null. And when I go through the code using firebug line by line, it gets to thevar o = document.getElementById("header"); and stores nothing in o, making it null. What could be my issue here?? Hey all! Got a question I can't seem to find an answer to. I have a little JS app that is a glorified calculator which I posted the code for below. My code uses the document object to replace the html in the "content" <div> and works great. However, I want to add an inline style in order to change the background of the input (readonly field with an id of "coutput") based on either of the global variables named "MJPD" or "IJPD", (depending on the switch case selected in the user prompt at the beginning of the script.) Simplified....if the value of MJPD is less than 4.6, I want the "coutput" field's background to be red, else be green. The same goes for IJPD, except the threshold for red will be <3.83. Code and what I have tried is below. After reading the code, look below it to see what I have tried and maybe tell me what I'm doing wrong! =) Any help is greatly appreciated.......I have spent a week searching for this little answer and I can't seem to find it! Code:
<script language="JavaScript">
var MJPD = 1;
var IJPD = 1;
function sayhello(){ // *** live test for inline JS code placement
alert("IT WORKS!!! Now change me =)");
}
//////////////////////////////////////////////////////
function changeScreenSize(w,h)
{
window.resizeTo( w,h )
}
///////////////////////////////////////////////////
function iJPDCalc(form) //calculate IJPD value
{
var ij = parseFloat(form.IJobs.value, 10);
var it = parseFloat(form.ITime.value, 10);
var IJPD = 0;
IJPD = (ij / it) * 8.0;
form.I_JPD.value = IJPD;
}
/////////////////////////////////////////////////////
function mJPDCalc(form) //calculate MJPD value
{
var mj = parseFloat(form.MJobs.value, 10);
var mt = parseFloat(form.MTime.value, 10);
var MJPD = 0;
MJPD = (mj / mt) * 8.0;
form.M_JPD.value = MJPD;
}
/////////////////////////////////////////////////////
function ijpdcolor() //set bg color of coutput based on IJPD's value
{
if (IJPD >= 3.83) {
return ("green");
}
else {
return ("red");
}
}
/////////////////////////////////////////////////////
function mjpdcolor() //set bg color of coutput based on MJPD's value
{
if (MJPD >= 4.6) {
return ("green");
}
else {
return ("red");
}
}
/////////////////////////////////////////////////////
function startVZT3(){
var n=0;
n=prompt("What would you like to do? 1: Calculate IJPD 2: Calculate MJPD 3: Exit", "Enter a value from 1-3")
switch(n)
{
case(n="1"):
document.getElementById("content").innerHTML='<FORM><h2>Combined IJPD Calculator</h2><p>Install components completed today:</p><INPUT NAME="IJobs" VALUE="3.84" MAXLENGTH="10" SIZE=10><p>Hours taken to the jobs:</p><INPUT NAME="ITime" VALUE="8" MAXLENGTH="10" SIZE=10><h4> Click the button to calculate your IJPD:</h4><INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON class="cbutton" onClick=iJPDCalc(this.form)><p>Your current combined IJPD for today is:</p> <INPUT NAME="I_JPD" class="output" style=" " id="coutput" READONLY SIZE=10></FORM>';
break
case(n="2"):
document.getElementById("content").innerHTML='<FORM><h2>Combined MJPD Calculator</h2><p>Trouble components completed today:</p><INPUT NAME="MJobs" VALUE="4.6" MAXLENGTH="10" SIZE=10><p>Hours taken to the jobs:</p><INPUT NAME="MTime" VALUE="8" MAXLENGTH="10" SIZE=10><h4> Click the button to calculate your MJPD:</h4><INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON class="cbutton" onClick=mJPDCalc(this.form); mjpdcolor();><p>Your current combined MJPD for today is:</p> <INPUT NAME="M_JPD" class="output" style=" " id="coutput" READONLY SIZE=10></FORM>';
break
case(n="3"):
alert('This page will now close...');
window.close();
break
default:
document.getElementById("content").innerHTML='<h1 style="padding-top: 40px; color: red;">You need to enter a value! Please try again...</h1>';
break
}
}
///////////////////////////////////////////////////////
</script>
</head>
<body onload="changeScreenSize(825,775)">
<div id="wrapper">
<div id="sub_wrapper">
<br />
<br />
<input type="button" class="button" onclick="startVZT3()" value="Start VZT3 Web!" />
<br /><br />
<div id="content">
<h3 style="padding-top:60px;">VZT3</h3>
</div>
</div>
<script type="text/javascript"> <!-- trying script to ensure function and dynamic update of this value - doesnt work 2/3/2010 -->
document.write(mjpdcolor());
</script>
</div>
</body>
OK, so on the last line of each case statement where it injects html code into the content div, in this code style=" background: ** ** " and in between the ** ** marks, I have added such things as <script type="text/javascript">document.write(mjpdcolor())</script> (or ijpdcolor, depending on which case I am working with). Theoretically, this should pull the value of MJPD (or IJPD), evaluate it for the if statement, then return the value of red or green and set the value of the background dynamically - but of course it doesnt. I have also tried different inline styles and even adding the css id and trying to link it to the mjpdcolor() function, but all to no avail. Can someone help me please?? Thanks everyone, your awesome! Hopefully some of you guys can help. I'm self taught in Javascript so only know little bits here and there (and don't even know if the thread title is labelled right for what I'm doing!) so help would be greatly appreciated. I'm trying to create 4 buttons on a page (buttons shown by "click here to view c1, c2" etc.) however after I've clicked one button and the content is showing below, the content from the next button clicked does not show (almost as if it is hidden underneath). I'm looking for a way of showing the content when the button is clicked, but hiding it once another button is clicked so other content is shown. Hopefully this is clear enough. All help, tips or advice will be appreciated. Thankyou. Code: <script type="text/javascript" language="JavaScript"><!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
}
else {
document.getElementById(tid).style.display = "none";
}
}
//--></script>
<table width="100%" cellspacing="4" cellpadding="4" border="0" align="center">
<tbody>
<tr>
<td width="25%"><a href="javascript:InsertContent('c1');"> Click to see C1</a></td>
<td width="25%"><a href="javascript:InsertContent('c2');"> Click to see C2</a></td>
<td width="25%"><a href="javascript:InsertContent('c3');"> Click to see C3</a></td>
<td width="25%"><a href="javascript:InsertContent('c4');"> Click to see C4</a></td>
</tr>
</tbody>
</table>
<hr />
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c1">CONTENT C1
</div>
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c2">CONTENT C2
</div>
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c3">CONTENT C3
</div>
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c4">CONTENT C3
</div>
hi, In my code below, I cannot get the setting_id value as it falls outside of the loop. I have just tried to put in the getElementById function but it's not working?! I get the error: missing ) after formal parameters JavaScript from this: Code: function confirmqualification(ID) {
to this: Code: function confirmqualification(document.getElementById('setting_id')) {
HTML from this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification('<?php echo $row1['setting_id']?>')" />
to this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification()" /> Hello smart people... perhaps someone can figure this one out. I hope it's not a PHP question. I have a form and need to populate FIELD2 with the result of FIELD1. Field one is a dynamic list from a database, where the value is an ID#, but the list shows the name. I want to populat FIELD2 with the name that is chosen, not the id (I can't get anything to work) Here is the code from the 2 fields: FIELD 1: Code: <select name = "" realname = "{#role#}" required="1" exclude = "-1" id = "roleselect">
<option value="-1" selected="selected">Choose</option>
<option value = "{$roles[role].ID}" id="role{$roles[role].ID}">{$roles[role].name}</option>
FIELD 2: Code: <input type="hidden" name="rolename" id="rolename" required="0" realname="rolename" /> Here is the javascript I tried to populate field 2 with the selected option of field 2: Code: function updaterole(){
document.getElementById("rolename").value =document.getElementById("role").value;
I tried using name instead of value for field 1, but that didn't work either. The db just shows empty. thanks for any help! hi quick question, i have 640 hidden html inputs like this but with different names. <input type="hidden" name="b1r1c1" value"some value"> now i want to use document.getElementById('b1r1c1).value = "whatever"; will that work eventhough there is no id on my hidden value. it will be in a hta by the way. thanks i am trying to pass the Id of a text field so I can validate it. At this point all I want to do is enter some text into the text field and then send that content to an alert box. I think my code should work but I get an alert box that says: "undefined". HELP! Code: <html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function verify_score(val1)
{
var temp = document.getElementById(val1)
alert(temp.value)
}
</script>
</head>
<body>
<div id="PageDiv" style="position:relative; min-height:100%; margin:auto; width:200px">
<form name="scoresheetform" action="">
<div id="Submitbutton" style="position:absolute; left:52px; top:87px; width:110px; height:33px; z-index:1">
<input type=submit name="Submitbutton" value="Submit Form" onClick="verify_score()"></div>
<div id="HomePlayer1Rnd6Pnts" style="position:absolute; left:9.822px; top:37px; width:45px; height:29px; z-index:2">
<input name="HomePlayer1Rnd6Pnts" onBlur="verify_score('HomePlayer1Rnd6Pnts')" size=3></div>
<div id="HomePlayer1Rnd7Pnts" style="position:absolute; left:79.822px; top:37px; width:45px; height:29px; z-index:3">
<input name="HomePlayer1Rnd7Pnts" onBlur="verify_score('HomePlayer1Rnd7Pnts')" size=3></div>
<div id="HomePlayer1TotalPnts" style="position:absolute; left:146px; top:37px; width:45px; height:29px; z-index:4">
<input name="HP1 Total Points" size=3></div>
</form>
</div>
</body>
</html>
hi, on my site he http://www.mypubspace.com/default.php I am requesting the rsCounty by Ajax, I am then trying to do the same to the page number value using getElementByID, and building up the querystring, but it's not working properly, on my countypubs.php page which is what I an requesting to get the counties I have added the function again to try and get the PAGE Code: <script language="javascript" type="text/javascript">
function countyFunction(){
var countyRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
countyRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
countyRequest.onreadystatechange = function(){
if(countyRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = countyRequest.responseText;
}
}
var name = document.getElementById('name').value;
//var rsCounty = document.getElementById('rsCounty').value;
var page = document.getElementById('page').value;
var queryString = "?name=" + name + "&rsCounty=" + rsCounty + "&page=" + page;
//Add the following line
countyRequest.open("GET", "http://www.mypubspace.com/countypubs.php" + queryString, true);
countyRequest.send(null);
}
</script>
<?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
if ($msg <>"")
{
echo "<div class=\"ui-widget\">
<div style=\"padding: 0pt 0.7em;\" class=\"ui-state-error ui-corner-all\">
<p style=\"padding-top:18px;\"><span style=\"float: left; margin-right: 0.3em;\" class=\"ui-icon ui-icon-alert\"></span>
<strong>Alert:</strong> $msg</p>
</div>
</div>";
}
$county = $_GET["rsCounty"];
echo $county .'<br />';
$tableName="pubs";
$targetpage = "default.php";
$limit = 20;
$query = "SELECT COUNT(*) as num FROM $tableName WHERE rsCounty = '$county'";
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages['num'];
$stages = 3;
$page = mysql_escape_string($_REQUEST['page']);
if( isset($_REQUEST['page']) && ctype_digit($_REQUEST['page']) ) {
$page = (int) $_GET['page'];
$start = ($page - 1) * $limit;
}else{
$start = 0;
}
// Get page data
$query1 = "SELECT * FROM $tableName WHERE rsCounty = '$county' ORDER BY rsPubName Asc LIMIT $start, $limit";
$result = mysql_query($query1);
// Initial page num setup
if ($page == 0){$page = 1;}
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$LastPagem1 = $lastpage - 1;
$paginate = '';
if($lastpage > 1)
{
$paginate .= "<span class='paginate'>";
// Previous
if ($page > 1){
$paginate.= "<a onClick='countyFunction();' id='page' value='$prev'>previous</a>";
}else{
$paginate.= "<span class='disabled'>previous</span>"; }
// Pages
if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a onClick='countyFunction();' id='page' value='$counter'>$counter</a>";}
}
}
elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
{
// Beginning only hide later pages
if($page < 1 + ($stages * 2))
{
for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// Middle hide some front and some back
elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// End only hide early pages
else
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
}
// Next
if ($page < $counter - 1){
$paginate.= "<a href='$targetpage?page=$next'>next</a>";
}else{
$paginate.= "<span class='disabled'>next</span>";
}
$paginate.= "</span>";
} echo 'Pubs found: '.$total_pages;
// pagination
echo $paginate;
?>
<div id="ajaxCountylist">
<div id="accordion">
<?php
while($row = mysql_fetch_array($result))
{
echo '<div><h3><a href="#">'.$row['rsPubName'].', '.$row['rsTown'].'</a></h3><div>'.$row['rsAddress'].'<br />'.$row['rsTown'].', '.$row['rsCounty'].'<br />'.$row['rsPostCode'].'<br /><br />Region: '.$row['Region'].'<br /><br />Telephone: '.$row['rsTel'].'<br /><br />';
echo '<button onclick="gohere(\'viewpub.php?PUBID='.$row['PUBID'].'\')" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">View Pub</span></button>';
echo '</div></div>';
}
echo '<span style="float:right;">'.$paginate.'</span>';
?>
</div>
</div>
I have only applied teh function to the previous button and the first page numbers! Hello, I'm sorry if this has been asked before but I've been googling and looking in reference books for the last couple of days and just haven't been able to find an answer. I'm new to javascript and have just completed my first fully working script to crossfade images and have clickable links to go to a specific image, the code works perfectly when the code is inside of the html document with the elements but when you remove the javascript and put it in a seperate file its unable to get the value of the elements from the html. Is there a way to do this, give the document a alternative src to look in for the elements or something? An example below. Javascript snipit [CODE] imageId = "mainImage"; image = window.document.getElementById(imageId); alert(image); [CODE] image returns null. what I want it to return is the value fro the HTMl document that this file is included in. [CODE] <script type="text/javascript" src="fadeFunctions.js"> </script> </head> <body> <div id="imgHolder" style="position: absolute; top: 200px;"> <div id="topImage" style="position: absolute; top: 0px; left: 0px; z-index: 100;"><img id="mainImg" src="1.png" /></div> [CODE] Thanks for any help or suggestions that you can give. I'm working on a web site: http://84.9.221.75/domains/backingtr...usicindex.html I'm trying to get the Javascript that controls the scrolling text to scroll on both the left and right sides.....right now it only scrolls on the left, due to the use of getElementById() from what i can see.... So I'm trying to make the javascript see all references to the ID in the document, and make the right panel div scroll as well, but I'm not having any luck.... I have a very basic understanding of Javascript, so I need a little help here guys...thanks.. I have a form that is used to insert a new classified ad or to update an existing ad. When the submit button is pressed a javascript function is called to validate the fields. Some of the fields are set as required. If the field is empty ( as form[i].value = '' ) then this sets an error flag and after all fields have been tested will display an alert and each field that has an error will be highlighted in red. This works great when a new ad is being created, but when the ad is being updated, and a required field is erased then it doesn't popup as an error, as if the script is just ignoring it. Here is the code snipit: Code: function submitbutton(mfrm) {
var me = mfrm.elements;
var r = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-]", "i");
var r_num = new RegExp("[^0-9\.,]", "i");
var r_email = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,3}$" ,"i");
var errorMSG = '';
var iserror=0;
// set notification background color
var warnColor = '#<?php echo $this->error_color; ?>';
// loop through all input elements in form
for (var i=0; i < me.length; i++) {
// check if element is mandatory; here mosReq="1"
if ((me[i].getAttribute('mosReq') == 1)&&(me[i].style.visibility != 'hidden')) {
if (me[i].type == 'radio' || me[i].type == 'checkbox') {
var rOptions = me[me[i].getAttribute('name')];
var rChecked = 0;
if(rOptions.length > 1) {
for (var r=0; r < rOptions.length; r++) {
if (rOptions[r].checked) {
rChecked=1;
}
}
} else {
if (me[i].checked) {
rChecked=1;
}
}
if(rChecked==0) {
errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
// notify user by changing background color, in this case to red
me[i].style.background = warnColor;
iserror=1;
}
}
if ((me[i].value == '') || (me[i].value.length < 2)) {
errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
me[i].style.background = warnColor;
iserror=1;
}
}
}
if(iserror==1) {
alert(errorMSG);
return false;
}
}
Hi. I'm making a web site...And the following bit of code doesn't work...It sais "document.getElementById(...) is null or not an object"...I tried various combinations of getElementById and getElementsByName but nothing works...Any help is very much appreciated. Thanks. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rudolf-site management</title>
<script language="javascript">
<!--
function Val_imag(){
if(document.site.Imagini[0].checked){
for(var i=0; i<16; i++){
document.getElementById('Fs_img')[i].style.display='none'
document.getElementById('Txt_img')[i].style.display='none'}}
else{
if(document.site.Imagini[1].checked){
for(var i=0; i<16; i++){
document.getElementById('Txt_img')[i].style.display='none'}
document.getElementById('Fs_img0').style.display=''}
else{
if(document.site.Imagini[2].checked){
for(var i=0; i<16; i++){
document.getElementById('Fs_img')[i].style.display='none'}
document.getElementById('Txt_img0').style.display=''}
else{
for(var i=0; i<16; i++){
document.getElementById('Fs_img')[i].style.display='none'
document.getElementById('Txt_img')[i].style.display='none'}}}}}
function Cont_pag3(){
if(document.site.Imagini[0].checked){
document.site.pag3_5.disabled=false}
else{
if(document.site.Imagini[1].checked){
if(document.site.Fis_img[0].value!=""){
document.site.pag3_5.disabled=false}
else{
document.site.pag3_5.disabled=true}}
else{
if(document.site.Imagini[2].checked){
if(document.site.Text_img[0].value.length>7){
document.site.pag3_5.disabled=false}
else{
document.site.pag3_5.disabled=true}}}}}
// -->
</script>
</head>
<body bgcolor=#000437>
<font color=#FDB91A>
<form method="post" name="site" action="site.php" enctype="multipart/form-data">
<div id="pagina3" class="comanda">
Pasul III: Imagini<br/>
Pentru a trimite imaginile care vor aparea pe site (daca exista), aveti 2 optiuni: sa ne trimiteti un fisier .zip, .rar, etc sau sa scrieti un link unde le vom putea gasi.<br/><br/>
Le puteti organiza cum doriti dumneavostra, dar este preferabil sa folositi una dintre variantele urmatoa <br/><br/>
(folder) pagina 1: (folder) pagina 1-1: imaginile care apar pe pagina 1-1<br/>
<table style="color=#FDB91A"><tr><td width="155"></td><td width="250">imaginile care apar pe pagina 1 etc</td></tr></table><br/><br/>
(folder) pagina 1: imaginile care apar pe pagina 1<br/>
(folder) pagina 1-1: imaginile care apar pe pagina 1-1 etc<br/><br/>
(folder - nu este necesar) site: toate imaginile care apar pe site<br/>
<table style="color=#FDB91A"><tr><td width="200"></td><td width="250">fisier text (.txt, .doc, .docx etc) cu numele imaginilor si pagina pe care apar</td></tr></table><br/><br/>
La toate exemplele, in loc de pagina 1 etc puteti scrie numele paginii.<br/>
Puteti adauga pana la 10 fisiere si pana la 15 link-uri. Pentru a adauga inca un fisier/link apasati pe butonul corespunzator.<br/>
Va rugam ca fisierele trimise sa fie de maximum 5 MB. (Puteti downloada si instala gratuit <a href="http://www.rarlab.com/download.htm" target="_blank">WinRar</a> si sa-l folositi pentru a face o arhiva impartita in mai multe bucati.)<br/><br/>
<input type="radio" name="Imagini" value="NuAm" onClick="Val_imag();Cont_pag3()">Site-ul nu are imagini<br/>
<input type="radio" name="Imagini" value="Fisier" onClick="Val_imag();Cont_pag3()">Trimite fisier<br/>
<table id="Fs_img0" style="display: none"><tr><td><input type="file" name="Fis_img" size="100" onChange="Cont_pag3()"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img1').style.display=''"></td></tr></table>
<table id="Fs_img1" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img2').style.display=''"></td></tr></table>
<table id="Fs_img2" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img3').style.display=''"></td></tr></table>
<table id="Fs_img3" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img4').style.display=''"></td></tr></table>
<table id="Fs_img4" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img5').style.display=''"></td></tr></table>
<table id="Fs_img5" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img6').style.display=''"></td></tr></table>
<table id="Fs_img6" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img7').style.display=''"></td></tr></table>
<table id="Fs_img7" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img8').style.display=''"></td></tr></table>
<table id="Fs_img8" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img9').style.display=''"></td></tr></table>
<table id="Fs_img9" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img10').style.display=''"></td></tr></table>
<table id="Fs_img10" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img11').style.display=''"></td></tr></table>
<table id="Fs_img11" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img12').style.display=''"></td></tr></table>
<table id="Fs_img12" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img13').style.display=''"></td></tr></table>
<table id="Fs_img13" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img14').style.display=''"></td></tr></table>
<table id="Fs_img14" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img15').style.display=''"></td></tr></table>
<table id="Fs_img15" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td></tr></table>
<input type="radio" name="Imagini" value="Text" onClick="Val_imag();Cont_pag3()">Scrie/copiaza link-ul<br/>
<table id="Txt_img0" style="display: none"><tr><td><input type="text" name="Text_img" size="80" onKeyUp="Cont_pag3()"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img1').style.display=''"></td></tr></table>
<table id="Txt_img1" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img2').style.display=''"></td></tr></table>
<table id="Txt_img2" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img3').style.display=''"></td></tr></table>
<table id="Txt_img3" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img4').style.display=''"></td></tr></table>
<table id="Txt_img4" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img5').style.display=''"></td></tr></table>
<table id="Txt_img5" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img6').style.display=''"></td></tr></table>
<table id="Txt_img6" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img7').style.display=''"></td></tr></table>
<table id="Txt_img7" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img8').style.display=''"></td></tr></table>
<table id="Txt_img8" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img9').style.display=''"></td></tr></table>
<table id="Txt_img9" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img10').style.display=''"></td></tr></table>
<table id="Txt_img10" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img11').style.display=''"></td></tr></table>
<table id="Txt_img11" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img12').style.display=''"></td></tr></table>
<table id="Txt_img12" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img13').style.display=''"></td></tr></table>
<table id="Txt_img13" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img14').style.display=''"></td></tr></table>
<table id="Txt_img14" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img15').style.display=''"></td></tr></table>
<table id="Txt_img15" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td></tr></table><br/>
Observatii:<br/>
Daca aveti observatii/idei legate de imagini (amplasare, contur, text etc), le puteti scrie aici.<br/>
Nu este un camp obligatoriu.<br/>
<textarea name="Obs_img" cols="80" rows="7"></textarea><br/><br/><br/><br/>
<input type="button" name="pag2_1" value="Pagina precedenta">    
<input type="button" name="pag3_5" value="Continua comanda" disabled=true>
</div>
PS1: this code worked in firefox PS2: sorry for posting such a long code... Hello. I'm trying to change the text on my page dynamically using getElementById etc. Just not quite sure how to do it. Code: <script>
function changeIt() {
document.getElementById('change').innerHTML = '*i want the stuff below here (from 'var' to 'text')*';
}
var Result= ((correct / 5) * 100) + '%';
document.write('<p>Result<b>' + score + '</b></p>');
document.write('<p>some text</p>');
</script>
//
<div id = "change">
*all the info I'm going to replace*
</div>
Just need to know how to put the variables and stuff in the 'innerhtml' part? Thanks. Hey guys, Thanks for taking the time to read my post. I am not new to programming or scripting, but I am completely new to javascript and web-based code. Hopefully you guys could help me understand what is going on and maybe help me figure out what I am trying to do. What I am trying to do: -There is an element that has a value <td class="flashField" onmouseover="clearAnswer()"> <div id="flashAnswer" onmouseover="clearAnswer()">answer string here</div> </td> -There is a text box that needs to have the answer above given to it <td class="flashField"> <input type="text" tabindex="1" onkeypress="clearAnswer()" name="q" maxlength="256" size="50"> </td> -There is a next button that needs to be executed <td align="right"> <input type="image" tabindex="2" alt="Next" src="http://website.com/images/next.gif"> </td> So what I am trying to do is create a script through Greasemonkey that will automatically do these things. I am starting small and trying to just get the value of flashAnswer to appear as an alert on the screen by using this code: var answer = document.getElementById('flashAnswer'); alert(answer); But the problem is it posts some weird value ([object XrayWrapper [object HTMLDivElement]]) that most definitely is not "answer string here" and is a bit above me at this point. Any ideas? Any help would be great guys! Thanks! -ellosiph |
|||||||