prepopulate a form, then erase it when the user clicks on that field

gdubs12345

gdubs12345

New member
Oct 2, 2006
1,712
9
0
ive been searching for a while, but cant figure this out.

I have a form built where i need the person to enter their phone # with no dashes or spaces.
I wanted to prepop the phone # field with
(example:7141112222), then remove it when the user clicks on that field.
Anyone know how to set this up?

thanks
 


gdubs12345 said:
ive been searching for a while, but cant figure this out.

I have a form built where i need the person to enter their phone # with no dashes or spaces.
I wanted to prepop the phone # field with
(example:7141112222), then remove it when the user clicks on that field.
Anyone know how to set this up?

thanks
Click to expand...

I'm using digitalBush Masked Input Plugin on one project. It's slightly different than what you're asking for but you might like it better.

FWIW I'm split testing it against not having anything and it's performing identically, but has the advantage of validating the input.

Sean
 
ozonew4m said:
is this what your looking for?

HTML: 
<input type="text" name="name" size=16 value="Enter your name" onFocus="javascript:this.value=''" />
source:
Javascript - Delete a field of a form when clicking (focus)
Click to expand...

Except if the user inputs a number, then goes back to edit it, it will delete their existing input.

This is what the OP is trying to do...
Code: 
<input type="text" name="phone" value="7141112222" onFocus="javascript:if(this.value=='7141112222'){this.value='';}" />

However, you should let the user input their phone number however they want, then clean it up on the server side once they submit the form. Trim all the non numerical characters out, chop the 1 off the front if it's there... then see if it = 10 characters... if not, alert the user and have them resubmit.
 
ozonew4m said:
is this what your looking for?

HTML: 
<input type="text" name="name" size=16 value="Enter your name" onFocus="javascript:this.value=''" />
source:
Javascript - Delete a field of a form when clicking (focus)
Click to expand...

The `javascript:` prefix is unnecessary. Also, as others have pointed out, it will clear the value even after a user enters their own value.

This is how I normally do this kind of thing (demo). I've written a small plugin (for jquery) that shows or hides a `label` that is positioned over an input field depending on whether or not that input has a value (e.g.: empty or not).
 
kyleirwin said:
the overhead of jquery is totally unnecessary for something as trivial as this.
Click to expand...

...if that were the only thing that you were using it for. It's incredibly likely that jQuery or some other JavaScript library is already included. The code is dead simple; doing it in vanilla JavaScript or porting it to another library would take only a couple of minutes.
 
if you're using jquery anyway, put this snippet in your <head>, then just add class="swap" and value="default value here" to all your fields
also, you can add css styles for "input.swap.inFocus" to style the boxes that are focused (i make "input.swap" have lightly contrasting text, and "input.swap.inFocus" more readable)
Code: 
<script>
  $(function() { //onLoad
    // "Swap" boxes
    swap_val = [];
    $(".swap").each(function(i){
      swap_val[i] = $(this).val();
      $(this).focusin(function(){
        if ($(this).val() == swap_val[i]) {
          $(this).addClass('inFocus');
          $(this).val("");
        }
        }).focusout(function(){
        if ($.trim($(this).val()) == "") {
          $(this).removeClass('inFocus');
          $(this).val(swap_val[i]);
        }
      });
    });
  });
</script>

brief edit, for arguments sake -- how much overhead is jquery, really? when 90% of users have at least 512mb ram, when even microsoft has employed someone solely to make sure IE6 dies and stays dead, when a 10k javascript library can render swfs, even streaming audio/video and "the browser wars" is all about who parses javascript the fastest, you can include a hosted version of jquery from (jquery, google, yahoo, etc, etc) and the files are already cached on *everyone's* browser, is it really that much overhead, to justify the horror that is writing javascript WITHOUT jquery?
 
You must log in or register to reply here.
Top Bottom