Bootstrap Snippet CUCS Investissement Form PAGE 1 using HTML Bootstrap Javascript

$('#stepOneForm').parsley(); $('#id_lieu').select2(); $('#id_quartiers_publique').select2(); $('#id_objectifs_CGET').select2(); $('.datepicker').datepicker({ language: "fr", format: 'dd/mm/yyyy', todayHighlight: true, autoclose: true }); // select2 $("#id_lieu_de_activite").select2({}); $("#id_quartiers_public").select2({}); $('#id_objectifs_CDV').select2(); $('#id_modalite_CGET').select2(); $('#id_orientation_CDV').select2(); // on select of the perimetre get list of Lieux $('#id_perimetre_pour_lieu').on('change', function() { $( "#id_lieu" ).prop( "disabled", true ); $( "#id_quartiers_publique" ).prop( "disabled", true ); // first Ajax $.ajax({ url: "/api/lieux/list/"+this.value, type:'GET', dataType: 'json', success: function(json) { $('#id_lieu').empty(); $.each(json, function(i, obj){ $('#id_lieu').append($('<option>').text(obj.nom).attr('value', obj.pk)); }); $( "#id_lieu" ).prop( "disabled", false ); } }); // second $.ajax({ url: "/api/quartier/list/"+this.value, type:'GET', dataType: 'json', success: function(json) { $('#id_quartiers_publique').empty(); $.each(json, function(i, obj){ $('#id_quartiers_publique').append($('<option>').text(obj.nom).attr('value', obj.pk)); }); $( "#id_quartiers_publique" ).prop( "disabled", false ); } }); }); // ajax for dry list objectfis modalite $('#id_pilier').on('change', function() { $( "#id_orientation_CDV" ).prop( "disabled", true ); $( "#id_objectifs_CGET" ).prop( "disabled", true ); // orientationCDV $.ajax({ url: "/api/orientation/list/"+this.value, type:'GET', dataType: 'json', success: function(json) { $('#id_orientation_CDV').empty(); $.each(json, function(i, obj){ $('#id_orientation_CDV').append($('<option>').text(obj.titre).attr('value', obj.pk)); }); $( "#id_orientation_CDV" ).prop( "disabled", false ); } }); // objectifsCGET $.ajax({ url: "/api/objectifs/cget/list/"+this.value, type:'GET', dataType: 'json', success: function(json) { $('#id_objectifs_CGET').empty(); $.each(json, function(i, obj){ $('#id_objectifs_CGET').append($('<option>').text(obj.code +" "+ obj.nom).attr('value', obj.pk)); }); $( "#id_objectifs_CGET" ).prop( "disabled", false ); } }); }); $('#id_objectifs_CGET').on('change', function() { $( "#id_modalite_CGET" ).prop( "disabled", true ); // modaliteCGET $.ajax({ url: "/api/modalite/list/"+this.value, type:'GET', dataType: 'json', success: function(json) { $('#id_modalite_CGET').empty(); $.each(json, function(i, obj){ $('#id_modalite_CGET').append($('<option>').text(obj.code +" "+ obj.nom).attr('value', obj.pk)); }); $( "#id_modalite_CGET" ).prop( "disabled", false ); } }); }); // ajax for dry list objectfis modalite $('#id_orientation_CDV').on('change', function() { $( "#id_objectifs_CDV" ).prop( "disabled", true ); // objectifsCDV $.ajax({ url: "/api/objectifs/list/"+this.value, type:'GET', dataType: 'json', success: function(json) { $('#id_objectifs_CDV').empty(); $.each(json, function(i, obj){ $('#id_objectifs_CDV').append($('<option>').text(obj.titre).attr('value', obj.pk)); }); $( "#id_objectifs_CDV" ).prop( "disabled", false ); } }); }); // ajax for frequency calculator $('#calcButton').click(function() { $('#indvDisable').easyOverlay("start"); var days_array = $('#id_jours_semaine').val(); try { var days_string = days_array.join(); } catch(err) { console.log("ERROR") } // var for boolean Jours feriers var vacances = 0 var feriers = 0 // if the vacances box is checked add the selected ranges if ($('#id_vacances_scolaires').is(':checked')) { console.log("Stages vacances") var vacances = [] // get selected ranges $('#id_periods_vacances :selected').each(function(i, selected){ vacances.push($(selected).val()); }); var vacances = vacances.join(); console.log(vacances); }; // if the jours feriers is checked then add to boolean if ($('#id_inclusive_feriers').is(':checked')) { console.log("Includes Feriers") // update boolean var feriers = 1 }; console.log(feriers); // get the form data var formData = { 'days_str' : days_string, 'from_date_str' : $('input[name=date_debut]').val(), 'to_date_str' : $('input[name=date_fin]').val(), 'feriers' : feriers, 'periods_vacances': vacances, }; // process the form $.ajax({ type : 'GET', url : '/api/frequence/calc/', data : formData, dataType : 'json', encode : true, success : function(data) { if(data.status == 'success'){ console.log('Success'); $( "#id_json_dates_list" ).val(data.dates_json); $('#calcButton').removeClass('btn-warning'); $('#calcButton').addClass('btn-success'); $('#id_seances_num').val(data.seances) $('#seancesTotal').text(data.seances); $('#indvDisable').easyOverlay("stop"); // success msg toastr.success('Cucs Robo', data.seances + " - Seance(s) ajouté"); } }, error : function (xhr, ajaxOptions, thrownError) { console.log(xhr.status); console.log(thrownError); $('#indvDisable').easyOverlay("stop"); toastr.error('Cucs Robo', "Erreur Formulaire"); } }); }); // hide the calendar options for stages vacances $("#hiddenCalendar").hide(); // show it on click of checkbox $("#id_vacances_scolaires").click(function(){ if (this.checked) { $("#hiddenCalendar").show(); } else { $("#hiddenCalendar").hide(); } }); // add individual button $("#addLieu").click(function(e){ console.log("Lieu click!") var peri = $('#id_perimetre_pour_lieu').val() console.log("Perimetre PK is: " + peri) $("#lieuModal").modal("toggle"); $("#periPk").val(peri); }); // add lieu form submit $("#lieuSend").click(function() { // get text from form $('#lieuSend').addClass("btn-warning") var name = $("#lieuTEXT").val(); console.log("this is the name: "+ name) var perival = $("#periPk").val(); // ajax call to get inidividual data $.ajax({ type : 'GET', url : '/api/lieux/add/', data : { lieu_name: name , peri_pk: perival }, dataType : 'json', encode : true, success : function(data) { // add individuals to select console.log(data) $("#lieuModal").modal("toggle"); // empty select. // update multiselect var option = new Option(data.lieuName, data.lieuPK); option.selected = true; $("#id_lieu").select2().append(option); $("#id_lieu").trigger("change"); }, }); });

"CUCS Investissement Form PAGE 1"
Bootstrap 3.3.0 Snippet by itievolution

Related: See More

Questions / Comments:

"CUCS Investissement Form PAGE 1" Bootstrap 3.3.0 Snippet by itievolution

Related: See More

Questions / Comments:

"CUCS Investissement Form PAGE 1"
Bootstrap 3.3.0 Snippet by itievolution