Can this work

Hi,

I found this perfect script in this forum and need to know whether it can be executed by a button outside the form tag.

Currently, it inserts at the cursor in a textarea when a button in the same form is clicked.


<script type="text/javascript">
function insert(el,ins) {
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}
</script>

<form>
<input type="button" value="hello" onclick="insert(this.form.ta,'hello')">
<input type="button" value="my freind" onclick="insert(this.form.ta,'my friend')">
<br />
<textarea rows="7" cols="30" name="ta">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea>
</form>


I have been using this code below where the button can be outside the form tags but always puts the inserted text at the end - which is not what I need. I need the button to put the text wherever the cursor is.


<script>
function inser1() {
document.getElementById('ip').value+= '<firstName>'
}
</script>

<input id="ins1" type="button" value="Add first name" class="personalisedbutton" onClick="inser1()" name="button">

<form>
<textarea id="ip" name="MessageText" class="halfFormMod"></textarea>
</form>



Any help greatly appreciated :-)

thanks,

jo

<input> tags are invalid outside of <form></form> tags. If you want a button that isn't part of a form then use a <button></button> tag for it instead.

Hi felgall,

Thank for your reply. The second block of code with the <input> tag outside the form tags actually works though so your comment doesn't really help. I have tried the first block of code with the button outside the form tags and it doesn't work.

I'm not so great at javascript but I reckon that the first block needs to be told to look at the id, eg from the second block: getElementById

Can someone help me modify the first block?

thanks,

jo

There are other ways to do it but I did it by naming the form "f" then pass document.f.ta to the function from a button tag as suggested by felgall


<script type="text/javascript">
function insert(el,ins) {
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}
</script>

<button onclick="insert(document.f.ta, '--outside form--');">From Outside</button>
<form name="f">
<input type="button" value="hello" onclick="insert(this.form.ta,'hello')">
<input type="button" value="my freind" onclick="insert(this.form.ta,'my friend')">
<br />
<textarea rows="7" cols="30" name="ta">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea>
</form>


david_kw

Thank you, thank you, thank you! That works perfectly. I don't know if I'll ever learn to write really clever js... but I just want those of you who already do and share your knowledge to know that it is so much appreciated. That script has just improved the usability of my form no end.

Thanks!

jo

The second block of code with the <input> tag outside the form tags actually works though so your comment doesn't really help.

That code would only work in some browsers because there are browsers that try to make sense of garbage code that doesn't follow the standards as well as browsers that will ignore tags that are in places they shouldn't be. It is always easier to get your page to display and work properly on ALL browsers when your code is valid.

<input> tags are invalid outside of <form></form> tags. If you want a button that isn't part of a form then use a <button></button> tag for it instead.So far as I know, there is no prohibition against putting an input element outside of a form element. I believe that the form element is totally optional. It validates anyway and I haven’t seen anything in the HTML 4.01 spec stating otherwise.

Of course, that’s not to say that the code is correct either. Assuming HTML, there are some errors such as:


The form element is missing the required action attribute.
The form element can’t have inline children such as input, textarea, or br elements.
The required type attribute on the script element is missing.
That solidus (/) character in the br tag is illegal.

Assuming XHTML, the above errors, except the last, apply in addition to these:

The script contains unescaped ampersands (&).
The script contains an unescaped less‐than sign (<).
Elements are not closed.
“onClick” is not valid since attribute names must be lowercase.

I double checked the standards and it says:

The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.

So I suppose input tags outside of forms are allowed but they are then 100% reliant on Javascript for their processing and will do absolutely nothing with Javascript disabled except for confusing people and so would be against assessibility guidelines rather than against standards. The button tag makes more sense to use outside of a form than the other form tags since you can wrap that around a link and still have the link work even if Javascript is disabled, it is the only form related tag that can work outside of a form without Javascript. That would explain why I have remembered it as never use form related tags except buttons unless enclosing them inside a form.