Web Analytics Made Easy -
StatCounter Press a button to put some text say "Hello there" into a text box - CodingForum

Announcement

Collapse
No announcement yet.

Press a button to put some text say "Hello there" into a text box

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Press a button to put some text say "Hello there" into a text box

    Hi there,

    can you please help.

    I want a simple code that when a button is pressed it populates a text box with some predetermined text say "HelloThere"

    Then another button that will populate the same text box with another different value say "How are you"

    I know that a radio button set up could do it but i want to have a couple of independent buttons do it.

    Many thanks

    Neil

  • #2
    Here's one way:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Value of buttons appearing in text box</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    body {
    background-color:white;
    }
    label {
    display:block;
    margin:10px;
    }
    #theform input {
    width:15em;
    background:transparent;
    }
    </style>
    <script type="text/javascript">
    function getElementsByIdTagAndClassName(id,tag,cname) {
     var tags=document.getElementById(id).getElementsByTagName(tag);
     var cEls=new Array();
     for (i=0; i<tags.length; i++) {
      var rE=new RegExp("(^|\s)" + cname + "(\s|$)");
       if (rE.test(tags[i].className)) {
       cEls.push(tags[i]);
       }
      }
     return cEls;
    }
    function fillBox(id,tag,cname,target) {
    var buttons=getElementsByIdTagAndClassName(id,tag,cname);
    for (j=0; j<buttons.length; j++) {
    	buttons[j].onclick=function() {
    			document.getElementById(target).value=this.value;
    		}
    	}
    }
    window.onload=function() {fillBox('theform','input','button','hobbyinput')}
    </script>
    </head>
    <body>
    <form name="theform" id="theform">
    <fieldset>
    <legend>Legend</legend>
    <label>Which of these do you most enjoy? <input type="text" id="hobbyinput" /></label>
    <label><input type="button" class="button" value="Crocodile hunting" /></label>
    <label><input type="button" class="button" value="Playing with wild dogs" /></label>
    <label><input type="button" class="button" value="Reading Schopenhauer" /></label>
    </fieldset>
    </form>
    </body>
    </html>
    bonrouge

    Comment


    • #3
      You can get a bit simpler than that. Manipulation of a div element:

      Code:
      JavaScript/:
      function divBox(message) {
        document.getElementById("divbox").firstChild.data = message;
        }
      
      HTML:
      <div id="divbox">&nbsp;</div>
      <input type="submit" value="HelloThere" onclick="divBox('HelloThere');">
      <input type="submit" value="How are you" onclick="divBox('How are you');">
      Manipulation of an input element:

      Code:
      JavaScript/:
      function inputBox(message) {
        document.getElementById("inputbox").value = message;
        }
      
      HTML:
      <input id="inputbox" type="text">
      <input type="submit" value="HelloThere" onclick="inputBox('HelloThere');">
      <input type="submit" value="How are you" onclick="inputBox('How are you');">

      Comment


      • #4
        That's definitely a lot simpler. The point of my longer script was to keep the javascript ('onclick="..."') out of the html and to make the function more universally applicable, meaning that the function can be re-used by changing the values in the onload event rather than in the actual function itself. Separation of style, structure and function seems like a good way to go. What do you think? Is it worth the extra code to do what I'm going for there?
        Last edited by BonRouge; Sep 24, 2006, 08:39 PM.
        bonrouge

        Comment


        • #5
          Originally posted by BonRouge View Post
          That's definitely a lot simpler. The point of my longer script was to keep the javascript ('onclick="..."') out of the html and to make the function more universally applicable, meaning that the function can be re-used by changing the values in the onload event rather than in the actual function itself. Separation of style, structure and function seems like a good way to go. What do you think? Is it worth the extra code to do what I'm going for there?
          Well, I'm still a JS newb so what you coded looks overcomplicated to me (and part of it I don't understand). I could do the separation thing too except that Internet Explorer is too dumb to get it:

          Code:
          JavaScript/:
          function divBox(message) {
            document.getElementById("divbox").firstChild.data = message;
            }
          function inputBox(message) {
            document.getElementById("inputbox").value = message;
            }
          function addEvents() {
            document.getElementById("buttonA").setAttribute("onclick","divBox('HelloThere');");
            document.getElementById("buttonB").setAttribute("onclick","divBox('How are you');");
            document.getElementById("buttonC").setAttribute("onclick","inputBox('HelloThere');");
            document.getElementById("buttonD").setAttribute("onclick","inputBox('How are you');");
            }
          window.onload = addEvents;
          
          HTML:
          <div id="divbox">&nbsp;</div>
          <input id="buttonA" type="submit" value="HelloThere">
          <input id="buttonB" type="submit" value="How are you">
          <input id="inputbox" type="text">
          <input id="buttonC" type="submit" value="HelloThere">
          <input id="buttonD" type="submit" value="How are you">

          Comment


          • #6
            Arbitrator,
            The first function in my example does what it says - it makes an array of the elements with the same tag and class names that are descendants of another element (here, the form). The second function ('fillBox()') attaches an onclick event to all those elements.
            Your second example here would, as you say, attach the events in good browsers, but personally, I think it's better if functions are transferable, meaning that you can take the function, put it on a different page and still use it. I took the first function in my example from another page, which shows that it is easily transerable.
            Anyway, it's not really a big deal, I just wanted to explain where I was coming from.
            bonrouge

            Comment

            Working...
            X