Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts

    Question Show the submit button only when/if count = 200?

    Is there a way I can display the submit button only when or if the count = 200?
    PHP Code:
    <script type="text/javascript">
    // <![CDATA[
    function countChar(){
    var 
    tform document.getElementById("my_form");
    tform.count.value tform.title.value.length*1+tform.message.value.length;
    }
    // ]]>
    </script>
    <form id="my_form" onkeyup="countChar();">
    <input type="text" name="title" />
    <br />
    <textarea name="message" cols="75" rows="10"></textarea>
    <br />
    You've typed <input size="3" type="text" name="count" value="0" /> characters<br />
    <!-- Only show me when the count hits 200 -->
    <input type="submit" name="button" id="button" value="Submit" />
    </form> 
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Code:
    <script type="text/javascript">
    // <![CDATA[
    function countChar(){
    var tform = document.getElementById("my_form");
    var _count = tform._title.value.length*1+tform.message.value.length;
    tform.count.value = _count.toString();
    tform.button.style.visibility = (_count == 200) ? "visible" : "hidden";
    }
    // ]]>
    </script>
    <form action="#" id="my_form" onkeyup="countChar();">
    <input type="text" name="_title" />
    <br />
    <textarea name="message" cols="75" rows="10"></textarea>
    <br />
    You've typed <input size="3" type="text" name="count" value="0" /> characters<br />
    <!-- Only show me when the count hits 200 -->
    <input type="submit" name="button" id="button" value="Submit" style="visibility:hidden;" />
    </form>
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    student101 (07-28-2009)

  • #3
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Thanks but it doesn't seem to work as expected.
    Edit:
    If I turn this around;
    "hidden" : "visible";
    It shows as soon as I type so not sure where the error is?
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #4
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Something along these lines may work:

    Code:
    <script type="text/javascript">
    function show_button(id, field)
    {
        if (field.value.length > 199)
        {
            document.getElementById(id).style.display = 'inline';
        }
    }
    </script>
    Change the textarea to:

    Code:
    <textarea id="message" name="message" onkeyup="show_button('button', this.form[this.id]);" cols="75" rows="10"></textarea>
    Set your submit button to hidden via CSS.
    Last edited by MattF; 07-28-2009 at 02:17 PM. Reason: Forgot to add an id.

  • #5
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Quote Originally Posted by student101
    Thanks but it doesn't seem to work as expected.
    I have tested in all browsers I have... It works for me: submit button becomes visible only when strictly 200 characters are typed. Maybe I do not understand the thing?
    I am still learning English

  • #6
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Quote Originally Posted by Amphiluke View Post
    I have tested in all browsers I have... It works for me: submit button becomes visible only when strictly 200 characters are typed. Maybe I do not understand the thing?
    Found it!
    >=
    when it hit 200 then it shows, after or before "200" then it doesn't show.

    Now it shows.
    Thanks that was very quick of you!
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #7
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Quote Originally Posted by MattF View Post
    Something along these lines may work
    Sorry MattF, I am trying your method a bit lost
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #8
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    	function countChars(nTxtArea,nForm){
    
    		nForm['charCount'].value = nTxtArea.value.length;
    		nForm['submit'].style.visibility = nTxtArea.value.length >= 200 ? "visible" : "hidden";		
    	}
    
    	function init(){
    
    		var nForm = document.forms[0];
    		nForm['submit'].style.visibility = "hidden";
    		nForm['message'].onkeyup = function()
    			{
    			 countChars(this,nForm);
    			}		
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	.messageArea {width: 350px; height: 100px; padding-left: 3px; padding top: 5px;
    		      font-size: 11pt; text-align: justify;}
    	.char_count {text-align: right; font-size: 10pt;}
    
    </style>
    </head>
    	<body>
    		<form action="" method="post">
    		  
    			<textarea name="message" class="messageArea"></textarea>
    			<br><br>
    			<label>You've typed: 
    				<input type="text" size="3" name="charCount" class="char_count" readonly>
    			Characters </label>
    			<br><br>
    			<input type="submit" name="submit" value="Submit">
    			
    		</form>
    	</body>
    </html>

  • Users who have thanked 12 Pack Mack for this post:

    student101 (07-28-2009)

  • #9
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Quote Originally Posted by student101 View Post
    Sorry MattF, I am trying your method a bit lost
    You're better off with the one you already have working.

  • #10
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Thanks!
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •