SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Default text in forms

    I want my forms to have the text label in side the field. For example, a text area would say "Name". Once the field is clicked the text label would disappear. Reappearing if the field is left without text entered.

    Basically, just like they do in the comment fields as psdtuts.com...

    Thanks for the help!

  2. #2
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found this:

    HTML Code:
    defaultvalue="Describe your application/needs..."
    but it doesn't seem to do anything for me...

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those disappearing texts are the default value of the input field, replaced with an empty value by a javascript on focus and then replacing the empty value (if it still is empty) with the same as the default value on blur.

    HTML Code:
    <input id="name" name="name" type="text" value="Name" onBlur="this.value=(this.value=='') ? 'Name' : this.value;" onFocus="this.value=(this.value=='Name') ? '' : this.value;">
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Erik.

    My only issue is that for the form I already have a "value" as this form field is emailed to me...

    HTML Code:
    value="<?PHP ECHO $_POST[SUBJECT]; ?>"

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just echo that value as the default.

    HTML Code:
    <input id="name" name="name" type="text" value="<?php echo $_POST[SUBJECT]; ?>" onBlur="this.value=(this.value=='') ? '<?php echo $_POST[SUBJECT]; ?>' : this.value;" onFocus="this.value=(this.value=='<?php echo $_POST[SUBJECT]; ?>') ? '' : this.value;">
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    erik, thanks, but I think you misunderstood. I want it to say "Name" by default, but the form has
    HTML Code:
    value="<?PHP ECHO $_POST[NAME]; ?>"
    This is used to capture the value the user inputs, not grab a variable from a database. My predicament is that the "value" attribute is already being used for this, so how can I have a default, non dynamic text in the box, such as just "Your Name" rather than "$_POST[NAME] which is the value that the user fills in.

    Sorry if that's really confusing! Maybe I just need a better form mail script!

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't. The value attribute is what is displayed in the input field.
    Birnam wood is come to Dunsinane

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is used to capture the value the user inputs, not grab a variable from a database. My predicament is that the "value" attribute is already being used for this, so how can I have a default, non dynamic text in the box, such as just "Your Name" rather than "$_POST[NAME] which is the value that the user fills in.

    Sorry if that's really confusing! Maybe I just need a better form mail script!
    It is somewhat confusing. ...To me at least.

    Guess you have the receiving php-script valuating the form, and if failing it will user-friendly return the form with entered correct data refilled.

    If so, you only need to add a condition to the php-script to echo "Your Name" if the array $_POST[NAME] is not set.

    Then revise the java-script in the input tag to use that "default" value on focus/blur:
    HTML Code:
    <input id="name" name="name" type="text" value="<?php echo $_POST[NAME]; ?>" 
    onBlur="this.value=(this.value=='') ? 'Your Name' : this.value;" 
    onFocus="this.value=(this.value=='Your Name') ? '' : this.value;" />
    Happy ADD/ADHD with Asperger's

  9. #9
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Erik! Working great, just one issue... on the page load the default text is not displayed. It only appears when I click in the field, is there a way to have the labels load with the page?

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JonParks
    Thanks Erik! Working great, just one issue... on the page load the default text is not displayed. It only appears when I click in the field, is there a way to have the labels load with the page?
    I guess you have not set a default value. In that case the input value is empty from start but then the value is inserted on blur.

    On load the input should have the default value. If form is submitted with error and returned the input should have the returned value.

    In case you are all new to php and have no idea how to get the default value from start, you can try this code in the page (no offense by the newbe comments):
    Code:
    Place the script anywhere before the input
    
    <?php
    $defaultvalue = 'Your Name'; // store a default value
    // detect if form was submitted and use entered value or use the default value 
    if (isset($_POST['name'])){ // check if POST variable is set.
        $namevalue = $_POST['name']; // if true, get value and store it
    }
    else { // if false, the page is first loaded
        $namevalue = $defaultvalue; // then set it to the default value
    }
    ?>
    
    Now use the variable $namevalue to set the input value
    
    <input id="name" name="name" type="text" value="<?php echo $namevalue; ?>" 
    onBlur="this.value=(this.value=='') ? 'Your Name' : this.value;" 
    onFocus="this.value=(this.value=='Your Name') ? '' : this.value;" />
    If I guessed your settings right, .
    Happy ADD/ADHD with Asperger's

  11. #11
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Erik! It's working perfectly now except for the <textarea>.

    Here is what I'm trying to use:

    HTML Code:
    <p><textarea name="COMMENT" class="commentarea" cols="60" rows="10" tabindex="5" value="<?php echo $commentvalue; ?>" size="40" tabindex="1" onBlur="this.value=(this.value=='') ? 'Describe your application and needs' : this.value;" 
    onFocus="this.value=(this.value=='Describe your application and needs') ? '' : this.value;" /></textarea>
    </p>

  12. #12
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have some errors in the textarea code.

    The causing error is; the textarea value is not an attribute, but is between the tags.

    It should be like this:
    HTML Code:
    <p>
    <textarea name="COMMENT" class="commentarea" cols="60" rows="10" tabindex="5" onBlur="this.value=(this.value=='') ? 'Describe your application and needs' : this.value;"  onFocus="this.value=(this.value=='Describe your application and needs') ? '' : this.value;"><?php echo $commentvalue; ?></textarea>
    </p>
    Happy ADD/ADHD with Asperger's

  13. #13
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In business! thanks again!


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
  •