In my Django/Python application I have fields which are necessary or not, depending on what is selected in previous fields. Thats why those are not mandatory by default. I would like to run a script which would raise an error on the chosen field, depending on the selection. I would like to do that when 'Submit' button is pressed, via script.
My html code:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form method="POST" id="PostForm" data-sektor-url="{% url 'ajax_load_sektors' %}" novalidate enctype="multipart/form-data">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Report</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" id="submit" type="submit">Submit</button>
</div>
</form>
</div>
<script>
$("#submit").click(function () {
if (document.getElementById('id_res_person_1').value == '') {
HERE I WOULD RAISE AN ERROR ON THAT FIELD
}
});
</script>
You need to call a function when form is submitted, make your validation and if all good submit to the view
Here is an example:
JS
function validate(url) {
// do your validation
if(allIsOk){
// get the form
my_form.submit();
}
}
On Submit or link
<fom onsubmit="validate()">
Related
I am doing a project in Django. In my views I send data to the HTML pages with dictionaries. I can easily access that data on HTML, but when I try to access it on Javascript I can't because Javascripts thinks it's a variable name.
For example, I have a log in page. If the credentials are wrong, I send them to the same page and tell them that the username or password are wrong. I want to keep the previously written username on the form, so the person only needs to rewrite the password. I send the username from the view to the Javascript, but I can't access it.
My view code:
def login_form(request):
assert isinstance(request, HttpRequest)
if 'username' and 'password' in request.POST:
user = request.POST['username']
passw = request.POST['password']
if rightcredentials(user,passw):
tparams = {
'message': 'login successful',
}
return render(request, 'about.html', tparams)
else:
tparams = {
'login' : 'failure1',
'username_info' : user
}
return render(request, 'login_form.html', tparams)
Javascript code:
{% if login == 'failure1' %}
<form action="." method="post">
{% csrf_token %}
<div class="program-info">
<h3 class="program-title">Sign Into Your Account</h3>
<p>Wrong Username or password</p>
<div class="form-group">
<input type="text" value="" class="form-control" name="username" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Log In</button>
</div>
</form>
<script type="text/javascript">
{% autoescape off %}
var paramvalue = {{ username_info }}
{% endautoescape %}
document.getElementById("username").value = paramvalue;
</script>
{%endif%}
After inserting username: 'pedro' and the wrong password on the form I get the following error:
Uncaught ReferenceError: pedro is not defined
Is there a way to access the string username_info or a way to convert the variable name to a string?
Wrapping the {{ }} in quotation marks should do the trick
{% autoescape off %}
var paramvalue = "{{ username_info }}"
{% endautoescape %}
I am trying to get submit event triggered for my form and for some reason it is not being activated...
I have added a button to the form of type submit and have a script at the end of the body that references the javascript functions related to the form...
Any ideas??
html
{% extends "layout.html" %}
{% block title %}Upload{% endblock %}
{% block body %}
<div class="container">
<form action="/upload" id="upload-form" method="POST" enctype="multipart/form-data"></form>
<div class="form-group">
<h1>Upload</h1>
<p>Use this form to upload a json file.</p>
</div>
<div class="form-row">
<div class="form-group">
<label for="file-input">JSON file</label>
<input type="file" accept=".json" class="form-control-file" id="file-input" />
</div>
</div>
<div class="form-row">
<pre id="file-contents"></pre>
</div>
<button id="clear-button" type="reset" class="btn btn-primary" disabled="true">Clear</button>
<button id="submit-button" type="submit" class="btn btn-primary" disabled="true">Submit</button>
</form>
</div>
<script src="/static/js/script.js"></script>
{% endblock %}
script.js
/**
* Event handler for form submission
*/
document.querySelector("#upload-form").addEventListener('submit', async event => {
console.log("FORM SUBMIT HANDLER");
event.preventDefault();
const formData = new FormData(event.target);
const fileString = formData.get('file-contents');
const payload = JSON.stringify({
file: fileString
});
console.log("SENDING : " + payload);
const response = await sendFile(payload);
console.log(response);
});
You're having an extra misplaced </form> closing tag immediately following the opening tag for your form. Just remove it and it should work fine.
I have an HTML form with input fields. I am trying to get the data from the input fields to be passed to a javascript function for processing. I am trying to get the value of "tenantid" but the only thing I get, when displaying the value in the popup:
first objectHMTLFormElement
How can I get values entered in the form to the Javascript code?
TIA
I have:
testing.blade.php
<script type="text/javascript" src="{{ URL::asset('js/test.js') }}">
</script>
[.. snip ..]
<form id="oogie" class="form-horizontal" role="form" method="POST" action="{{ url('') }}/dashboard">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('tenantid') ? ' has-error' : '' }}">
<label for="tenantid" class="col-md-4 control-label"> Tenant ID </label>
<div class="col-md-6">
<input id="tenantid" type="integer" class="form-control" name="tenantid" value="{{ old('tenantid') }}" required autofocus>
#if ($errors->has('tenantid'))
<span class="help-block">
<strong>{{ $errors->first('tenantid') }}</strong>
</span>
#endif
</div>
</div>
</form>
[... snip ...]
<button class="ClickMe" onclick="testme();">Click me</button>
test.js
function testme()
{
alert("got in");
var parameters = document.getElementById("oogie");
alert("first " + parameters );
}
That's because your script isn't trying to access the value of the field, but the field itself.
You should use document.getElementById(ID).value. This will fix your issue.
I have been trying to create a submit form that both makes getJSON call to display the response on html template and submits input. But I can only either submit the input or display response received from getJSON call. I have tried removing preventDefault method and adding it to my function but it is still not working.
Thank you in advance for any suggestions!
<form method="post" id="form">
<div>
<input type="text" name="newpost" style="width:300px;" placeholder="post here...">
{% if user %}
<input type="hidden" name="user_id" value="{{ user.key.id() }}">
<input id="inputButton" type="submit" value="Done">
<div id="jsonInfo"></div>
<script>
$(document).ready(function (){
$('#inputButton').click(function (e) {
var URL = 'URLEXAMPLE';
$.getJSON(URL, function(data){
for (var i = 0; i < data.length; i++){
var info = data[i].content;
$("#jsonInfo").append(info);
};
});
e.preventDefault();
});
});
</script>
{% else %}
<input type="button" class="button_active" onclick="location.href='/login'" value="Done">
{% endif %}
</div>
</form>
After the for do a
$('#form').submit(); to submit the form, e.preventDefault(); is currently blocking the default form submission so you can send the ajax request
I'm working on a django web app, and there's an html form which I need to do 2 things when the form is submitted: create a record in the app's database and post some of the values collected to another website (e.g. a payment site).
The problem I'm having is getting the form to do the 2 things simultaneously. I know an HTML form can only have one action, and I've read some posts here on StackOverflow about using javascript to get the form to execute 2 or more actions, but everything I've tried so far hasn't worked for this situation. They all seem to get only one action to work.
This is what my django template looks like right now:
{% extends "some other template" %}
{% block content %}
<div>
...
<form id=form1" name="trans_form" method="POST" >
...
<!--DATA TO POST TO PAYMENT SITE-->
<input type="hidden" name="transaction_id" value="some value" />
<input type="hidden" name="transaction_amount" value="some value"/>
<input type="hidden" name="customer_id" value="some value" />
<input type="hidden" name="customer_name" value="some value" />
<!--DATA TO POST TO PAYMENT SITE-->
...
<!--DATA TO POST TO APP DATABASE-->
<input type="hidden" name="user" value="{{ user.id }}">
<input type="hidden" name="type" value="CC">
<input type="hidden" name="ref_no" value="{{ ref_no }}">
Amount: <input type="text" name="amount" id="id_amount" required />
Ref ##: <span>{{ ref_no }}</span>
Date: <span>{{ cur_date|date:'d/m/Y' }}</span>
Submit
<!--DATA TO POST TO APP DATABASE-->
...
</form>
...
</div>
{% endblock %}
{% block script %}
<script>
function submitForm()
{
createRecord(document.forms["trans_form"]);
sendToPay(document.forms["trans_form"]);
}
function sendToPay(f)
{
f.action= "www.paymentsite.com";
f.target = null;
f.onsubmit = null;
f.submit();
}
function createRecord(f)
{
f.action = "url to view that creates the record in database";
f.target = "_blank";
f.onsubmit = null;
f.submit();
}
</script>
{% endblock %}
What do you think? Am I trying to achieve the impossible? If not, point me in the right direction. Thanks.
Why not simply POST to the payment site from your controller:
def handle_payment(request):
post_to_payment_site(request)
write_payment_info_to_db(request)
def post_to_payment_site(request):
data = {'transaction_id': request.form['transaction_id',
# etc.
}
requests.post('payment-provider-url', data=data)
If you cannot accept POST data intended for your payment provider then you can do one of the following things:
Send your payment provider an XHR request - this requires that your payment provider properly implement CORS for the endpoint you are posting to. When that request completes, you can submit the form normally.
Change the target attribute of your form to point at an iframe or a new tab / window. Then, when the iframe loads, remove the target attribute, switch the action back to your endpoint and submit.
I finally solved my problem. I'm not sure it is the most efficient solution, but here it is.
I made one more HTML page to act as a middleman between my app and the payment site. It's a very simple page, practically a replica of the first form page but with only the required fields to be posted to the payment site. This way, there's no need for much JavaScript. Submitting the form creates a record in the app database, sends the needed data to the "middleman", which then posts the data to the payment site. The user never actually sees the middleman throughout the process.
Like I said, this might not be the most efficient solution, but it works fine.
First, here's the code for the views.py:
def write_payment_info_to_db(request):
dt = datetime.now()
form = Form()
err = False
if request.method == 'POST':
#Collect data to send to GTPay
transaction_id = request.POST['transaction_id']
transaction_amount = request.POST['transaction_amount']
customer_id = request.POST['customer_id']
customer_name = request.POST['customer_name']
#Create record in db for "valid" form data
form = Form(request.POST)
if form.is_valid():
form.save()
return render_to_response('middleman.html', {'transaction_id': transaction_id,
'transaction_amount': transaction_amount,
'customer_id': customer_id,
'customer_name': customer_name},
context_instance=RequestContext(request))
else:
err = form.errors
return ...
else:
return ...
And here's the middleman:
<html>
<body onload="document.submit2paymentsite_form.submit()">
<form name="submit2paymentsite_form" action="payment-provider-url" target="_self" method="POST">
{% csrf_token %}
<input type="hidden" name="transaction_id" value="{{ transaction_id }}" />
<input type="hidden" name="transaction_amount" value="{{ transaction_amount }}" />
<input type="hidden" name="customer_id" value="{{ customer_id }}" />
<input type="hidden" name="customer_name" value="{{ customer_name }}" />
</form>
</body>