Dynamic search form using javascript for Django project

February 25, 2018, at 12:28 PM

I am trying to create a search form using jquery for Django using following tasks to do:

  1. A user can upload file or input text into the text area or select option from the drop-down menu but these options will appear based on the selection of 1st drop-down menu.
  2. The user can clone this form number of times but not more than max options of 1st drop-down menu.
  3. The user can remove form < max options of the 1st drop-down menu.
  4. Once submit button will be pressed, it will check form validity then send information to Django.

But problems are:

  1. Task 1 is working only on 1st form but not in cloned one.
  2. My Django views only get information about textarea and selected option but not the content of uploaded file which shows nothing in a file.


def fileupload(request):
  if request.method:
    print "Hello"
        print request.GET['cityname']
     except MultiValueDictKeyError:
        print request.GET['listofcompany']
        file = request.FILES['foofile'].read()
        print file
    except MultiValueDictKeyError:
        print request.GET['runprogram']
    except MultiValueDictKeyError:

var max_fields      = 3; //maximum input boxes allowed 
var wrapper         = $(".input_fields_wrap"); //Fields wrapper 
var addButton      = $("#form-add"); //Add button ID 
var form = $('#main-form'); 
var x = 1; //initlal text box count 
$('#alarm_action').change(function (e) { 
    if ($("#alarm_action").val() == "listofcompany") { 
    } else if ($("#alarm_action").val() == "runprogram") { 
    } else { 
  $(addButton).click(function(e){ //on add input button click 
      if(x < max_fields){ //max input box allowed 
          x++; //text box increment 
          $(wrapper).append('<div class="form-field">\ 
                            <select class="removeDuplication" name="searchtype" id="alarm_action" required>\ 
                            <option value="cityname">City Name</option>\ 
                            <option value="listofcompany">Company</option>\ 
                            <option value="runprogram">Run Program</option></select>\ 
                            <body  onload="setProg();">\ 
                              <select name="searchtermorg" id="showForProg" style="display: none;"></select>\ 
                            <input id="filefield" type="file" name="foofile" style="display: none;"/>\ 
                            <textarea id="myTextarea" name="something" ></textarea>\ 
                            <a href="#" class="remove_field">Remove</a>\ 
                          </div>'); //add input box 
      } else { 
        alert("Sorry, you have reached maximum add options."); 
          $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
          $(document).on('change','select.removeDuplication',function(e) { 
              var cI = $(this); 
              var others=$('select.removeDuplication').not(cI); 
                  if($(cI).val()==$(this).val() && $(cI).val()!="") { 
                      alert($(this).find('option:selected').text()+' already selected.'); 
          form.on('submit', function(e) { 
              var queries = []; 
              var slectedall=true; 
              var fillupfield=true; 
              form.find('.form-field').each(function(index, field) { 
                  var query = {}; 
                  query.type = $(field).find('select').val(); 
                  if (query.type !=""){ 
                      if (query.type == "listofcompany") { 
                        query.value =$(field).find('#filefield').val(); 
                      } else if (query.type == "runprogram") { 
                        query.value =$(field).find('#showForProg').val(); 
                      } else { 
                        query.value =$(field).find('textarea').val().replace(/\n/g, '\\n'); 
                  } else{ 
              var url = window.location.href; 
              for (i = 0; i < queries.length; i += 1) { 
                  var query = queries[i]; 
                  var ampOrQ = (i === 0) ? "?" : "&"; 
                  if (query.value.trim() ===""){ 
                  } else { 
                    url += ampOrQ + query.type + "=" + query.value; 
              if (slectedall===false){ 
                  alert('Please select option.'); 
              } else { 
                  if (fillupfield===false){ 
                      alert('Input can not be left blank'); 
                  } else { 
                      window.location.href = url; 
      var progarray = ['Python','Java','R']; 
      function setProg() { 
        var newOptions=progarray; 
        var newValues=progarray; 
        selectField = document.getElementById("showForProg"); 
        selectField.options.length = 0; 
        for (i=0; i<newOptions.length; i++)  
        selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<form id="main-form" class="navbar-form" action="" method="get" enctype='multipart/form-data'> 
  <div class="input_fields_wrap"> 
    <div class="form-field"> 
      <select class="removeDuplication" name='searchtype' id="alarm_action"  required> 
          <option value="cityname">City Name</option> 
          <option value="listofcompany">Company</option> 
          <option value="runprogram">Run Program</option></select> 
          <body  onload="setProg();"> 
            <select name="searchtermorg" id="showForProg" style="display: none;"></select> 
          <input id="filefield" type="file" name="foofile" style="display: none;"/> 
          <textarea id="myTextarea" name="something"></textarea> 
      <input class="btn btn-secondary" type="button" value="Add" id="form-add"> 
      <input class="btn btn-primary" type="submit" value="Submit"> 

Can anybody help me to fix these problems? thank you

Trying to convert jQuery calls to knockout.js

Trying to convert jQuery calls to knockout.js

I have some code that I need to convert from jQuery calls to knockoutjs syntax

crossfade effect not working properly

crossfade effect not working properly

i copied this code from codepenio to add a crossfade effect to my site's background images

Is there a css/javascript property for when a div is selected in the url?

Is there a css/javascript property for when a div is selected in the url?

For example, if I have the URL examplecom/#foo, then styling is applied to the div foo

Hide a Twitter Bootstrap collapsible when a other collapsible is opened

Hide a Twitter Bootstrap collapsible when a other collapsible is opened

How can I hide a collapse when a other collapsible ist opended? I know there is already a possibility to do it with the Bootstrap Accordion, but I dont like the effectsI just want it to hide immediately and just show the opening collapse with an effect