newbie question: onchange select box inserts image to textarea

I've been trying to adapt this script to fit my needs, but I can't get
it to work. I'm trying to put my values in the status bar so I can see
if my variables have the right values, but I get an "Error on page"
error, so I can't read anything in the status bar.

What am I missing?




function placeImageAtCursor(myField) {
var imageName = '';
var path = '';
var myValue = '';

imageName = document.forms.pdsForm.imagesToInsert.value;

path = 'http://www.publicdomainsoftware.org/mcImages/';
myValue = path+imageName;
window.status= myValue;



if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
} else if (myField.selectionStart || myField.selectionStart == '0')
{


var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) + myValue +
myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}




This is the form element that should be calling:


<br>Insert an image: <select id="imagesToInsert"
onchange="placeImageAtCursor(document.formName.fie ldName);">
<option value=""></option>
<option value="">No choice made</option>
<option value="emma.jpg">Emma sticks out her tongue</option>
<option value="Ellen_and_Rob_cleaning_Bunkhouse_9-97.JPG">Rob Kurtz,
Ellen, clean the bunk house in 1997</option>
<option value="052898-31_Eryn_smoking_cigarette.jpg">Woman in
red</option>
<option value="publicPen_log.gif">Public Pen Logo</option>
<option value="biglettuce.JPG">big lettuce</option>
<option value="vegetables2.JPG">mod vegetables</option>
<option value="vegetables2.JPG">mod vegetables</option>
<option value="lettuce.JPG">lettuce</option>
<option value="lettuce.JPG">lettuce</option>
<option value="lettuceStripsCropped.JPG">lettuceStrips</option>
<option value="lkImage03.jpg">Lawrence and his dad</option>
</select>

lawrence said:

I've been trying to adapt this script to fit my needs, but I can't get
it to work. I'm trying to put my values in the status bar so I can see
if my variables have the right values, but I get an "Error on page"
error, so I can't read anything in the status bar.

What am I missing?

You seem to be missing the details of the error message.
Most likely, it's complaining that you don't have forms
by the names it's expecting. Your code expects the form
that contains the select to be named "pdsForm" and for
there to be another form named "formName" containing a
field named "fieldName". If those don't exist, you're
going to get errors.

Also, the first two options are :

<option value=""></option>
<option value="">No choice made</option>

That looks to me like two choices that both mean "no choice made".
I would get rid of the first one.

I'm trying to put my values in the status bar so I can see
if my variables have the right values, but I get an "Error on page"
error, so I can't read anything in the status bar.

The status area can only contain one message and will get over written
with any subsequent status message.

Many people use the alert message. It OK for a few messages. Try:

var a = "hello world.";
alert(a);

Another approach is to write the debug messages to a separate window.
See:

http://groups.google.com/groups?hl=e...charles-FF349F.
22451509022004%40news02.west.earthlink.net

subject: Re: Debug - Your own console

be sure to get the one with the Corrected code on the forth line.

Robert

Lee <REM0VElbspamtrap (AT) cox (DOT) net> wrote

You seem to be missing the details of the error message.
Most likely, it's complaining that you don't have forms
by the names it's expecting. Your code expects the form
that contains the select to be named "pdsForm" and for
there to be another form named "formName" containing a
field named "fieldName". If those don't exist, you're
going to get errors.

The error message, appearing in the status bar, is simply "Errors on
page."

I've cut the function down to this and still:



function insertAtCursor(myField) {
var imageName = '';
var path = '';
var myValue = '';
var status = '';

imageName = document.forms['pdsForm'].elements['imagesToInsert'].value;
alert(imageName);
window.status= imageName;
}



This is how the form starts:







div class="onePanel">
<form id='pdsForm' name='pdsForm' method='post'
action='/robert/mcControlPanel.php' class='mcForm'>

<input id="inputId1" type="hidden"
name="formInputs[formSecurityRating]" value="associate"
class="hiddenInput">




<div class="formElement">
Weblog to add entry to: <br>
<select id="publicpenFormInput2"
name="formInputs[cbBelongsToWhichPage]">
<option value="x#x#x#blankx#x#x#">No choice made</option>
<option value="3">Home</option>
<option value="8">My photos</option>
</select>



</div>

<p> <a href="createweblogEntriesLongForm.php">Use the long form?</a>
</p>


<div class="formElement">
Type a headline:
<div class="inputBoxTitle"><input id="inputId3" type="text"
name="formInputs[cbHeadline]" value="" class="textInput">


</div></div>




<script language="javascript">




function insertAtCursor(myField) {
var imageName = '';
var path = '';
var myValue = '';
var status = '';

imageName = document.forms['pdsForm'].elements['imagesToInsert'].value;
alert(imageName);

}





function wrapSelectionBold (element) {
var range = document.selection.createRange();
if (range.parentElement() == element) range.text = '<b>' +
range.text + '<\/b>';
}
function wrapSelectionItalic (element) {
var range = document.selection.createRange();
if (range.parentElement() == element) range.text = '<i>' +
range.text + '<\/i>';
}
function wrapSelectionBlockQuote (element) {
var range = document.selection.createRange();
if (range.parentElement() == element) range.text = '<blockquote>'
+ range.text + '<\/blockquote>';
}
function wrapSelectionBigHeadline (element) {
var range = document.selection.createRange();
if (range.parentElement() == element) range.text = '<h1>' +
range.text + '<\/h1>';
}
function wrapSelectionSmallHeadline (element) {
var range = document.selection.createRange();
if (range.parentElement() == element) range.text = '<h4>' +
range.text + '<\/h4>';
}
function wrapSelectionMakeALink (element) {
var range = document.selection.createRange();
address = prompt('What address?', '');
address = '<a href=\"' + address + '\">';
if (range.parentElement() == element) range.text = address +
range.text + '<\/a>';
}
function wrapSelectionInsertImage (element) {
var range = document.selection.createRange();
address = prompt('Add address for image. If the image is on your
site, look in Image Info.', '');
address = '<img src=\"' + address + '\">';
if (range.parentElement() == element) range.text = address +
range.text;
}
</script>
<input type="button" value="bold"
onclick="wrapSelectionBold(this.form.inputId4)" />
<input type="button" value="italic"
onclick="wrapSelectionItalic(this.form.inputId4)" />
<input type="button" value="blockquote"
onclick="wrapSelectionBlockQuote(this.form.inputId 4)" />
<input type="button" value="big headline"
onclick="wrapSelectionBigHeadline(this.form.inputI d4)" />
<input type="button" value="small headline"
onclick="wrapSelectionSmallHeadline(this.form.inpu tId4)" />
<input type="button" value="make a link"
onclick="wrapSelectionMakeALink(this.form.inputId4 )" />
<br>Insert an image: <select id="imagesToInsert"
onchange="insertAtCursor(document.formName.fieldNa me);">
<option value=""></option>
<option value="">No choice made</option>
<option value="unroad_show_1.jpg">Unroad show</option>
<option value="unroad_show_2.jpg">Unroad show 2</option>
<option value="unroad_show_3.jpg">Unroad show 3</option>
</select>




<div class="formElement">
Type your main content: <br/>
<textarea id="inputId5" name="formInputs[cbMainContent]"
class="textareaInput"></textarea>
<p>HTML into symbols? <input type="checkbox" name="usingHtml"
value="y" class="textareaCheckbox"></p>

</div>