Form button + img tag [Archive]

telmessos

01-08-2007, 03:08 PM

Hi all,

I have a text area in a form. I am planning to put a button of "Add Image" on the top. When someone clicks on it I want a window to be opened where people can enter the file name. When they enter the file I want the code write [img=thefilenametypedinwindow] where the cursor is.

For example.
If my text in the text area is "This is a test sentence." and the cursor is between the words "a" and "test", and then they click on "Add Image", I want the window opens and when the client type test.jpg and click OK. Then my text in the text area needs to be :

This is a [img=test.jpg] test message

Any idea ??

Thanks

david_kw

01-08-2007, 10:33 PM

I searched and found this post.

http://www.webmasterworld.com/forum91/4686.htm

which allowed me to create.

<html>
<head>
<title>Insert [img] at Cursor</title>
<script type="text/javascript">
function doIt(s) {
var adiv = document.getElementById("adiv");
adiv.innerHTML = s;
}
function addimage(id) {
var textEl = document.getElementById(id);
var name=prompt("Please enter image name","")
if (name!=null && name!="") {
insertAtCursor(textEl, "[img=" + name + "]");
}
}
function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();

//in effect we are creating a text range with zero
//length at the cursor location and replacing it
//with myValue
sel = document.selection.createRange();
sel.text = myValue;
}
//Mozilla/Firefox/Netscape 7+ support
else if (myField.selectionStart || myField.selectionStart == '0') {
//Here we get the start and end points of the
//selection. Then we create substrings up to the
//start of the selection and from the end point
//of the selection to the end of the field value.
//Then we concatenate the first substring, myValue,
//and the second substring to get the new value.
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;
}
}
</script>
</head>
<body>
<div>
<form name="f" action="#">
<textarea name="aboutus" id="aboutus" rows="6" cols="50">Isn't that just wonderful.</textarea>
<input type="button" value="Add Image" onClick="addimage('aboutus');" />
</form>
</div>
</body>
</html>

FYI, often people look to see if any threads are unanswered. I almost didn't read your post since you bumped it and I figured someone answered it already.

david_kw