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.


<script>
	[INDENT]$(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();	});
		});[/INDENT]
</script>


any help you can provide me would be greatly appreciated
r

Hi there,

you could do it like this:

<!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

Hi Pullo,

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

r

You’re welcome :slight_smile:
Thanks for letting me know that this worked for you.

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.


<!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>



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:

$('#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:

$('#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.

Hey Pullo,

Thanks again, the changes you gave me works…

Thanks again,
R