JavaScript - Display A Field Value Only When A Link Is Clicked

I have no clue if this is in the correct forum but.... is there a way to determine whether a user clicked on a link vs typed in the url to get to a page? I'm trying to stop users from messing with GET forms (and i have to use them, POST wouldn't make sense in this case).

Thanks

Sorry I am new to JavaScript.

Says that a.html has two same anchor links (<a href="b.html">b</a>). The anchor links are uneditable but we could add JavaScript to the a.html.

Except for dynamic adding onclick event, any other ways could get to know which anchor link being clicked?

I have a WebHelp framework created by chmProcessor whereby index.htm calls frameset.html that references a left frame "treeFrame" and right frame "frameCont". The treeFrame has javascript to change the icons from selected to not selected and high light the selected topic.

I have a need to have links in the right frame. And when I click on the link in the right frame, I want the right frame to display the topic but I also want the treeFrame navigation to open the navigation to the newly selected topic.

How would I go about implementing this? In the tree.html, the tree navigation gets created with this code:

Code:

contentTree.create( document.getElementById( "contentsTree" ) , window.parent.document.getElementById( "frameCont" ) , window.parent.parent.location.href );

Here is the tree.js
Code:

/************************************
(C) Toni Bennasar 2007
http://chmprocessor.sf.net
Under GPL license.

Functions to create a content tree for many web pages.

*************************************/

var contentTree = new Object();

contentTree.pageloaded = function() {

    // Get the title of the loaded page:
    
    pageRelativeUrl = getPageTitle( contentTree.frame.contentWindow.document.location.href )
    
    // Search the link to this page
    node = contentTree.seachLinkByHref( pageRelativeUrl );
    if( node == "" ) {
        // Try to search by the page title, without internal reference:
        idx = pageRelativeUrl.indexOf( "#" )
        if( idx >= 0 )
            pageRelativeUrl = pageRelativeUrl.substring( 0 , idx );
        
        node = contentTree.seachLinkByFileTitle( pageRelativeUrl );
    }
    
    if( node != "" ) {
        // If its found, select it over the tree:
        contentTree.selectLink( node , true , false );
    }
}

// Initializes the tree.
// tree : UL element that contains the tree
// frame: The frame that will contain the topic pages.
// url: Input URL of the page.
contentTree.create = function( tree , contentFrame , url ) {

	// Store ref to tree elements:
	contentTree.frame = contentFrame;
	contentTree.tree = tree;
	contentTree.selectedLink = "";

	// Change the links to open his ref into the iframe
	contentTree.links = tree.getElementsByTagName("a");

	// Create click events for the links:
	for (var i=0; i<contentTree.links.length; i++) {
		contentTree.links[i].onclick = function(e){
			contentTree.frame.src = this.href;
			contentTree.selectLink( this , false , true );
			//e.stopPropagation();
			stopEvent(e);
			return false;
		}
	}

	// Prepare all the submenus
	var submenus = tree.getElementsByTagName("ul");
	
	for( var i=0; i< submenus.length; i++ ) {
		var sb = submenus[i];
		sb.parentNode.className="submenu";
		sb.setAttribute("status", "closed");

		// click open the submenu:
		
		sb.parentNode.onclick = function(e) {
			var ulChild=this.getElementsByTagName("ul")[0];
			if( ulChild.getAttribute("status") == "closed" ) {
				contentTree.openUlElement( ulChild );
			}
			else if( ulChild.getAttribute("status") == "open" ) {
				ulChild.style.display="none";
				ulChild.setAttribute("status", "closed");
				
				this.style.backgroundImage="url(1g.gif)";
			}
			//e.stopPropagation();
			stopEvent(e);
		}
		// To avoid events when the submenu items are pressed.
		sb.onclick=function(e){
			//e.stopPropagation();
			stopEvent(e);
		}
	}

	// Load the default page, or the selected topic page:
	
	var topic = getURLParam( url , "topic");
	
	var topicLink = "";
	if( topic != "" )
		topicLink = contentTree.seachLinkByTitle( topic );
	if( topicLink != "" )
		contentTree.selectLink( topicLink , true , true );
	else if( contentTree.links.length > 0 )
		contentTree.selectLink( contentTree.links[0] , true , true );

    // When an internal link is clicked follow the selection at the tree:
    contentFrame.onload_1 = function(){ contentTree.pageloaded(); }
    
}

contentTree.openUlElement = function( ulElement ) {
	if( ulElement.getAttribute("status") == "closed" ) {
		ulElement.style.display="block";
		ulElement.setAttribute("status", "open");
		ulElement.parentNode.style.backgroundImage="url(2g.gif)";
	}
}

contentTree.selectUrl = function( url ) {
    var lnk = contentTree.seachLinkByHref( url );
    if( lnk == "" )
        // URL not found
        contentTree.frame.src = url
    else
        contentTree.selectLink( lnk , true , true );
}

contentTree.selectLink = function( lnkObject , expandTree , loadContentFrame ) {

	if( contentTree.selectedLink != "" )
		contentTree.selectedLink.style.backgroundColor = contentTree.notSelectedBg ;
	else
		contentTree.notSelectedBg = lnkObject.style.backgroundColor;
		
	if( loadContentFrame )
	    contentTree.frame.src = lnkObject.href;
	
	contentTree.selectedLink = lnkObject;
	lnkObject.style.backgroundColor = "#33CC66" ;

	if( expandTree ) {
		var ulElement = lnkObject.parentNode.parentNode;
		while( ulElement != contentTree.tree ) {
			contentTree.openUlElement( ulElement );
			ulElement = ulElement.parentNode.parentNode;
		}
	}
}

// Search a link into the tree by his text:
contentTree.seachLinkByTitle = function( strTitle ) {
    var strTitleLower = strTitle.toLowerCase()
	for (var i=0; i<contentTree.links.length; i++) {
	
	    // Get the text of the link, without return carriages
	    var linkText = contentTree.links[i].innerHTML.toLowerCase();
	    linkText = linkText.replace(/\n/," ");
	    linkText = linkText.replace(/\r/,"");
	    
		if( linkText == strTitleLower )
			return contentTree.links[i];
	}
	return "";
}

// Search a link into the tree by his href:
contentTree.seachLinkByHref = function( strHref ) {
	for (var i=0; i<contentTree.links.length; i++) {
	    //var aux = unescape( contentTree.links[i].href );
	    var aux = contentTree.links[i].href;
        if( aux == strHref || endsWith( aux , "/" + strHref ) )
			return contentTree.links[i];
    }
	return "";
}

contentTree.seachLinkByFileTitle = function( strFile ) {
	for (var i=0; i<contentTree.links.length; i++) {
	
	    //var aux = getPageTitle( unescape( contentTree.links[i].href ) );
	    var aux = getPageTitle( contentTree.links[i].href );
	    
        if( aux == strFile )
			return contentTree.links[i];
        else {
            idx = aux.indexOf( "#" )
            if( idx >= 0 ) {
                aux = aux.substring( 0 ,  idx );
                if( aux == strFile )
			        return contentTree.links[i];
			}
        }
    }
	return "";
}


// Search links that contains
contentTree.searchByContent = function( strSearch , idList , idTopicsList ) {

    var list = document.getElementById( idList );
	list.options.length=0;
	if( strSearch == "" )
		return;
	var topicsList = document.getElementById( idTopicsList );
    //var strLower = strSearch.toLowerCase();
    var strLower = normalizeString( strSearch );
    for (var i=0; i<topicsList.options.length; i++) {
		if( normalizeString( topicsList.options[i].text ).indexOf( strLower ) >= 0 ) {
			var opt = new Option( topicsList.options[i].text );
			opt.value = topicsList.options[i].value ;
			list.options[ list.options.length ] = opt;
		}
	}
	list.ondblclick = function(e) {
		if( list.selectedIndex >= 0 )
			contentTree.selectUrl( list.options[ list.selectedIndex ].value );
	}
}

Hey all,

Hoping someone could help me out with some javascript coding as I am a complete novice to this!

I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below).

The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on.

Can anyone help me out with how I can get this to work correctly?

javascript:

Code:

<script language="JavaScript" type="text/javascript">

var Lst;

function CngClass(obj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (Lst) Lst.className='';
 obj.className='On';
 Lst=obj;
}

</script>

HTML:

Code:

<div id="navWrapper">

			<div id="globalNav">
				<ul>
				<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
				</ul>
			</div>
            
            <div id="localNav"></div>
        
		</div>

I have a hidden field whose value is a text string, "xyz". I want to write the value to the page so that the user can see it but not edit it. Can't I just use document.write(form.field.value)? Why isn't it working?

<script language="JavaScript">

function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}}
</script>

Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working.

Hello,

I want add an onclick link from an iFrame to a form field on the parent. After to ba placed on the form field, clicking on the link a new page will be open on the iframe. I am trying this:

Quote:
<form name=formName>
<iframe name=frameName src="<a href=http://www.google.com onclick="parent.document.forms['formName'].elements['fieldName'].value = 'do you right';" return false;">Click Here To Get Done Right</a>
" width="800" height="400" ></iframe><br><br>
<input type="text" id="fieldname" size="95" name="t2">

</form>

letchev

I have a form with three fields. When the user changes the value of field1, the form displays either field2 or field3. This works fine for NEW records.

However, I'm running into a problem when trying to EDIT an existing record. When the form is loaded, I need to test the value of field1 and display either field2 or field3. I've tried using the form onload event, but do not know how to access the value of field1.

I'm using Javascript and div tags.

This is what I have so far.

<script type="text/javascript">

function hide(obj)
obj1 = document.getElementById(obj);
obj1.style.display = 'none';
}

function show(obj)
{
obj1 = document.getElementById(obj);
obj1.style.display = 'block';
}

function show_other(optionValue)
{
if(optionValue=='C') { show('divClass');} else{hide('divClass'); }
if(optionValue=='W') { show('divWorkshop');} else{hide('divWorkshop'); }
}
</script>

/* Field1 - is a drop down list */
<select name="ClassType" size="1" onchange="show_other(this.value)">
...
</select>

/* Field2 */
<div id="divClass">
...
</div>

/* Field 3 */
<div id="divWorkshop">
...
</div>

Appreciate any assistance.
Thanks
Peter

I'd like to create a website similar to http://www.picfog.com which displays images posted to Twitpic and Yfrog via Twitter.

Could anyone help me with the following:

Given a feed/list of messages containing links to images, display the images that are linked to.

For example, take these two Twitter messages:

omgsage: http://twitpic.com/cw3i3 - This is the cutest kitty ever
ellievolia: Our evening! http://twitpic.com/cw3hx

Using Javascript how do I extract the link part of each message, convert this to point to the actual thumbnail and then display the thumbnails on the web page?


Thanks in advance!

Hi,

I am just a noob and this is my first go at javascript and html

I am trying to figure out how to display info from an array in the <textarea>, I have tried a number of things nothings worked and I know it must be something simply but have tried a number of things

I also have to clear the <textarea> after it displays the info mentioned above and I think I have that sorted but I also have to have the <textarea> display all signup info stored in the array when a user clicks on a button

Here's the code

Code:

function show()
{
var myArray = new Array(); 
myArray[0] = document.getElementById('fullname').value; 	myArray[1] = document.getElementById('Address').value;	myArray[2] = document.getElementById('Phone').value;	

document.writeln('Thank you for signingup,' + ' ' + myArray[0] + '. Your details will be confirmed by E-mail to ' + myArray[2] );
	
document.writeln("<br>")
document.writeln('Details:')	
document.writeln("<br>")
	
for (var i=0; i<myArray.length; i++)
{document.write(myArray[i] + "<br />");	} 
}

Thanks

Hi all we are in desperate need of a solution, we have tried and search different methods but none of us can figure it out.

Basically we need to find a word which is inside a class and display a link.

So something like this

find a word equal to "1 line custom"

then

display this <a href="/1-line-custom.htm">click here</a>

I'm not sure if this is really simple or not.

Any help would be much appreciated.

Thanks

Will

Hi, all!
I'm a "fresh" newbie, JS self-taught from the great resources provided in this forum. I want to better currently working page but lack enough knowledge atm. The situation is this:
* Multimedia database - audio clips and corresponding video clips to some of the audio ones.
* Dynamic content page showing the latest (by date) 5 or 10 clips with their info from db.
* Links provided for each clip, both to listen in a new popup window and to download the clip.

Accomplished so far: everything of the above *only* for the audio clips (and video ones but separately on a different page).
Every record in the data base has an audio clip and some of them, not all, have a video clip. E.g. there are records only with audio clips and there are records both with audio and video clips.
My question is is it possible wherever there's a video clip in the db in an already displayed db-record on the page to display 'watch' and 'download' icon for it together with already shown audio icons ('listen' and 'download')? Conditional displaying.
I read about combination between JS and CSS in almost similar situation but don't know how to apply it in my situation due to my little knowledge base at this moment. So, any help will be highly appreciated and useful as it will push me forward in learning JS. I'm almost sure this is possible as it's not a complicated issue.
I can post my so far working code, if requested. If not provided enough info on the issue, let me know.
Thank you in advance!

www.e-decals.com/dev displays fine in Firefox and Safari, (link color a {
color : #b2b2b2 correct) but IE showing default link colors around images in multibox - IE error he

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
Timestamp: Thu, 5 Nov 2009 15:11:40 UTC

Message: Object doesn't support this property or method
Line: 467
Char: 4
Code: 0
URI: http://www.e-decals.com/dev/multibox/multibox.js

Any ideas?

hiiii,
im new to javascripts . Can anyone help me to know that a javascript which is validating a phone number accepts only digits but if the text field is left empty it should accept the entry as an empty entry....


plz share knowledge u will be more knowledgeable

Hi folks.

Looking to see if anyone could tell me where I'm going wrong with this script...

I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page.

Here is the script:
Code:

<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[428]"]').change(function(){
var d = $('input[name="item_meta[428]"]').val();
var n = new Date(d).getDay();
if(n == 0)
val v = 'Sunday';
else if(n == 1)
val v = 'Monday';
else if(n == 2)
val v = 'Tuesday';
else if(n == 3)
val v = 'Wednesday';
else if(n == 4)
val v = 'Thursday';
else if(n == 5)
val v = 'Friday';
else if(n == 6)
val v = 'Saturday';
$('input[name="item_meta[429]"]').val(v).change(); 
});
});
</script>

I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday".

Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday".

It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc.

Any assistance would be greatly appreciated.

Sam.