Home jQuery

Add or Remove File Field in jQuery

Hi guys! Today I’m going to share about multiple file upload in PHP.

We’ll be using jQuery to add or remove new file fields.

This one is useful when your system has multiple email attachment or document management feature.

Home>jQuery Add or Remove File Field Then Upload File in PHP and jQuery

Multiple file upload

This code contains the form with the file field, add and remove button and of course, the upload button. jQuery is used for its dynamic adding or removing of file fields.

<html>
<head>
     <title>How To Add or Remove File Field Then Upload File in PHP and jQuery</title>
</head>
<body>
<?php
isset($_REQUEST['action']) ? $action = $_REQUEST['action'] : $action = '';

if( $action == 'uploadfiles' ){
     //define where the files will be uploaded
     $upload_directory = 'uploads/';
     $x=0;  
          echo "</div>Uploaded Files:</div>";
          foreach ( $_FILES['data']['name'] AS $key => $value ){  
               echo "<div>{$value}</div>";
               //Move file to server directory
               move_uploaded_file($_FILES["data"]["tmp_name"][$x], $upload_directory . $_FILES["data"]["name"][$x]);
               $x++;  
          }
}
?>
     <form enctype="multipart/form-data" action="#" method="POST">
          <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
               <div>Choose a file to upload:</div>
                    <div id="text">
                         <div ><input name="data[]" type="file" /></div>
                         <!-- This is where the new file field will appear -->
                    </div>
                    <input type="button" id="add-file-field" name="add" value="Add input field" />
                    <input type='hidden' name="action" value="uploadfiles" />
                    <input type="submit" value="Upload File" />
     </form>



     <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
     <script type='text/javascript'>
          $(document).ready(function(){
                // This will add new input field
               $("#add-file-field").click(function(){
                    $("#text").append("<div class='added-field'><input name='data[]' type='file' /><input type='button' class='remove-btn' value='Remove Field' /></div>");
               });
               // The live function binds elements which are added to the DOM at later time
               // So the newly added field can be removed too
               $(".remove-btn").live('click',function() {
                    $(this).parent().remove();
               });
          });
     </script>
</body>
</html>

Download Source Code
You can download all the code used in this tutorial for only $9.99 $5.55!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Thank you for learning from our post about: Add or Remove File Field in jQuery.

Home jQuery

Check or Uncheck All Checkboxes with jQuery + Show Checked with PHP

Today, we will learn how to check or uncheck all checkboxes with jQuery. We will show all selected checkboxes using PHP as well.

When you have a list of data, sometimes, you want to easily check all or uncheck all of them. And then process those selected/checked data by getting their values first.

Today we’re going to do something like what we’re using in GMail or YahooMail.

  1. Check or Uncheck All Checkboxes in a form (using jQuery).
  2. Get the selected checkboxes values when the form is submitted (using PHP).

Check or Uncheck Checkboxes with jQuery And Get Selected with PHP

In case you want instant testing you may download the code or see the result in live demo:

Step 1: Create index.html and put the following code. The code below will show an HTML form with checkbox options.

<html>
	<head>
		<title>Check and Uncheck All</title>
	</head>
<body>

<div style='margin: 10px'><input type='checkbox' id='checker' />Check/Uncheck All</div>

<form action='index.php' method='post'>
<div style='margin: 10px'>
	<input type='checkbox' name='emotions[]' class='checkboxes' value='Happy' />Happy
	<input type='checkbox' name='emotions[]' class='checkboxes' value='Sad' />Sad
	<input type='checkbox' name='emotions[]' class='checkboxes' value='Excited' />Excited
	<input type='checkbox' name='emotions[]' class='checkboxes' value='Scared' />Scared
</div>
<div style='margin: 10px'>
	<input type='hidden' name='action' value='get_values' />
	<input type='submit' value='Submit Selected' />
</div>
<div style='margin: 10px'>
<?php
// PHP code will be here
?>
</div>
</form>

<!-- jQuery script will be here -->

</body>
</html>

Step 2: Replace "PHP code will be here" line above with the following code. The code below will show you the selected checkbox options when the form was submitted.

//Defining indexes
empty($_POST['action']) ? $action = '' : $action = $_POST['action'];
empty($_POST['emotions']) ? $emotions = '' : $emotions = $_POST['emotions'];

if( $action == 'get_values'){
	if(!empty($emotions)){ //check if user ticked any checkbox
		foreach($emotions as $keys => $values){
			echo "<div>$values</div>";
		}
	}else{
		echo "Please select emotions.";
	}
}

Step 3: Replace "jQuery script will be here" line above with the following code. The code below will check or un-check the checkbox options in the form.

<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
	$(document).ready(function() {
		$( '#checker' ).click(function(){
			$( '.checkboxes' ).attr( 'checked', $( this ).is( ':checked' ) );
		});
	});
</script>

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Related Tutorials

Thank you for learning from our post about: Check or Uncheck Checkboxes with jQuery And Get Selected with PHP.