[SOLVED] Hopefully a simple if statement!

[Bricktop]

Hi there,

 

I'm new to Javascript and am playing about with a script which allows you to select some text and turn it into a link.  What I need to do is edit the Mozilla part of the code as below:

 

/* FUNCTION CALLED FROM POPUP WINDOW TO SET AN A HREF TAG IN EDITOR WHEN USING MOZILLA */
function updateEditorAMozilla(fldVal) {
var tagBeginning = fldVal;
var tagEnding = "</a>";
var el = document.getElementById('quote');

if (el.setSelectionRange) {
el.value = el.value.substring(0,el.selectionStart) + tagBeginning + el.value.substring(el.selectionStart,el.selectionEnd) + tagEnding + el.value.substring(el.selectionEnd,el.value.length)
}
el.focus();
}

 

You can see that the above grabs the textarea with the id of "quote", however I need some sort of if statement which says:

 

if (document.getElementById='quote')
{
var el = document.getElementById('quote');
}
else
{
var el = document.getElementById('author');
}

 

Like I said not entirely sure how JS works so not sure if above is possible, essentially if the referring id is "quotes" then set the variable accordingly, otherwise set the var to "author".  Otherwise I would need to do the above but check if one field is empty and if so populate accordingly, like:

 

if (!document.getElementById='quote')
{
var el = document.getElementById('author');
}
else
{
var el = document.getElementById('quote');
}

 

Hope the above makes sense and you're able to point me in the right direction!

 

Thanks!

[jayjay960]

Do you mean you want something that checks if the field has anything in it?

 

if (document.getElementById('quote').value.length>0)
{
var el = document.getElementById('quote');
}
else
{
var el = document.getElementById('author');
}

[Bricktop]

Hi Jay,

 

Thanks for this but I just got it working with similar code above and I'm now sure it's not what I need. 

 

Basically, I now need to know which getElementById has been passed to the script for processing and set the var el = document.getElementById('xxxx'); accordingly.

 

So, if:

 

if (document.getElementById==('quote')
{
var el = document.getElementById('quote');
}
else
{
var el = document.getElementById('author');
}

 

 

Is this even possible?

 

Thanks a lot

[KevinM1]

How are you calling this function?  I have an idea of what you're trying to do, but would like more info just to be sure.

[Bricktop]

Hi Nightslyr,

 

I have two links as follows:

 

<input title="Create link" type="button" value="Add Link" class="addlink" onclick="formatTextLink(document.getElementById('quote'))" />
<textarea id="quote" name="quote"></textarea>

<input title="Create link" type="button" value="Add Link" class="addlink" onclick="formatTextLink(document.getElementById('author'))" />
<input type="text" id="author" name="author"></input>

 

These links then get formatted by the following code:

 

function formatTextLink(el) {
/*  IF INTERNET EXPLORER */
if (window.showModalDialog) {
	var myText = window.showModalDialog('link-popup.php', 
										'name', 
										'dialogWidth:550px;dialogHeight:280px');
	var selectedText = document.selection.createRange().text;

	if (selectedText != "") {
		var newText =  myText + selectedText + "</a>";
		document.selection.createRange().text = newText;
	}
	else {
		el.focus(el.caretPos);
		el.caretPos = document.selection.createRange().duplicate();
		if(el.caretPos.text.length == 0) {
			el.caretPos.text = myText + "</a>";
		}
	}		
}
/* IF MOZILLA */
else {
	window.open('link-popup.php', 
				'name',  
				'height=280,width=550,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes');
}	
}

 

As you can see, the above code calls a pop-up window, in this window you enter the link and the script then outputs that link to the relevant field (either quote or author).  The output code looks like:

 

function returnSelected(val) {
var text = document.getElementById(val).value;
var trgt = document.getElementById('trgt').value;

var tagText = "<a href=\"" + text + "\" target=\"" + trgt + "\">"

if (navigator.appName == "Microsoft Internet Explorer") {
// set return value
window.returnValue = tagText;
}
else {
window.opener.updateEditorAMozilla(tagText);
}

// close dialog
window.close();
}

 

This works great in IE, but in Firefox I have to specify which id to output the text to using the following:

 

/* FUNCTION CALLED FROM POPUP WINDOW TO SET AN A HREF TAG IN EDITOR WHEN USING MOZILLA */
function updateEditorAMozilla(fldVal) {
var tagBeginning = fldVal;
var tagEnding = "</a>";

var el = document.getElementById('quote');


if (el.setSelectionRange) {
el.value = el.value.substring(0,el.selectionStart) + tagBeginning + el.value.substring(el.selectionStart,el.selectionEnd) + tagEnding + el.value.substring(el.selectionEnd,el.value.length)
}
el.focus();
}

 

But as you can see with the Firefox portion of code I can only specify one output area 'quote', I can't choose to output to 'author'.  Somehow I would like the script to know which link was pressed right back at the beginning (either quote or author) and then output to that same field when using the updateEditorAMozilla code.

 

With PHP you can POST a value through multiple functions to achieve the above but as I'm not at all familiar with Javascript not sure if this is even possible?

 

Thanks again

[KevinM1]

So, wait...why can't you simply pass along the element to the function you need?  You already have a handle on the proper element - it's the argument you pass into the function.  What's stopping you from passing that into the pop-up window along with the text you're modifying?

[Bricktop]

That sounds great Nightslyr but I don't have a clue how to achieve that, sorry but my knowledge of Javascript is very limited.

[KevinM1]

That sounds great Nightslyr but I don't have a clue how to achieve that, sorry but my knowledge of Javascript is very limited.

 

Hmm... can you show me all the code of your pop-up window?

[Bricktop]

OK, no problemo - the code I've pasted above is all in a single JS file called "createlink.js".  Below is the pop-up window file.

 

<html>
<head>
<title>Specify link</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="JavaScript" src="js/createlink.js"></script>

</head>

<body>

<form class="linkpopup">
<p class="left">Specify Link<br /><br />
<p class="left">Link:<br /><br />
<input type="text" value="http://" id="linkUrl" class="input" /></p>
<p class="left">Open in:<br /><br />
<select id="trgt" class="input">
<option value="_top">same window</option>
<option value="_blank">new window</option>
</select>
</p>
<p class="center"><input type="button" class="inputbutton" value="Paste" onClick="returnSelected('linkUrl')"></p>
</form>
</div></div>

</body>
</html>

 

Thanks very much.

[haku]

I didn't read your last post, but you can do this:

 

function formatTextLink(id)
{
  var el = document.getElementById(id)
  // do the rest of your function here
}

 

Then call it like this:

 

<input title="Create link" type="button" value="Add Link" class="addlink" onclick="formatTextLink('quote')" />
<textarea id="quote" name="quote"></textarea>

<input title="Create link" type="button" value="Add Link" class="addlink" onclick="formatTextLink('author')" />
<input type="text" id="author" name="author"></input>

[KevinM1]

Hmm...yeah, you're in a pretty tight corner.

 

Unfortunately, there's no easy, 'clean' solution.  The easiest thing I can think of would be to pass in the target element, which you already do, then, for the Mozilla side of things, attach that element's id to the pop-up's url as a query string.  So, something like:

 

   /* IF MOZILLA */
   else {
      window.open('link-popup.php?sender=' + el.id,
               'name', 
               'height=280,width=550,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes');
   }

 

In the pop-up, you can grab a hold of the query string value by writing a function like (note: comes from a 3rd party, so I haven't tested it...):

 

function getQuerystring(key, default_)
{
  if (default_==null) default_="";
  key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
  var qs = regex.exec(window.location.href);
  if(qs == null)
    return default_;
  else
    return qs[1];
}

 

So, with that in the pop-up, you could modify your updateEditorAMozilla() function like so:

 

/* FUNCTION CALLED FROM POPUP WINDOW TO SET AN A HREF TAG IN EDITOR WHEN USING MOZILLA */
function updateEditorAMozilla(fldVal) {
var tagBeginning = fldVal;
var tagEnding = "</a>";

var target = getQuerystring('sender');
var el = window.opener.document.getElementById(target);

if (el.setSelectionRange) {
el.value = el.value.substring(0,el.selectionStart) + tagBeginning + el.value.substring(el.selectionStart,el.selectionEnd) + tagEnding + el.value.substring(el.selectionEnd,el.value.length)
}
el.focus();
}

 

You'd have to move the Mozilla function into the pop-up, though there's probably a way to keep it in the main page with a little work.

[KevinM1]

EDIT: haku, would something simple like:

 

window.opener.el.value = 'something';

 

work?  I'm just wondering if a child window has knowledge of its parent's variables.

[Bricktop]

That's great Nightslayr, thanks very much.  Your code has given me plenty to work on so I will mark this post as solved.

 

Thanks again for your hard work and help.

[haku]

I don't know if that specifically will work (passing references to objects that have been retrieved with getElementById can be finicky at times), but the child window does have knowledge of the parent variables, and your syntax is right.

 

But to be save, I would probably do it with a function in the parent window:

 

function setValue(id, value)
{
  document.getElementById(id).value = 'value'
}

 

then call it from the child window like this:

 

window.opener.setValue('author', 'haku')

[KevinM1]

I don't know if that specifically will work (passing references to objects that have been retrieved with getElementById can be finicky at times), but the child window does have knowledge of the parent variables, and your syntax is right.

 

But to be save, I would probably do it with a function in the parent window:

 

function setValue(id, value)
{
  document.getElementById(id).value = 'value'
}

 

then call it from the child window like this:

 

window.opener.setValue('author', 'haku')

 

Ooh, nice.