SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    button to insert text into a textarea

    ok, I think I am just retarded but I cannot get this effect to work correctly (or at all).

    I am trying to make something similar to the button above the message block here. Like hitting the "B" button above adds the vbcode to this block. I have started writing a function... but I get errors.

    Code:
    function insert_help(theForm, theTarget, color)
    {
        var code = '<div class="sub_heading_1" style="color: '+color+';"';
        theForm.theTarget.value += "code";
        theForm.theTarget.focus();
    }
    and here is how I am using it:

    Code:
    Here's the form:
            <form name="add_orgs_page" method="post" action="<?=$PHP_SELF;?>">
                <b>Title</b>:<br />
                <input type="text" name="title" onFocus="this.style.background='yellow'" onBlur="this.style.background='#eee';"/><br /><br />
    
                <b>Content</b>:<br />
                <textarea name="data" onFocus="this.style.background='yellow'" onBlur="this.style.background='#eee';"></textarea><br /><br />
                
                <b>Group</b>:<br />
                <select name="group">
                    <?php org_select(''); ?>
                </select><br /><br />
    
                <b>Image</b>:<br />
                <input type="file" name="img" style="width: 400px;" onFocus="this.style.background='yellow'" onBlur="this.style.background='#eee';" /><br /><br />
    
                <b>Quote</b>:<br />
                <input type="text" name="quote" onFocus="this.style.background='yellow'" onBlur="this.style.background='#eee';" /><br /><br />
    
                <input type="submit" name="sub" value="Add" class="button" />
            </form>
    
    Here is the button:
    <input type="button" class="button" value="Add Header" onClick="insert_help('add_orgs_page', 'content', '#795D13');" /><br />
    Yes, there is some PHP in there. The PHP is working fine. I'm not new to programming in general, just new to javascript and the DOM.

    The button I am trying to make should insert <div class="sub_heading_1" style="color: #795D13"> into the textarea in the form.

    Appreciate any help!

    [Z]
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  2. #2
    SitePoint Zealot Drew630's Avatar
    Join Date
    Nov 2001
    Location
    Maryland
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, try switching around your Quotes and Double Quotes in the first line of your function first.
    Also, you are missing the ">" in here.

    Code:
    function insert_help(theForm, theTarget, color)
    {
        var code = "<div class='sub_heading_1' style='color: " + color + ";>'";
        theForm.theTarget.value += "code";
        theForm.theTarget.focus();
    }
    Try that for starters. Otherwise, I see no glaring errors. Post if you still have problems.

    Drew
    ~Drew

    There Is No Greater Joy Than Soaring High On The Wings Of Your Dreams, Except Maybe The Joy Of Watching A Dreamer Who Has Nowhere To Land But In The Ocean Of Reality.

  3. #3
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a thread on a similar topic, see if any of this helps out:

    http://www.sitepointforums.com/showt...b%3E%3C%2Fb%3E

  4. #4
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my function now:
    Code:
    function insertHeading(theForm, theTarget, color)
    {
    theForm.theTarget.value = theForm.theTarget.value + '<div class="sub_heading_1" style="color: #' + color + ';">';
    }
    I get the error:
    'theTarget' is null or not an object
    The thread you pointed me too was very similar, except I am trying to pass the form and target objects to my function. It doesn't seem to be taking the values.

    Any ideas?

    Appreciate the help so far!

    [Z]
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  5. #5
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by ZuulJin
    Here is my function now:
    Code:
    function insertHeading(theForm, theTarget, color)
    {
    theForm.theTarget.value = theForm.theTarget.value + '<div class="sub_heading_1" style="color: #' + color + ';">';
    }
    I get the error:


    The thread you pointed me too was very similar, except I am trying to pass the form and target objects to my function. It doesn't seem to be taking the values.

    Any ideas?

    Appreciate the help so far!

    [Z]
    I was able to find your error. You have no form element named content. It is called data. Now I am not sure if you want the wording placed within the textarea or if you want the background changed. I was able to get it more or less working. you can keep playing if you like.

    Use this for your onclick
    onClick="insert_help('document.add_orgs_page', 'data', '#795D13');"

    This is the remade function. Like I said this currently changes the background colour and doesn't actually input the string. sorry I don't have more time to play. Good luck
    Code:
    function insert_help(theForm, theTarget, color)
    {
        var code = "<div class='sub_heading_1' style='color: "+color+"'>";	
        objRef=eval(theForm+"."+theTarget)
    	objRefFin = code+objRef.value+"</div>";	
    	
    }
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  6. #6
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, your function helped a lot. I wasn't aware of that eval() function. That was the key. My function works this way:

    Code:
    function insert_help(theForm, theTarget, color)
    {
    var code = '<div class="sub_heading_1" style="color: '+color+';"></div>';
    objRef = eval(theForm+"."+theTarget);
    objRefFin = objRef.value += code;
    }
    My intentions are to make this a generic function. This code is written inside a .js file and is included into the pages like this:
    <script type="text/javascript" language="javascript" src="functions.js">
    However, I need a little bit more out of this function. I basically want it to be able to post a string of html/css to a form object. So I rewrote the function like this:
    Code:
    function insert_help(theForm, theTarget, code)
    {
    objRef = eval(theForm+"."+theTarget);
    objRefFin = objRef.value += code;
    }
    That looks like it should work. However, my first hurdle is how do I pass the code to the function? First I tried this way:

    Code:
    <input type="button" onClick="insert_help('document.add_orgs_page', 'data', '<div class="sub_heading_1" style="color: #795D13;"></div>');" />
    But that caused problems with quote's (which broke the input button). So I tried creating a variable in between the script tags in the html header (the same script tags that include the .js file).

    Code:
    <script type="text/javascript" language="javascript" src="../resources/js/admin.functions.js">
    var header = '<div class="sub_heading_1" style="color: #795D13;"></div>';
    </script>
    
    and then using the variable like this:
    
    <input type="button" onClick="insert_help('document.add_orgs_page', 'data', heading);" />
    But that gives me another error. 'heading' undefined. I would prefer to be able to set a variable in the header with the code information. Is there something I need to do with the onLoad event to init the variables I set in the header?

    Thanks for the help!

    [Z]
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  7. #7
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript" language="javascript" src="../resources/js/admin.functions.js">
    var header = '<div class="sub_heading_1" style="color: #795D13;"></div>';
    </script>
    
    and then using the variable like this:
    
    <input type="button" onClick="insert_help('document.add_orgs_page', 'data', heading);" />
    [Z] [/B][/QUOTE]

    ...you will kick yourself for this one. I have bolded the two variables.

    There is no heading variable. You called it header. Either change the one passing in the function or the original variable.

    Hope that helps.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  8. #8
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm even dumber because I rewrote that stuff here. In the actual code I do have header as the variable for both... ;( And it still says header is undefined. I'm starting to think I need to somehow initialize the variables when the page loads... How do I do that?

    Thanks for everything...

    [Z]
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  9. #9
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by ZuulJin
    I'm even dumber because I rewrote that stuff here. In the actual code I do have header as the variable for both... ;( And it still says header is undefined. I'm starting to think I need to somehow initialize the variables when the page loads... How do I do that?

    Thanks for everything...

    [Z]
    Well you should have to. Try this first. (if it doesn't work try the second.

    Seperate your <script> tags.
    Code:
    <script type="text/javascript" language="javascript" src="../resources/js/admin.functions.js"></script>
    <script language="javascript1.2">
    <!--
    var header = '<div class="sub_heading_1" style="color: #795D13;"></div>';
    //-->
    </script>
    I don't think you can actually define things in an SRC <script>. But if this still doesn't work

    <body onload="init()">

    Then within the script (you may still have to seperate them)

    function init()
    {
    var header=" ... ";
    }

    BEst of luck
    [/code]
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  10. #10
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, right before you replied I did EXACTLY what you said... with the init() function. But that still didn't work. HOWEVER! Using separate <script> tags does work.

    Wonder why it has to be that way?

    Thanks for you help! It's now working as I intended.

    [Z]
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  11. #11
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by ZuulJin
    Heh, right before you replied I did EXACTLY what you said... with the init() function. But that still didn't work. HOWEVER! Using separate <script> tags does work.

    Wonder why it has to be that way?

    Thanks for you help! It's now working as I intended.

    [Z]
    I used to wonder that myself...and to be honest the only thing I could think of is that by placing the SRC in the <script> tag you have made it an exclsive link to an outside file. Which means it can't do anything else. But really that is just a guess based on experience. I never cared enough to search for why .

    BTW congrats on getting it going.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  12. #12
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just HAD to know why... so I went searching and here is what I found:
    JavaScript statements within a <SCRIPT> tag with a SRC attribute are ignored unless the inclusion has an error. For example, you might want to put the following statement between the <SCRIPT SRC="..."> and </SCRIPT> statements:

    document.write("Included JS file not found");
    I got this from the devedge by Netscape.

    Well, now we know... Guess it is a way to allow you to print an error if the file doesn't include correctly.

    Good tidbit of knowledge to have. Wish I knew it earlier.

    [Z]
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  13. #13
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well thats interesting. Thanx I will have to use that from now on.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.


Bookmarks

Posting Permissions

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