SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Form Field-Text Value Color

    Hi All,

    I'm trying to change the value in a text field to red for the validation. (It's one of those forms with an intial value in the text field which is currently got a style attached to it. If they fail validation, by not having anything in the text field, I would like the initial value to turn red from a style in the style sheet.

    Here's a bit of my code for the form:
    *NOTE=the onblur is to make the intial value dissapear on click in the field.

    Code:
    <form action="" method="post" name="form1" id="form1">
          <input name="textfield" type="text" class="bodytext" value="Name" tabindex="1" onfocus="if (this.value=='Name'){this.value='';};return false;" onblur="if (this.value==''){this.value='Name';return false;}"/>
    </form>
    And here is my current javascript, which simply puts an error message beside the field..which i am trying to eliminate, so the field text just turns red.
    it also deals with the ajax.



    Code:
    //Show & Hide div
    function toggleDetails(theDiv) {
    	var currentStyle = document.getElementById(theDiv).style;
    	currentStyle.display = currentStyle.display? "":"block";
    }
    
    //Check if text field empty
    function isEmpty(theTextField) {
       if ((theTextField.value.length==0) || (theTextField.value==null)) return true;
       else return false;
    }
    
    //Send form
    function sendForm() {
    	var contactForm = document.forms[0];
    	var submitError = false;
    	if (isEmpty(contactForm.email)) {
    		document.getElementById("email-error").innerHTML = "Please type your e-mail address";
    		submitError = true;	
    	}
    	if (isEmpty(contactForm.message)) {
    		document.getElementById("message-error").innerHTML = "Please type your message";
    		submitError = true;	
    	}
    
    	if (! submitError) {
    		document.getElementById("message-pbar").style.display = "block";
    		ajax.requestFile = 'http://www.zendurl.com/jon_g/contact.php?name='+contactForm.name.value+"&email="+contactForm.email.value+"&subject="+contactForm.subject.value+"&message="+contactForm.message.value;
    		ajax.onCompletion = updateForm;
    		ajax.runAJAX();
    	}
    }
    
    //Update form inner html
    function updateForm() {
    	eval(ajax.response);
    }
    Please help..!

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html>
    <head>
    <title>Untitled Page</title>
    
    <style type="text/css">
    
    .invalid{
    	color:red;
    }
    
    .initial{
    	color:blue;
    }
    </style>
    <script type="text/javascript">
    
    window.onload=function()
    {
    	document.forms['f'].onsubmit = validate;
    	
    };
    
    function validate()
    {
    	var submitForm = true;
    	initialVals = ["hello", "world"];
    	
    	var elmts = document.forms['f'].elements;
    	for(var i = 0, len = elmts.length; i < len; ++i)
    	{
    		if (elmts[i].type == "text" && elmts[i].value == initialVals[i])
    		{
    			elmts[i].className = "invalid";
    			submitForm = false;
    		}
    	}
    	return submitForm;
    }
    
    
    </script>
    </head>
    <body>
    
    <form name="f" method="post" action="http://www.google.com">
    
    <input class="initial" type="text" value="hello"/>
    <input class="initial" type="text" value="world"/>
    
    <input type="submit" value="Submit" />
    </form>
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Thanks, Now I need help integrating it into the other.

    Hi,
    It seems to be working good now,except for one thing,when they hit submit and fail validation it turns red as supposed to,but then when they enter something into the field and hit submit again it stays red,when it should go back to the blue color. I would also now like to integrate that somehow into the other code.

    I would like to integrate this-->
    Code:
    <script type="text/javascript">
    
    window.onload=function()
    {
    	document.forms['f'].onsubmit = validate;
    	
    };
    
    function validate()
    {
    	var submitForm = true;
    	initialVals = ["hello", "world"];
    	
    	var elmts = document.forms['f'].elements;
    	for(var i = 0, len = elmts.length; i < len; ++i)
    	{
    		if (elmts[i].type == "text" && elmts[i].value == initialVals[i])
    		{
    			elmts[i].className = "invalid";
    			submitForm = false;
    		}
    	}
    	return submitForm;
    }
    
    
    </script>
    into the "red" area of this code.The reason for this is because,on my form it has javascript on it that causes the initial value to dissapear on click,and this is the file to get the ajax to work properly.
    Code:
    //Show & Hide div
    function toggleDetails(theDiv) {
    	var currentStyle = document.getElementById(theDiv).style;
    	currentStyle.display = currentStyle.display? "":"block";
    }
    
    //Check if text field empty
    function isEmpty(theTextField) {
       if ((theTextField.value.length==0) || (theTextField.value==null)) return true;
       else return false;
    }
    
    //Send form
    function sendForm() {
    	var contactForm = document.forms[0];
    	var submitError = false;
    	if (isEmpty(contactForm.email)) {
    		document.getElementById("email-error").innerHTML = "Please type your e-mail address";
    		submitError = true;	
    	}
    	if (isEmpty(contactForm.message)) {
    		document.getElementById("message-error").innerHTML = "Please type your message";
    		submitError = true;	
    	}
    
    	if (! submitError) {
    		document.getElementById("message-pbar").style.display = "block";
    		ajax.requestFile = 'http://www.zendurl.com/jon_g/contact.php?name='+contactForm.name.value+"&email="+contactForm.email.value+"&subject="+contactForm.subject.value+"&message="+contactForm.message.value;
    		ajax.onCompletion = updateForm;
    		ajax.runAJAX();
    	}
    }
    
    //Update form inner html
    function updateForm() {
    	eval(ajax.response);
    }


    Thanks for any help in advance.

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my form it has javascript on it that causes the initial value to dissapear on click
    Then also set the color to blue in the onclick event handler.

    I would like to integrate this-->

    into the "red" area of this code.
    I charge $120/hr for free web programming services.

  5. #5
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Code Integration- Thanks.

    7stud,

    I will keep in mind you charge $120hr if I ever need extensive programming required. As for now I wil continue to post for free help with other members as on how to integrate this code.

    Thanks for your help.


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
  •