SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Comparing text fields in real time

    Hi all,

    I have two text boxes and I want to compare the values entered into both of them in real time without sending any data to the server hence why I thought javascript would be the best langauge since is client side.

    If the values entered into the text boxes are the same I want an error message or a message box to be displayed stating this is not allowed and to ask the user to change one of the values. As soon as the values are different the user can submit the form

    Any help would be great

    Thanks

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    something like:
    Code:
    <script type="text/javascript">
    	
    	function compare() {
    		
    		var box1 = document.testForm.box1.value;
    		var box2 = document.testForm.box2.value;
    		
    		if(box1 == box2) {
    			alert('The contents are the same');
    			return false;
    		}
    		return true;
    	}
    
    </script>
    
    <form name="testForm" id="testForm" method="post" action="">
    	<textarea name="box1"></textarea><br />
    	<textarea name="box2"></textarea><br />
    	<button type="submit" name="submit" value="submit" onclick="return compare();">Submit</button>
    </form>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... Did you test that spikeZ?

    I think this is what you meant:

    HTML Code:
    <script type="text/javascript">
    function compare(form) {
    	var box1 = form.box1.value;
    	var box2 = form.box2.value;
    	if(box1 == box2) {
    		alert('The contents are the same');
    		return false;
    	}
    	return true;
    }
    </script>
    <form name="testForm" id="testForm" method="post" action="" onsubmit="return compare(this);">
    	<textarea name="box1"></textarea><br />
    	<textarea name="box2"></textarea><br />
    	<button type="submit" name="submit" value="submit">Submit</button>
    </form>

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Yep, tested and worked fine
    Although I do prefer your method as it allows it to be used on multiple forms.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why use the <button> tag? This tag is useful when it contains something else than just a string. You can end up with headaches when using the <button> tag in IE. Since IE will incorrectly pass the innerHTML of the button instead of the value attribute.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    Yep, tested and worked fine
    Although I do prefer your method as it allows it to be used on multiple forms.
    Oops, yours does work correctly.

  7. #7
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    Why use the <button> tag? This tag is useful when it contains something else than just a string. You can end up with headaches when using the <button> tag in IE. Since IE will incorrectly pass the innerHTML of the button instead of the value attribute.
    Mostly for the styling ability with CSS and it's a button., http://particletree.com/features/red...utton-element/ gives a good read.

    Didn't know that it would confuse the innerHTML with the value though - must be careful if referencing it then!
    Last edited by spikeZ; Jan 10, 2008 at 16:07.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


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
  •