SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Controlling the number of input field through javascript

    Hello,

    I'm not too familiar with Javascript so Im hoping someone here can help.

    Script: image upload script but the focus is on the javascript.

    The javascript, as of now give the user a new field to upload a image every time a the "add image" button clicked.

    Problem: The script works for most part but it gives the user unlimited upload fields click.

    Need:
    -control the number of times a user can click the "add image" button.
    - if one of the file is removed, the "add image" button should be enabled again to add another image.



    I also attached a image to the post for you view.
    java.jpg

    Code:
    <script>
    	
    $(function() { $('#add-file-field').click(function() { $("#addField").append('<div class="added-field"><input type="file" name="data[]"><input type="image" src="delete.png" class="remove-btn" value="Remove"></div>'); }); $('.remove-btn').live('click',function() { $(this).parent().remove(); }); });
    </script>
    any help you can provide me would be greatly appreciated
    r

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,872
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    you could do it like this:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>disable/enable button</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          .added-field{padding:7px;}
          #add-file-field{margin:10px;}
        </style>
      </head>
      <div id="addField"></div>
      <button id="add-file-field">Add Image</button>
      <body>
        <script>
          $(function(){
            var tot = 0;
              
            $('#add-file-field').click(function(){  
              $("#addField").append('<div class="added-field"><input type="file" name="data[]"><input type="submit" class="remove-btn" value="Remove"></div>');
              tot ++;
              if (tot == 5){
                $(this).attr("disabled", "disabled");
              }
            });
            
            $(document).on('click', '.remove-btn', function(event) {
              $(this).parent().remove();
              if (tot == 5){
                $("#add-file-field").removeAttr("disabled");
              }
              tot--;
            });
          });
        </script>
      </body>
    </html>
    Seeing as the .live() method has been removed from the current version of jQuery, I have updated that for you, too.

    HTH

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    This is exactly what I am looking.. awesome.. thank you friend.

    r


    Quote Originally Posted by Pullo View Post
    Hi there,

    you could do it like this:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>disable/enable button</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          .added-field{padding:7px;}
          #add-file-field{margin:10px;}
        </style>
      </head>
      <div id="addField"></div>
      <button id="add-file-field">Add Image</button>
      <body>
        <script>
          $(function(){
            var tot = 0;
              
            $('#add-file-field').click(function(){  
              $("#addField").append('<div class="added-field"><input type="file" name="data[]"><input type="submit" class="remove-btn" value="Remove"></div>');
              tot ++;
              if (tot == 5){
                $(this).attr("disabled", "disabled");
              }
            });
            
            $(document).on('click', '.remove-btn', function(event) {
              $(this).parent().remove();
              if (tot == 5){
                $("#add-file-field").removeAttr("disabled");
              }
              tot--;
            });
          });
        </script>
      </body>
    </html>
    Seeing as the .live() method has been removed from the current version of jQuery, I have updated that for you, too.

    HTH

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,872
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    You're welcome
    Thanks for letting me know that this worked for you.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    When i integrated your javascript into my user form its acting strange. If its within the form tag the "add button", adds the button but then it disappears. I rearranged the code you provided by basically adding a form tag and copy/pased the code for your review.


    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>disable/enable button & control the number of fields to display</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          .added-field{padding:7px;}
          #add-file-field{margin:10px;}
        </style>
        
        <script>
          $(function(){
            var tot = 0;
              
            $('#add-file-field').click(function(){  
              $("#addField").append('<div class="added-field"><input type="file" name="data[]"><input type="submit" class="remove-btn" value="Remove"></div>');
              tot ++;
              if (tot == 5){
                $(this).attr("disabled", "disabled");
              }
            });
            
            $(document).on('click', '.remove-btn', function(event) {
              $(this).parent().remove();
              if (tot == 5){
                $("#add-file-field").removeAttr("disabled");
              }
              tot--;
            });
          });
        </script>    
        
      </head>
      
      <body>   
        
        <form>
    	    <div id="addField"></div>
    	  	<button id="add-file-field">Add Image</button>
      </form>
      
      </body>
    </html>
    



    Quote Originally Posted by Pullo View Post
    You're welcome
    Thanks for letting me know that this worked for you.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,872
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi again,

    This is because you have wrapped form tags around the button, so the browser is submitting the form every time you click on the button.

    The best way to counteract this, is to pass a reference to the click event to your JavaScript function and then to prevent the form's default behaviour.

    You have this:

    Code JavaScript:
    $('#add-file-field').click(function(){  
      $("#addField").append('<div class="added-field"><input type="file" name="data[]"><input type="submit" class="remove-btn" value="Remove"></div>');
      tot ++;
      if (tot == 5){
        $(this).attr("disabled", "disabled");
      }
    });

    Change it to this:

    Code JavaScript:
    $('#add-file-field').click(function(e){  
      e.preventDefault();
      $("#addField").append('<div class="added-field"><input type="file" name="data[]"><input type="submit" class="remove-btn" value="Remove"></div>');
      tot ++;
      if (tot == 5){
        $(this).attr("disabled", "disabled");
      }
    });

    And all will be good.

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Pullo,

    Thanks again, the changes you gave me works...

    Thanks again,
    R


    Quote Originally Posted by Pullo View Post
    Hi again,

    This is because you have wrapped form tags around the button, so the browser is submitting the form every time you click on the button.

    The best way to counteract this, is to pass a reference to the click event to your JavaScript function and then to prevent the form's default behaviour.

    You have this:

    Code JavaScript:
    $('#add-file-field').click(function(){  
      $("#addField").append('<div class="added-field"><input type="file" name="data[]"><input type="submit" class="remove-btn" value="Remove"></div>');
      tot ++;
      if (tot == 5){
        $(this).attr("disabled", "disabled");
      }
    });

    Change it to this:

    Code JavaScript:
    $('#add-file-field').click(function(e){  
      e.preventDefault();
      $("#addField").append('<div class="added-field"><input type="file" name="data[]"><input type="submit" class="remove-btn" value="Remove"></div>');
      tot ++;
      if (tot == 5){
        $(this).attr("disabled", "disabled");
      }
    });

    And all will be good.


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
  •