CODEWITHSUNDEEP
javascripthtmldom-events
mahesh
mahesh

Reputation: 274

How do I add in one single html file

I want to bind up the below script and form code in one html how do I go about it? I think this code will give me a blank value when nothing gets displayed?

<form method="post" action="contactengine.php">
    <input type="textbox" class="default-value" name="Name" id="Name" value="Full Name">

    <input type="textbox" class="default-value" name="Email" id="Email" value="Email">

    <input type="submit" name="submit" id="submit" value="Submit" class="submit-button" />
</form>

and

$('.default-value').each(function() {
    var default_value = $(this).val();
    $(this).css('color', '#746F66'); // this could be in the style sheet instead
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
            $(this).css('color', 'black');
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            $(this).css('color', '#746F66');
            this.value = default_value;
        }
    });
});

Upvotes: 1

Views: 78

Answers (2)

Anurag-Sharma
Anurag-Sharma

Reputation: 4398

hey u can try this : - 

<script type="text/javascript">
 $(function(){
 $('.default-value').each(function() {
var default_value = $(this).val();
$(this).css('color', '#746F66'); // this could be in the style sheet instead
$(this).focus(function() {
    if(this.value == default_value) {
        this.value = '';
        $(this).css('color', 'black');
    }
});
  $(this).blur(function() {
    if(this.value == '') {
        $(this).css('color', '#746F66');
        this.value = default_value;
    }
  });
});
});
 </script>
<body>
<form method="post" action="contactengine.php">
<input type="textbox" class="default-value" name="Name" id="Name" value="Full Name">

<input type="textbox" class="default-value" name="Email" id="Email" value="Email">

<input type="submit" name="submit" id="submit" value="Submit" class="submit-button" />
</form>
</body>

Upvotes: 4

mohkhan
mohkhan

Reputation: 12305

Add this snippet at the end of your HTML file.

<script type="text/javascript">
$(function(){

$('.default-value').each(function() {
    var default_value = $(this).val();
    $(this).css('color', '#746F66'); // this could be in the style sheet instead
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
            $(this).css('color', 'black');
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            $(this).css('color', '#746F66');
            this.value = default_value;
        }
    });
});

});
</script>

Upvotes: 2

Related Questions