SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)

    Highlight Incomplete Fields

    I have a dynamically generated set of forms (PHP) and every question is required. Right now I am using dynamic (PHP generated) Javascript to have a dialog box come up if all of the questions are not filled out. My question is whether or not it is possible to highlight the question(s) that have not been filled out using the same Javascript that I am now?

  2. #2
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you'll want to loop through each element when the user submits the post, verifying each element to see if it is complete, or not. this is a real dirty example, and off the top of my head, so i'm hoping it runs for you the first time. i've highlighted the key parts and replace the alert with whatever you want...maybe you want to turn the field background colors red or something.

    Code:
    <script language="javascript" type="text/javascript">
      function checkform() {
        var i = 0;
         while (document.forms[0].elements[i]) {
     	  if (document.forms[0].elements[i].value == "") { alert("Required"); }
     	  i++;
        }
      }
      </script>
      
      <form method="post" action="send.php" onsubmit="checkform();">
         <!--- form stuff --->
      </form>

  3. #3
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I already have an alert in place. What I want to do is that when someone clicks "Ok" on the alert the questions that are not completed turn red.

  4. #4
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hartmann
    Yeah, I already have an alert in place. What I want to do is that when someone clicks "Ok" on the alert the questions that are not completed turn red.
    so you already have a code similar to the one i put in above, correct?

    if you want to make the element's background red, try this in place of the alert...

    document.forms[0].elements[i].setAttribute("style", "background-color: #FF0000;");

    i'm not getting it to work right in IE, but it works fine in safari and firefox.

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you use NokX's code with a DOM based high lighting line I think it should work... something like

    document.getElementById('boxes_id').style.backgroundColor = '#456544';

    I think I have the syntax right there (the backgroundColor that is) .... you would have to set up ids for all the inputs and then as you are looping thru them if they arent filled out right you would drop into that line and "highlight" them

  6. #6
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a little sample code I did that shows what I mean

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <script language="JavaScript">
    <!--
    	function hightLight()	{
    		document.getElementById('some').style.backgroundColor = '#c0c0c0';
    		}
    //-->
    </script>
    </head>
    
    <body>
    <form method=post action="" onsubmit='hightLight();return false;'>
    <input type="text" name="some" id='some'>
    <input type="submit">
    </form>
    
    </body>
    </html>

  7. #7
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a more "highlited" type..... plus I had a minor boo boo in the last code (even though it did work)

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <script language="JavaScript">
    <!--
    	function hightLight()	{
    		document.getElementById('some').style.backgroundColor = 'YELLOW';
    		}
    //-->
    </script>
    </head>
    
    <body>
    <form method=post action="" onsubmit='hightLight();return false;'>
    <input type="text" name="some" id='some'>
    <input type="submit" value='Highlight'>
    </form>
    
    </body>
    </html>

  8. #8
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another example...

    Code:
    function checkform() {
      	var i = 0; var r = true;
      	while (document.forms[0].elements[i]) {
      		if (document.forms[0].elements[i].value == "") {
     		 document.forms[0].elements[i].setAttribute("style", "background-color: #FF0000;");
      			var r = false;
      		}
      		i++;
      	}
      	return r;
      }
    that way it won't return the form you're trying to send... assuming you have this in your form tag...

    Code:
    <form method="post" action="send.php" onsubmit="return checkform();">

  9. #9
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Complete code

    Code:
    <style>
    /* feel free to change  this */
    .incomplete { border:2px solid red }
    </style>
    <script>
    function isValid(v) {
    	return v.length > 0;
    }
    function validate(form) {
    	var ok = true;
    	for(var i = 0; i < form.elements.length; i++) {
    		var e = form.elements[i];
    		var v = isValid(e.value);
    		e.className = v ? "" : "incomplete";
    		ok = ok && v;
    	}
    	alert(ok)
    	return ok;
    }
    </script>
    
    <form method=post action="" onsubmit="return validate(this)">
    <input type="text"><br><input type="text"><br>
    <input type="text"><br><input type="text"><br>
    <input type="text"><br><input type="text"><br>
    <input type="text"><br><input type="text"><br>
    <input type="submit">
    </form>


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
  •