Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Can this work

  1. #1
    New Coder
    Join Date
    Feb 2003
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

    PHP Code:
    <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.

    PHP Code:
    <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

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    <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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Feb 2003
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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

  • #5
    New Coder
    Join Date
    Feb 2003
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Quote Originally Posted by ojoonline View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by felgall View Post
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •