Create form dynamic depending of selected checkboxes

Question

I'm currently working on ASP.Net Core MVC and I have checkboxes as:


  
  10sec


  
  15sec


  
  30sec


  
  45sec

Now I want to add dynamic cards depending of checked checkboxes like:

function myFunction() {
  var checkBox = document.getElementById("10");
  var text = document.getElementById("10secs");
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

//dropzone script
var myDropzone = new Dropzone("#mydropzone", {
  url: "/test/create",
  // acceptedFiles: accept,
  maxFilesize: 3.0,
  uploadMultiple: false,
  createImageThumbnails: false,
  addRemoveLinks: true,
  removedfile: function(file) {
    var name = file.name;
    file.previewElement.remove();
    $.ajax({
      type: 'POST',
      url: '/test/delete',
      data: "fileName=" + name,
      dataType: 'html'
    });
  },
  maxFiles: 1,
  maxfilesexceeded: function(file) {
    this.removeAllFiles();
    this.addFile(file);
  },
  init: function() {
    var drop = this;
    this.on('error', function(file, errorMessage) {
      if (errorMessage.indexOf('Error 404') !== -1) {
        var errorDisplay = document.querySelectorAll('[data-dz-errormessage]');
        errorDisplay[errorDisplay.length - 1].innerHTML = 'Error 404: The upload page was not found on the server';
      }
      if (errorMessage.indexOf('File is too big') !== -1) {
        alert('i remove current file');
        // i remove current file
        drop.removeFile(file);
      }
    });
  }

});

So I want to do that for all checkboxes, but as you can see, I have a dropzone function for one dropzone, how can I do it dynamically depending on the selected checkbox, I should have one dropzone for each one. I'm also aware that there is a better way to achieve the dynamic functionality

Chen · Accepted Answer

If you want the checkboxes to be multiple selectable, I suggest you create a drop zone for each checkbox. When you select two check boxes at the same time, two drop zones can appear at the same time.

Of course, you may want to process the image uploaded by each checkbox differently, and you can pass a parameter(For example:"id") to the controller to perform the corresponding operation.

Below is my test code, you can refer to it:

Test Result:

Edit:

Yes, what you mentioned in your comment is achievable. If you want to upload with one click of a button, you don't need to use dropzone, you can upload via the form.

First, you need to have a model to receive the files corresponding to the four checkboxes. For example:

public class FileList
{
     public List Files10 { get; set; }
     public List Files15 { get; set; }
     public List Files30 { get; set; }
     public List Files45 { get; set; }
}

In your view:

@model Project.Models.FileList





    
    10sec


    
    15sec


    
    30sec


    
    45sec



    
      
        
         
             10sec
          
          
            
              
                  
              
            
          
        
      
    
    
      
        
         
             15sec
          
          
            
              
                  
              
            
          
        
      
    
    
      
        
         
             30sec
          
          
            
              
                  
              
            
          
        
      
    
    
      
        
         
             45sec

Your controller:

[HttpPost]
public IActionResult CreateFile(FileList fileList)
{
    return View();
}

Test Result:

Create form dynamic depending of selected checkboxes

Answers (1)

Related Questions