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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Generating buttons for <b> and </b>

    <textarea name="message"
    cols="90"
    rows="20"
    wrap="virtual"></textarea>

    I have the above textarea to make users to input their messages.

    Let's suppose the followings:

    (1) a user is entering a message, i.e. " My name is John".

    (2) He want to focus on his name "John" in the message.

    (3) If he knows HTML, he can make his message "My name is <b>John</b>".

    (4) But he doesn't know HTML. or although he knows it a little it's not easy to enter <b> and </b>


    So, I like to make two buttons.

    One is for <b> and the other is for </b>.

    After he enters "My name is", he clicks the <b> button.
    And after he enters " John", He clicks the </b> button.
    Then, it'll automatically generate <b> and </b>, so the message will be "My name is <b>John</b>.


    Can I do that with javascript?


    Thanks in Advance
    Last edited by joonstar; 12-21-2003 at 03:13 AM.

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure. Give your textarea an id, then:
    Code:
    function addstuff(towhere, addwhat) {
      document.getElementById(towhere).innerHTML += addwhat}
    Then add onclick="addstuff('id', '<b>');" and onclick="addstuff('id', '</b>');" to the respective buttons.

    If that doesn't work, try calling addstuff('id', '&lt;b&gt;');
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <script language="javascript">	
       function addstuff(towhere, addwhat) {
       document.getElementById(towhere).innerHTML += addwhat}
    </script>
    
    <input type="submit" value="<b>" onclick="addstuff
    ('BBBB', '<b>');">
    
    <input type="submit" value="</b>" onclick="addstuff
    ('BBBB', '</b>');">
    
    
    
    					
    <form action="action.php>
    
    <textarea name="message" cols="76 id="BBBB" rows="20> </textarea>	      
    <input type="submit" value=" click ">
    </form>
    What's wrong in my code?
    Last edited by joonstar; 12-21-2003 at 10:10 PM.

  • #4
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There are a few main problems with your code:
    • The JavaScript code is incorrect; all HTMLInputElement objects have a value property which is what you're supposed to alter to change the textual content of it. Using innerHTML isn't correct, however, some browsers (Mozilla for one) apparently map innerHTML to value.
    • Not exactly an error, but you don't need to use document.getElementById to do this type of thing, it will work in many more browsers if you use a more widely supported way of accessing form elements.
    • Many of your attributes are missing a closing quote.

    Here's the fixed code:
    Code:
    <script type="text/javascript">
    //<![CDATA[	
    	function appendValue(str)
    	{
    		document.forms[0]['t'].value += str;
    	}
    //]]>
    </script>
    Code:
    <form action="action.php">
    	<div>
    		<input type="button" value="<b>" onclick="appendValue('<b>');" />
    		<input type="button" value="</b>" onclick="appendValue('</b>');" />
    		<hr />
    		<textarea name="message" id="t" cols="76" rows="20"></textarea>
    		<hr />
    		<input type="submit" value="Submit" />
    	</div>
    </form>
    You may also want to consider checking out Midas.

    Edited: Code is now fixed.
    Last edited by fredmv; 12-22-2003 at 02:29 AM.

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <script type="text/javascript">
    //<![CDATA[	
    	function appendValue(str)
    	{
    		document.forms[0]['t'].value += str;
    	}
    //]]>
    </script>
    <form action="action.php">
    	<div>
    		<input type="button" value="<b>" onclick="addstuff('<b>');" />
    		<input type="button" value="</b>" onclick="addstuff('</b>');" />
    		<hr />
    		<textarea name="message" id="t" cols="76" rows="20"></textarea>
    		<hr />
    		<input type="submit" value="Submit" />
    	</div>
    </form>

    I made the above code as a test.
    There is no other code except the above.

    Altough I click the <b> or </b> button on the way of entering message, the <b>, o </b> isn't added to the message. and I think some javascript errors happens.


    What is wrong in my application of your code?

  • #6
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Very sorry about that. I didn't change the name of the function calls inside the event handlers. Check the above (fixed) code.

  • #7
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Posting Permissions

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