Receive array from HTML form in FastAPI - python

I'm trying to submit a form through post in FastAPI and get a form variable that is stored as a list. When I read back the value all I get is an empty list. There are several variables that will eventually be in list form but all I am trying to get at the moment is the array that holds the quantity values.
What am I doing wrong?
Here is my code:
Python Code
#app.post("/edit_bom")
def edit_bom(board_id: int = Form(...), quantity: list = Form(...)):
print("Editting BOM, board ID: " + str(board_id))
print("quantity: ", quantity)
return RedirectResponse(url=f"/get_bom_details/" + str(board_id), status_code=303)
HTML Code
<form method="post" action="/edit_bom" id="parent-form">
<div class="mb-3 row">
<div class="d-grid gap-2 col-2">
<button type="button" class="btn btn-outline-primary add-one-more"><i class="fas fa-fw fa-plus-square"></i> New Row</button>
</div>
<div class="d-grid gap-2 col-2">
<button type="submit" name="action" value="save-bom" class="btn btn-outline-success"><i class="fas fa-fw fa-check"></i> Save</button>
</div>
</div>
<div class="mb-3 row" id="header">
<label class="col-form-label col-sm-1 text-sm-end"></label>
<div class="col-sm-7">
<h3>Part Number</h3>
</div>
<div class="col-sm-2">
<h3>Quantity</h3>
</div>
<div class="input-group col">
<h3>Edit</h3>
</div>
<div class="input-group col">
<h3>Delete</h3>
</div>
</div>
<div class="mb-3 row bom-line-item copy-fields" id="entry">
<label class="col-form-label col-sm-1 text-sm-end child-row-label">1</label>
<div class="col-sm-7 child-outer">
<input type="text" name="part-name_1" id="0" class="form-control child-part-name" placeholder="Board Number" value="ISL73847SEHDEMO1ZB">
</div>
<div class="col-sm-2 child-outer">
<input type="number" name="quantity[]" id="0" class="form-control child-part-quantity" placeholder="Enter quantity" value="1">
</div>
<div class="input-group col child-outer">
<button id="btn-edit_1" class="btn btn-primary child-btn-edit" type="button"><i class="fas fa-fw fa-edit"></i></button>
</div>
<div class="input-group col child-outer">
<button id="btn-del_1" class="btn btn-danger child-btn-delete" type="button"><i class="fas fa-fw fa-ban"></i></button>
</div>
</div>
<div class="end-of-list" name="noOfRows" value="1"></div>
<input type="hidden" name="board_id" value="1">
</form>
My output in the command prompt:
Editting BOM, board ID: 1
quantity: []

Using the comment from #MatsLindh
I had to change the HTML element name from "quantity[]" to "quantity" and it works now.

Related

Weasyprint render_to_string <weasyprint.HTML object at 0x7f6f944df190> 2 extra bytes in post.stringData array problem

I have an html template and I want to print a pdf with weayprint for it. However, I am getting the error "<weasyprint.HTML object at 0x7f6f944df190> 2 extra bytes in post.stringData array problem" that I mentioned in the title. I am sharing my views.py file and some of my html template.
views.py
def export_pdf(id):
print('export')
edit_ambulanceCase = CallCenter.objects.all()
html_string = render_to_string('forms/update_forms/pdf.html',{'PreCaseControl':edit_ambulanceCase})
print(html_string)
html = HTML(string=html_string)
print(html)
return HttpResponse(html.write_pdf('deneme.pdf'))
pdf.html
<main>
<div class="container-fluid px-4">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header"><h4 class="text-center font-weight-light my-4">Çağrı Merkezi Formu</h4></div>
<div class="card-body">
<form action="" method="POST">
{% csrf_token%}
<h3>Çağrıyı Yapan</h3>
<div class="row">
<div class="mb-3 col">
<label for="institution_name" class="form-label">KURUM ADI</label>
<input type="text" class="form-control" id="institution_name" name="institution_name" value="{{CallCenter.institution_name}}">
</div>
<div class="mb-3 col">
<label for="caller_username" class="form-label">ADI SOYADI</label>
<input type="text" class="form-control" id="caller_username" name="caller_username" value="{{CallCenter.caller_username}}">
</div>
</div>
<div class="row">
<div class="mb-3 col">
<label for="proximity" class="form-label">YAKINLIĞI</label>
<input type="text" class="form-control" id="proximity" name="proximity" value="{{CallCenter.proximity}}">
</div>
<div class="mb-3 col" data-type="control-phone">
<label for="caller_tel_no" class="form-label">TELEFON NUMARASI</label>
<input type="tel" class="form-control" id="caller_tel_no" name="caller_tel_no" value="{{CallCenter.caller_tel_no}}" data-component="phone" inputmode="text" maskvalue="(###) ###-####" val>
<label class="form-sub-label" style="min-height: 13px;" for="caller_tel_no_sub">Lütfen geçerli bir telefon numarası girin.</label>
</div>
</div>
<h3>Hasta</h3>
<div class="row">
<div class="mb-3 col">
<label for="patient_username" class="form-label">ADI SOYADI</label>
<input type="text" class="form-control" id="patient_username" name="patient_username" value="{{CallCenter.patient_username}}">
<label for="patient_age" class="form-label">YAŞ</label>
<input type="text" class="form-control" id="patient_age" name="patient_age" value="{{CallCenter.patient_age}}">
</div>
<div class="mb-3 col">
<label for="" class="form-label">CİNSİYET</label>
<div >
<input class="form-check-input" type="radio" id="male" name="gender" {% if CallCenter.gender == 'erkek' %} checked {%endif%} value="erkek">
<label for="male" class="form-label">Erkek</label>
</div>
<div>
<input class="form-check-input" type="radio" id="female" name="gender" {% if CallCenter.gender == 'kadın' %} checked {%endif%} value="kadın">
<label for="female" class="form-label">Kadın</label>
</div>
</div>
</div>
My html template continues as I have attached. It does not contain any other content. I couldn't include the whole thing because it was too long.

How to get/Fetch Form data in django using cloud firestore?

Form picture
ID is been selected but I'm not getting the values in the form, please check my code files. See in the picture in URL of the browser, update/id is selected, the problem is values are not fetched in the form.
HTML:
<form id="task-form" name="myForm">
{% csrf_token %}
<div class="form-group">
<div class="row">
<div class="col">
<input type="text" class="form-control" id="task-building" placeholder="Building name" name="building" value="{{buildings.building}}">
</div>
<div class="col">
<input type="text" class="form-control" id="task-postal" placeholder="Postal Code" name="postalCode" value="{{buildings.postalCode}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<input type="text" class="form-control" id="task-town" placeholder="town" name="town" value="{{buildings.town}}">
</div>
<div class="col">
<input type="text" class="form-control" id="task-street" placeholder="Street" name="street" value="{{buildings.street}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<input type="text" class="form-control" id="task-house" placeholder="House No." name="houseNo" value="{{buildings.houseNo}}">
</div>
<div class="col">
<input type="text" class="form-control" id="task-info" placeholder="Additional Information" name="additionalInfo" value="{{buildings.additionalInfo}}">
</div>
</div>
</div>
<div class="text-center mt-3">
<button type="submit" id="btn-task-form" class="btn btn-primary ">UPDATE</button>
</div>
</form>
views.py
def update_Building(request, id):
docId = id;
context = {
'buildings': db.collection('Buildings').document(docId).get()
}
return render(request,"EmployeeAdmin/updateBuilding.html", context)
urls.py
path('update/<str:id>/',views.update_Building,name='update_Building'),

how to show bootstrap modal on rendering the same page in flask

I have created a web application using flask and bootstrap. In this application, after putting the inputs and clicking the submit button I want to show the output or result in the same page in a bootstrap modal. But I could not redirect it properly. If there is any solution to it tell me. It will be very helpful. Thanks in advance. The codes are given below.
home.html
<div class="container" align="left">
<div class="panel panel-default" style="border:none;border-radius: 10px;">
<div class="panel-body panel1">
<form method="POST" action="/predict">
<div class="row">
<div class="col-sm-6">
<div class="form-group d2">
<label for="NewYork"><p class="p2">New York</p></label>
<input type="text" class="i1" name="NewYork"><br><br>
<small id="NYHelp" class="form-text text-muted s1">Enter 1 if the state selected is New York else enter 0</small>
</div>
<div class="form-group d2">
<label for="california"><p class="p2">California</p></label>
<input type="text" class="i1" name="California"><br><br>
<small id="CaliforniaHelp" class="form-text text-muted s1">Enter 1 if the state selected is New York else enter 0</small>
</div>
<div class="form-group d2">
<label for="Florida"><p class="p2">Florida</p></label>
<input type="text" class="i1" name="Florida"><br><br>
<small id="FloridaHelp" class="form-text text-muted s1">Enter 1 if the state selected is New York else enter 0</small>
</div>
</div>
<div class="col-sm-6">
<div class="form-group d2">
<label for="RnD_Spend"><p class="p2">RnD_Spend</p></label>
<input type="text" class="i1" name="RnD_Spend"><br><br>
<small id="RndSpendHelp" class="form-text text-muted s1">Enter RnD Spendings in US Dollar</small>
</div>
<div class="form-group d2">
<label for="Admin_Spend"><p class="p2">Admin_Spend</p></label>
<input type="text" class="i1" name="Admin_Spend"><br><br>
<small id="AdminSpendHelp" class="form-text text-muted s1">Enter Adminstration Spendings in US Dollar</small>
</div>
<div class="form-group d2">
<label for="Market_Spend"><p class="p2">Market_Spend</p></label>
<input type="text" class="i1" name="Market_Spend"><br><br>
<small id="MarketSpendHelp" class="form-text text-muted s1">Enter Market Spendings in US Dollar</small>
</div>
</div>
</div>
<div class="row" align="right"><input class="btn btn1" type= "submit" value="Submit" data-toggle="modal" data-target="#myModal"></div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
app.py
#app.route("/predict",methods=['GET', 'POST'])
def predict():
NewYork = float(request.form['NewYork'])
California = float(request.form['California'])
Florida = float(request.form['Florida'])
RnD_Spend= float(request.form['RnD_Spend'])
Admin_Spend= float(request.form['Admin_Spend'])
Market_Spend = float(request.form['Market_Spend'])
pred_args =[NewYork, California, Florida, RnD_Spend, Admin_Spend, Market_Spend]
pred_args_arr = np.array(pred_args)
pred_args_arr = pred_args_arr.reshape(1, -1)
mul_reg = open("multiple_linear_model.pkl", "rb")
ml_model = joblib.load(mul_reg)
model_prediction = ml_model.predict(pred_args_arr)
model_prediction = round(float(model_prediction), 2)
return render_template('home.html', prediction = model_prediction)
I would say that it is usually not a good practice to redirect a user after form submission to the same page but with a modal shown (it is just not a good user experience), and I would recommend doing this through the use of AJAX.
Anyway, you can pass a flag that tells the HTML template renderer if it needs to show the modal. Something like this:
return render_template(
'home.html',
prediction=model_prediction,
show_predictions_modal=True // This is our flag
)
Then conditionally render your modal in the template:
{% if show_predictions_modal %}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endif %}

How to add a button in email input?

I am trying to put a button inside an email input in a Django form.
This is the code with the button next to the email input:
<div class="container" id="notifyEmailFormContainer">
<form action="{% url "landing:notify_email_add" %}" method="post" id="notifyEmailForm">
{% csrf_token %}
<div class="form-group row">
<div class="col-sm-10 input-group" id="emailInput">
<div class="input-group-addon" id="comingSoonEmailIcon"><i class="fa fa-envelope fa fa-2x" aria-hidden="true"></i></div>
<input class="form-control" type="email" name="email" placeholder="Your email...." maxlength="255" required id="id_email"/>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-block btn-primary" onclick="addNotifyEmail()" id="submitNotifyEmail">Notify Me</button>
</div>
</div>
</form>
</div>
I have a tried a couple answers in similar questions but it seems I can't get it to work.

html - invalid value of multi input radio button

I have multi input type radio buttons on my page and when I submitted it, on the server side, that two values are exchanged, I have no idea how to debug it.
So here my code,
<div id="is_partial_time" class="form-group">
<label class="col-md-3 col-sm-4 control-label" for="is_partial_time">Would you accept a CDD or a replacement contract</label>
<div class="col-md-7 col-sm-8">
<div id="group_is_partial_time" class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="radio" name="is_partial_time" value="true"/>Yes
</label>
<label class="btn btn-info active">
<input type="radio" name="is_partial_time" value="false" checked="checked"/>No
</label>
</div>
</div>
</div>
<div id="is_replacement_contract" class="form-group">
<label class="col-md-3 col-sm-4 control-label" for="is_replacement_contract">Would you accept a partial time?</label>
<div class="col-md-7 col-sm-8">
<div id="group_is_replacement_contract" class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="radio" name="is_replacement_contract" value="true"/>Yes
</label>
<label class="btn btn-info active">
<input type="radio" name="is_replacement_contract" value="false" checked="checked"/>No
</label>
</div>
</div>
</div>
Example,
on the web form ():
I choose:
Would you accept a replacement contract? Yes
Would you accept a partial time? No
On the server side:
Would you accept a replacement contract? No
Would you accept a partial time? Yes
Info: I'm using python Flask.
Thank you.
Your <label ..> are at the wrong place. It should be
<div id="is_partial_time" class="form-group">
<label class="col-md-3 col-sm-4 control-label" for="is_partial_time">Would you accept a partial time?</label>
<div class="col-md-7 col-sm-8">
<div id="group_is_partial_time" class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="radio" name="is_partial_time" value="true"/>Yes
</label>
<label class="btn btn-info active">
<input type="radio" name="is_partial_time" value="false" checked="checked"/>No
</label>
</div>
</div>
</div>
<div id="is_replacement_contract" class="form-group">
<label class="col-md-3 col-sm-4 control-label" for="is_replacement_contract">Would you accept a CDD or a replacement contract</label>
<div class="col-md-7 col-sm-8">
<div id="group_is_replacement_contract" class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="radio" name="is_replacement_contract" value="true"/>Yes
</label>
<label class="btn btn-info active">
<input type="radio" name="is_replacement_contract" value="false" checked="checked"/>No
</label>
</div>
</div>
</div>

Categories