SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot Defiant's Avatar
    Join Date
    Feb 2006
    Location
    Durham, UK
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    After so many click, hide

    i have this in PHP

    echo '<p><input type="button" id="moreFields" value="More Fields" /><br />';

    I want it so that after X amount of clicks it hides itself.

    Can anyone show me how to do this?
    Webdesigner in Training
    Currently Studying: PHP

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    window.onload = function ()
    {
    	var btn = document.getElementById('moreFields');
    	var maxValue = 5;
    	btn.counter = 0;
    	btn.onclick = function () {
    		this.counter++;
    		if (this.counter == 5) this.style.display = 'none';
    	}
    }
    This should do it

  3. #3
    SitePoint Zealot Defiant's Avatar
    Join Date
    Feb 2006
    Location
    Durham, UK
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol for sum reason your script stops the new input boxes showing up.

    Ive tried :
    Code:
    <script type="text/javascript">
    		//<!--
    
    		window.onload = function ()
    		{
    			var btn = document.getElementById('moreFields');
    			var maxValue = 5;
    			btn.counter = 0;
    			btn.onclick = function () {
    				this.counter++;
    				if (this.counter == 5) this.style.display = 'none';
    			}
    		}
    
    		// -->
    		</script>
    <?php
    
    echo '<div id="button" style="display:block">';
    echo '<p><input type="button" id="moreFields" value="More Fields" /><br />';
    echo '</div>';
    but that doesnt work either.

    Any ideas?
    Webdesigner in Training
    Currently Studying: PHP

  4. #4
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you never told me other input fields should show up
    What is it that you want exactly?

  5. #5
    SitePoint Zealot Defiant's Avatar
    Join Date
    Feb 2006
    Location
    Durham, UK
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well.
    When you click on: <input type="button" id="moreFields" value="More Fields" /> it adds a new field to the page, and after 5 clicks i want it to hide.

    Its like the attachments at the bottom of an email compose. You click a button and get another field to attach another file to your email. I want that which i have but i want to limit it.

    Is that any clearer?
    Webdesigner in Training
    Currently Studying: PHP

  6. #6
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Defiant
    Well.
    When you click on: <input type="button" id="moreFields" value="More Fields" /> it adds a new field to the page, and after 5 clicks i want it to hide.

    Its like the attachments at the bottom of an email compose. You click a button and get another field to attach another file to your email. I want that which i have but i want to limit it.

    Is that any clearer?
    Yeah, that's clear

    I will create an example for you, just a moment.

  7. #7
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.whatstyle.net/bla/add_fields.html

    I assume you can adapt this in your own code?

  8. #8
    SitePoint Zealot Defiant's Avatar
    Join Date
    Feb 2006
    Location
    Durham, UK
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks it works,
    but im gonna have to hack it to pieces.

    I already have the input fields working, all i need to get is the bit to hide the button.
    Webdesigner in Training
    Currently Studying: PHP

  9. #9
    SitePoint Zealot Defiant's Avatar
    Join Date
    Feb 2006
    Location
    Durham, UK
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL

    im not sure what i need to get from it.
    Webdesigner in Training
    Currently Studying: PHP

  10. #10
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Defiant
    LOL

    im not sure what i need to get from it.
    Can you paste your code?
    Then I can check which pieces aren't properly hacked

  11. #11
    SitePoint Zealot Defiant's Avatar
    Join Date
    Feb 2006
    Location
    Durham, UK
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This doesnt contain any of your JS lol.

    This is the PHP
    Code:
    include 'js/moreinput.js';
    echo '<body onload="initMore()">';
    
    ........
    
    # Start Form
    echo '<form method="POST" action="scripts/stock_types.php">';
    
    # New Stock Type.
    echo '<h3>Add New Stock Types</h3>';
    
    echo '<p>Use <img src="img/deletebutton.gif"> to delete the fields next to it if they aren\'t required.<br /><b>You can only add 5 new stock types at a time.</b></p>';
    echo '<p class="warning"><b>Do not</b> refresh this page as it will hide all the new input fields and you will have to re-enter all new fields</p>';
    
    # This is the template for new fields.
    echo '<div id="readroot" style="display: none;">';
    echo '<input name="newStockn" value="" style="margin-top:3px;" /> <input name="newStockpn" value="" style="margin-top:3px; margin-right:3px;" /><a href="#.htm" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><img src="img/deletebutton.gif" /></a><br />';
    echo '</div>';
    
    # Insert the new fields here.
    echo '<span id="writeroot"></span>';
    
    # Button for adding more input fields.
    echo '<div id="hide5" style="display:block;">';
    echo '<p><input type="button" id="moreFields"  value="More Fields" /><br />';
    echo '</div>';
    
    echo '<input type="submit" value="Add to Database" /></p>';
    
    # End form.
    echo '</form>';
    and this is the JavaScript for the extra fields (moreinput.js):
    Code:
    <script type="text/javascript">
    <!--
    
    var counter = 0;
    
    function initMore() {
    	document.getElementById('moreFields').onclick = moreFields;
    }
    
    function moreFields() {
    	counter++;
    	var newFields = document.getElementById('readroot').cloneNode(true);
    	newFields.id = '';
    	newFields.style.display = 'block';
    	var newField = newFields.childNodes;
    	for (var i=0;i<newField.length;i++) {
    		var theName = newField[i].name
    		if (theName)
    			newField[i].name = theName + counter;
    	}
    	var insertHere = document.getElementById('writeroot');
    	insertHere.parentNode.insertBefore(newFields,insertHere);
    }
    
    // -->
    </script>

    Cheers
    Webdesigner in Training
    Currently Studying: PHP

  12. #12
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eeeeeerrr... well, what's important is that you trigger a function "onclick" of the add-fields button.

    So create a function (using my code) that listens to that event. And increment a counter every time the button gets clicked.
    When that counter is 5 (or whatever) you can just use "this.style.display="none"".

    I hope this helps?

  13. #13
    SitePoint Zealot Defiant's Avatar
    Join Date
    Feb 2006
    Location
    Durham, UK
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ill have a look at it later and let you know what happens.

    Cheers.
    Webdesigner in Training
    Currently Studying: PHP

  14. #14
    SitePoint Zealot Defiant's Avatar
    Join Date
    Feb 2006
    Location
    Durham, UK
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol i got it to work.

    One last thing. How do i make it so the user can delete the input, say if they clicked too many times?

    Cheers.
    Webdesigner in Training
    Currently Studying: PHP


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
  •