Changing form inputs?

Forum Moderators: open

Message Too Old, No Replies

Changing form inputs?

Yamaha_R1

8:36 pm on Apr 23, 2005 (gmt 0)

I think this is java, I am not sure.

In vBullitin, when you post, there is a box much like this one.

Then theres buttons like IMG, where a small popup shows, prompts for a link and a title, and when you click okay, it automatically updates this message box.

It does it for links, font colors, and font sizes as well.

So basically, how do I add that to a site? If my customer wanted to click on IMG, then key in a name (or pull down box even better) and automatically update the textarea field?

ACJavascript

11:22 am on Apr 25, 2005 (gmt 0)

Heres a basic way:

function generate(){

var code=prompt("[CODE]XXX[/CODE]","");
document.formname.textname.value+=code;

}
</script>

You will have to replace
formname with your forms name.
textname with the textbox or textarea you want the code in.

rocknbil

3:53 pm on Apr 25, 2005 (gmt 0)

The only problem with that is it adds it to the end of the text block, and if the user wants it somewhere in the text you rely on them to correctly copy and paste it without dropping something important, like a closing tag.

Let's look at the overall task: you basically want to be able to have the user mark up a text block through various buttons or drop-down lists without knowing HTML. :-) I've been up and down this one. There are two ways I've found to select a string of text, and of course those two ways are the Mozilla Way and the IE way. Oddly enough, the IE way (IMO) is easier as they have methods for selecting a range of text in a document, in or out of the text box.

The following code is dropped from an existing project and may need some tweaking, it may not work directly out of its environment. But if you study it you'll see what's going on and how you can make it work.

I'm using drop-down lists for my markup selection. I pass the DD value form object, and slect box object (so I can reset it) to the selectStyle() function. Note the conditional handling for browsers and what's selected in the list, and also how it "selects" the range of text to markup.

<select name="DD" OnChange="javascript:selectStyle(document.forms[0].content,this.options[this.selectedIndex].value),this;">
<option value="">Select Color or style</option>
<option value="color:Black">Black</option>
<option value="color:Blue">Blue</option>
<option value="font-weight:700">Bold</option>
<option value="font-style:italic">Italic</option>
<option value="h3">H3</option>
<option value="h4">H4</option
</select>

var allText = theField.value;

// IE select text range
if (document.selection) {
var selectedText = document.selection;
if (selectedText.type!= 'Text') {
var msg = 'Enter the text to apply style to, or cancel and select text from the text area.'
var b = prompt(msg,'This will be added to the END of your text block.');
if (! b) { if (dd) { dd.selectedIndex = 0; } return; }
theField.value = theField.value + '\n' + span + b + spanclose;
}
else {
var sel = document.selection.createRange();
document.selection.createRange().text = span + sel.text + spanclose;
}
}
//Mozillas select text range
else if (theField.selectionStart) {
var startPos = theField.selectionStart;
var endPos = theField.selectionEnd;
if (startPos == endPos) {
var msg = 'Enter the text to apply style to, or cancel and select text from the text area.'
var b = prompt(msg,'');
if (! b) { if (dd) { dd.selectedIndex = 0; } return; }
theField.value = theField.value + '\n' + span + b + spanclose;
}
else {
theField.value = allText.substring(0, startPos)+
span+theField.value.substring(startPos, endPos)+spanclose+
allText.substring(endPos, theField.value.length);
}
}
// Get a 4+ browser.
else {
msg = 'Dynamic text field editing is not supported in your browser.\n'+
'Enter the text to be marked up below and it will be added at the\n'+
'end of the text block. You will have to cut it from there and\n'+
'paste where you want it.';
var b = prompt(msg,'');
if (! b) { return; }
theField.value = theField.value + '\n' + span + b + spanclose;
}
if (dd) { dd.selectedIndex = 0; }
}

You could use the same methods posted by AC combined with this to insert a link or image inline instead of at the end of the block.

The one thing I haven't figured out yet - let's say the user wants to add a break tag, image, or link: the natural inclination is to simply click in the text and insert it THERE. The problem with my code is that it requires a SELECTION of at least one space - clicking the cursor in doesn't work because nothing's selected. So you have to indicate in your instructions or in alerts that something must be selected.

But it's very very close. :-)

Yamaha_R1

5:00 am on Apr 26, 2005 (gmt 0)

What I really want:
A static pulldown box of avail images (done by php)
A left, right, center radio button.
An 'Insert' button.

Okay. Heres what I did. I extracted the VB script, and heres what it says.

This is for a link, but would work the same kind of way? How do I read the value of my pulldown and radio button, so I can code the script to handle what needs to be placed in the text?

<a href="#" onclick="namedlink('URL')"><img src="images/editor/createlink.gif" alt="Insert Hyperlink" width="21" height="20" border="0" /></a>

And heres the function.

function namedlink(thetype)
{
var extraspace = "";
getActiveText();
var dtext = "";
if (text)
{
dtext = text;
}
else
{
extraspace = " ";
}
linktext = prompt(vbphrase["enter_link_text"], dtext);
var prompttext, prompt_contents;
if (thetype == "URL")
{
prompt_text = vbphrase["enter_link_url"];
prompt_contents = "http://";
}
else
{
prompt_text = vbphrase["enter_email_link"];
prompt_contents = "";
}
var linkurl = prompt(prompt_text, prompt_contents);
if ((linkurl!= null) && (linkurl!= ""))
{
if ((linktext!= null) && (linktext!= ""))
{
AddTxt = "[" + thetype + "=" + linkurl + "]" + linktext + "[/" + thetype + "]" + extraspace;
AddText(AddTxt);
}
else
{
AddTxt = "[" + thetype + "]" + linkurl + "[/" + thetype + "]" + extraspace;
AddText(AddTxt);
}
}
}

Function 2

function AddText(NewCode)
{
if (typeof(theform.message.createTextRange)!= "undefined" && theform.message.caretPos)
{
var caretPos = theform.message.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' '? NewCode + ' ' : NewCode;
caretPos.select();
}
else if (theform.message.selectionStart �� theform.message.selectionStart == '0')
{ // its mozilla and we'll need to re-write entire text
var start_selection = theform.message.selectionStart;
var end_selection = theform.message.selectionEnd;
// fetch everything from start of text area to selection start
var start = (theform.message.value).substring(0, start_selection);
// fetch everything from start of selection to end of selection
var middle = NewCode;
// fetch everything from end of selection to end of text area
var end = (theform.message.value).substring(end_selection, theform.message.textLength);
theform.message.value = start + middle + end;
setfocus();
theform.message.selectionStart = end_selection + middle.length;
theform.message.selectionEnd = start_selection + middle.length;
getActiveText();
AddTxt = "";
return;
}
else
{
theform.message.value += NewCode;
}
setfocus();
getActiveText();
AddTxt = "";
}