How to trigger a function with checkbox django - html

I wanna know how I run certain functions depending on the selected checkboxes. This is my visual template:
and this is the code I have for my template is called admin.html:
<div class="panel-body">
<p><button type="button" class="btn btn-black"><i class="fa fa-upload" </i> <span class="bold">IMPORT ALL</span></button> </p>
<p> Import selected reports:</p>
<p> <label><input type="checkbox" value=""> Cisco Backlog Report</label></p>
<p> <label><input type="checkbox" value=""> Planning & Standard</label></p>
<p> <label><input type="checkbox" value=""> Emo Trans Report</label></p>
<p> <label><input type="checkbox" value=""> Phyllis Report</label></p>
<p> <label><input type="checkbox" value=""> Purchase Order View</label></p>
<p> <label><input type="checkbox" value=""> On Hand Inventory</label></p>
<p> <label><input type="checkbox" value=""> Bill of Material</label></p>
<p> <label><input type="checkbox" value=""> Aged</label></p>
<p> <label><input type="checkbox" value=""> Shipment with Times</label></p>
<p><button type="button" class="btn btn-danger">Import</button> </p>
As I mentioned before, I got 10 functions that read several .csv reports and upload the data into models and I trigger them with the URL section. In my views.py I will show two examples:
def importpurchase(request)
Log logic here
def importcisco(request)
Log logic here
def importall(request) # this function is to import all
importpurchase(None)
importcisco(None)

You can receive list of selected checkboxes using request.POST.getlist('mycheckboxname'), you should give your checkboxes name and value accordingly to selected field ('Aged' for example):
<input type="checkbox" name="mycheckboxname" value="Aged">
Then you can call any function depending on what selected in list:
def func1(l,vals):
process_values_in_different_way(l, vals)...
def func2(l,vals):
process_values(l, vals)...
def MyView(request):
values=get_values_from_somewhere()
mylist=request.POST.getlist('mycheckboxname')
if 'Aged' in mylist:
func2(mylist, values)
elif anotherValue in mylist:
func2(mylist, values)
elif...
etc
EDIT(on your comments):
This is how django works: your client send request and you return response. This is called HTTP protocol. When IMPORT button is clicked your client send a form which contains all data entered by the user to the server. This data appears as a part of request object in your view. You can retrieve this data and you can do everything you want with this data. In my example process_values can, for example, select all 'Phyllis Report' objects and return them to response, as part of rendered template. There is no other way how you can do it. You cant just call on click function from server without request. To accomplish what you want you can try to split your logic and put part of it to javascript. You will be able to bound onclick listener to your button and then send requests through ajax to server. But this is a whole new story.
This might be useful: ajax and django

Related

Upload 2 files from 2 inputs with Flask

I need to have 2 buttons for uploading 2 different files by using Flask, but I cannot find the way to do that.
The answer that I found several times was to add "multiple" in parameters, but this is not what I want because I need to have a button for each file.
In my form I need the onchange="form.submit() parameter, and I want to have others entries.
The files I have tu upload are excel files
upload.html :
<form method="POST" enctype="multipart/form-data">
<div class="input-field">
<input type="text" name="other_input" onchange="form.submit()" id="other_input">
<label>Other Input</label>
</div>
<div class="div_files">
<label class="Button"> Select File 1</label>
<input name="1st_file" type="file" onchange="form.submit()" value="1st_file">
<label class="Button"> Select File 2</label>
<input name="2nd_file" type="file" onchange="form.submit()" value="2nd_file">
</div>
<input type="submit" value="Show result" action="other" id="btns">
</form>
app.py :
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/index, methods=['POST', 'GET'])')
def index():
file1 = request.files["1st_file"]
file2 = request.files["2nd_file"]
return render_template('other_page.html', variable1=file1, variable2=file2)
I tried to use 2 different forms to get what I want, but it didn't work either
Thank you for your help :)

Freemarker how to select checkboxes on UI send by backend?

Have following data passed from backend:
ALL_CONFIGS: {callDigitalIo=true, controllerId=1, numberPlatesHashSalt=..., numberPlatesShouldBeHashed=false, parkingStatusShouldBeChecked=true}
Where boolean params should be displayed like input element with type=checkbox.
Here is how I handle it on UI page (.ftl):
<div>
<label class="col-form-label">
Parking Status Should Be Checked:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked" name="parkingStatusShouldBeChecked"
<#if parkingStatusShouldBeChecked??>checked="checked"</#if>
/>
</label>
</div>
However, checkboxes are all selected:
Number Plates Should be Hashed should not be selected.
How to select only true variables?
After huge research I found solution for this issue:
<div>
<label class="col-form-label">
Parking Status Should Be Checked:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked"
<#if parkingStatusShouldBeChecked == "true">checked</#if>
/>
</label>
</div>
It works fine.
Assuming that parkingStatusShouldBeChecked is a boolean, this way works too:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked" name="parkingStatusShouldBeChecked"
${parkingStatusShouldBeChecked?string('checked','')} />
The first parameter is the "true" expression, so FreeMarker prints checked. Otherwise it prints just an empty string.
See https://freemarker.apache.org/docs/ref_builtins_boolean.html#ref_builtin_string_for_boolean

Issue with AngularJS CheckBox binding, checkbox not checked even if model value is checked

I have below code in AngularJS
<div >
<input type="checkbox" ng-model="vehicleDetails.selfOwned"> Owned
</div>
<div>
{{vehicleDetails.selfOwned}}
</div>
Here selfOwned is my model value which is coming true when printed using
{{vehicleDetails.selfOwned}}
but still checkbox does not come up with checked, even when model is printing true value.
Try something like:
<div>
<input type="checkbox" ng-model="vehicleDetails.selfOwned" ng-checked="vehicleDetails.selfOwned" ng-click="toggleSelection(value)"> Owned
</div>
<div>
{{vehicleDetails.selfOwned}}
</div>
In your controller you'll have:
$scope.toggleSelection(value){
vehicleDetails.selfOwned = !vehicleDetails.selfOwned;
}

how to get the object when selecting checkbox?

i got the list of checkboxs form taxlist.
it consist of the two objecs. when i check on the checkbox taxlist.taxprecent,taxlist.taxtype will bind to ng-model cartoder.tax like array
[$promise: Promise, $resolved: false]
0:Resource
__v:0\
_id:"5721d57d5b6691d0107f53c3"
createdAt:"2016-04-28T11:33:02.022Z"
isDeleted:false
modifiedAt:"2016-04-28T11:33:02.023Z"
taxpercent:15
taxtype:"vat"
__proto__:Object
1:Resource
__v:0
_id:"5721ed298ea69da01328cbbc"
createdAt:"2016-04-28T10:59:53.673Z"
isDeleted:false
modifiedAt:"2016-04-28T10:59:53.673Z"
taxpercent:10
taxtype:"service"
__proto__:Object
$promise:Promise
$resolved:true
length:2
__proto__:Array[0]
Html code
<span ng-repeat="item in taxlist">
<label>
<input type="checkbox" ng-model="cartorder.tax" ng-checked="{{item}}">{{item.taxtype}}
</label>
I dont know even how to start this. please help how bind this data
You can add ng-change
<label><input type="checkbox" ng-model="cartorder.tax" ng-checked="{{item}}" ng-change="onChange(cartorder);">{{item.taxtype}}</label>
js
$scope.onChange = function(cartorder){
};

Proper way to read checkbox data in NodeJS

I have a form on my webpage and its being submitted to a NodeJS backend.
I'm having trouble with the checkboxes. When the are submitted to server, and I read them via req.body.foods, I get something like ['on', 'on', 'on'].
But I want to get the actual values, that is, something like ['dairy', 'fish'] etc.
How can I do that?
<div class="col-sm-6">
<div class="checkbox">
<label><input name="food" type="checkbox" value="dairy">Dairy</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="meat">Meat</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="fish">Fish</label>
</div>
</div>
You can do the following in the node.js file:
console.log(req.body.food); //This will print the array of values.
If you have only one checkbox selected in the page, (eg: Dairy) it will print "dairy". If more than one checkbox, then you get "{ 'dairy', 'meat' }" in the output. Make sure the checkboxes are within the form.
Another method:
Include a hidden input element in your form:
<input name="SelectedValues" type="hidden" value="">
Also include a call to a javascript file in the onchange event of every checkbox, or in the onclick event of the submit button in the form.
onclick='buildlist("YourCheckBoxName","SelectedValues");'
Use a javascript function to loop through your checkbox and build a comma separated list of selected values:
function buildlist(listName,labelName){
var controls = document.getElementsByName(listName);
var label = document.getElementsByName(labelName);
label.value = '';
for(var i=0;i<controls.length;i++){
label.value += controls[i].value.toString()+',';
}
}
Now inside the node.js file, use the following code to access the list of values:
req.body.SelectedValues
Looks like you are using bootstrap to generate your form checkboxes. Try using the "form-check" and "form-check-input" classes instead.
<div class="form-check">
<input class="form-check-input" type="checkbox" name="food" value="dairy" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">Dairy</label>
</div>