SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to set placeholder text on form fields

    Is there a way, I know there is, in which I set initial Values for Form Fields, and when the user clicks inside the field, the initial value is reset

    example:


    <div style="background-color: #999999">
    <p style="text-align: center;"><span style="color: #0000ff;">Fill Out This Form to get a Free Uniform, <br>
    Free Private lesson &amp;
    Free 30 Days of Training!</span></p>
    <form id="rmform" name="rmform" method="post" action="https://addmembers.com/rainmaker/process/">
    <table border="0" cellspacing="3" cellpadding="3" >
    <tr>
    <td width="5%"><input name="SID" type="hidden" id="SID" value="1197" />
    <input name="AutoResponder" type="hidden" id="AutoResponder" value="True" />
    <input name="Tags" type="hidden" id="Tags" value="" />
    <input name="SendTo" type="hidden" id="SendTo" value="XXX@xyz.com" />
    <input name="rmid" type="hidden" id="rmid" value="" />
    <input name="formID" type="hidden" id="formID" value="6BAD62B41BB0E8DA42E62E9A" /></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td ><label for="FName"></label>
    <input name="FName" type="text" id="FName" value="First Name" /> <---------------- User would Click In this Field to enter First Name, but upon clicking "First Name" is cleared out
    <input name="FNameReq" type="hidden" id="FNameReq" value="true" /> </td></tr>
    <tr>
    <td>&nbsp;</td>
    <td><label for="LName"></label>
    <input name="LName" type="text" id="LName" value="Last Name" /> <---------------- User would Click In this Field to enter LAST Name, but upon clicking "Last Name" is cleared out
    <input name="LNameReq" type="hidden" id="LNameReq" value="true" /></td></tr>
    <tr>
    <td>&nbsp;</td>
    <td><label for="Email"></label>
    <input name="Email" type="text" id="Email" value="Email" />
    <input name="EmailReq" type="hidden" id="EmailReq" value="true" /></td></tr>
    <tr>
    <td>&nbsp;</td>
    <td><label for="Phone"></label>
    <input name="Phone" type="text" id="Phone" value="Phone Number" />
    <input name="PhoneReq" type="hidden" id="PhoneReq" value="true" /></td></tr>
    <tr>
    <td colspan="2" align="center">30 Days Free!</td>
    </tr>
    <tr>
    <td colspan="2" align="center"><input id="FlowTags" name="FlowTags" type="checkbox" value="prospect" /></td>
    </tr>
    <tr><td>&nbsp;</td><td><input name="ReturnURL" type="hidden" id="ReturnURL" value="http://hermosaboxingworks.com" /></td></tr><tr><td>&nbsp;</td><td><input type="submit" name="Submit" id="Submit" value="Submit" /></td></tr>
    </table>
    </form>


    My .js Skills are Feeble, but from a class I took awhile back, I do recall a function that would do this, My
    Emailer platform has rendered "First Name JOE BLOW", "Last Name Jebadiah"
    when they entered their information, the end user, but NOT clear out the form field manually.

    Thanks

    Mike

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi mkersgard. Welcome to the forums. (This seemed better as a separate thread.)

    You can do it with JavaScript, but also with HTML5. With the patter, you can just add

    Code:
    placeholder="Last Name"
    etc. to your form inputs.

    However, that won't work in older browsers.

    Let us know if you'd prefer some JS.

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi mkersgard. Welcome to the forums. (This seemed better as a separate thread.)

    You can do it with JavaScript, but also with HTML5. With the patter, you can just add

    Code:
    placeholder="Last Name"
    etc. to your form inputs.

    However, that won't work in older browsers.

    Let us know if you'd prefer some JS.


    Thanks!! Which ever one would be easiest, my .js skills are quite feeble

    thanks

  4. #4
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!! Which ever one would be easiest, my .js skills are quite feeble

    thanks

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mkersgard View Post
    Thanks!! Which ever one would be easiest, my .js skills are quite feeble
    Then use the HTML5 placeholder - it means no JavaScript code at all.

    HTML Code:
    <input type="text" name="username" placeholder="Enter your username">
    When you click in there and start typing, the placeholder then goes away.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Anyhow, now that I'm home, here's a JS example I've found useful. It's from Jeremy Keith's DOM Scripting book.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Placeholder text</title>	
    	
    <script type="text/javascript" >
    
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }
    
    function resetFields(whichform) {
      for (var i=0; i<whichform.elements.length; i++) {
        var element = whichform.elements[i];
        if (element.type == "submit") continue;
        if (!element.defaultValue) continue;
        element.onfocus = function() {
        if (this.value == this.defaultValue) {
          this.value = "";
         }
        }
        element.onblur = function() {
          if (this.value == "") {
            this.value = this.defaultValue;
          }
        }
      }
    }
    
    
    function prepareForms() {
      for (var i=0; i<document.forms.length; i++) {
        var thisform = document.forms[i];
        resetFields(thisform);
        thisform.onsubmit = function() {
          return validateForm(this);
        }
      }
    }
    
    addLoadEvent(prepareForms);
    </script>
    	
    	
    </head>
    
    <body>
    	<form method="post" action="">
    		<label for="name">Name</label><br>
    		<input name="name" type="text" id="name" value="Name"><br>
    		
    		<label for="email">Email Address</label><br>
    		<input name="email" type="text" id="email" value="Email"><br>
    		
    		<label for="phone">Telephone</label><br>
    		<input name="phone" type="text" id="phone" value="Telephone"><br>
    		
    		<input type="submit" name="submitted" value="Send">
    	</form>
    </body>
    </html>


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
  •