I am using a map api in my app.For selecting marker, button named "Add marker" and "Refresh map" for refresh map.I am facing the here.
After saving the data,the save button will redirect to next page.in my case,both "Add marker","Refresh map" both are doing the save buttons job and if i press "Add marker" instead of showing marker,page gets redirect to next page.this is happening after using the </form>.see my template here,
<form method="POST" action="/member/where/" >
{% csrf_token %}
<td colspan="2" class="incident-type" style="padding-left:25px">
{% for location in locationList%}
{% if location.parent_location_id == None %}
<h1>{{location.title}}</h1>
{% endif %}
{% endfor %}
<p>
<span class="map_buttons" >{% include "buttons/refreshmap.html" %}</span> <span class="map_buttons" style="margin-left:20px;">{% include "buttons/addmarker.html" %} </span>
</p>
<p id=ir-nextbtn>{% include "buttons/next.html" %}</a></form></p>
refreshmarker.html
<button type="submit" title="Refresh map" class="map_buttons button_style">Refresh map</button>
addmarker.html
<button type="submit" title="Add marker" class="map_buttons button_style">Add marker</button>
Need clarification about this issue.
The problem is because both the buttons are of type submit, when you click either of the buttons, the form gets submitted. as a result, the page gets redirected oto action of the form i.e. /member/where/
try this:-
keep the refresh as it is,
<button type="submit" title="Refresh map" class="map_buttons button_style">Refresh map</button>
and add
<button onClick=somefuntion(this)' title="Add marker" class="map_buttons button_style">Add marker</button>
and let some function do the needfull
<script>
function somefuntion(button){
// your code
document.forms[0].submit() // this will submit your form
}
</script>
Related
I want to set a banner that asks for permission to store cookies on my website(because GDPR). I've tried like this:
HTML:
{% block cookies %}
{% if cookies_check %}
{% else %}
<div class="fixed-bottom p-4" id="cookie-consent-container">
<div class="toast bg-dark text-white w-100 mw-100" role="alert">
<div class="toast-body p-4 d-flex flex-column">
<h4>Cookie Warning</h4>
<p>
This website stores data such as cookies to enable site functionality including analytics and personalization. By using this website, you automatically accept that we use cookies.
</p>
<div class="ml-auto">
<button type="button" class="btn btn-outline-light mr-3" id="btnDeny">
Deny
</button>
<button type="button" class="btn btn-light" id="btnAccept">
Accept
</button>
</div>
</div>
</div>
</div>
<script>
var fn = function () {
document.cookie = "cookie_consent=true";
document.getElementById('cookie-consent-container').hidden = true;
};
document.getElementById('btnAccept').onclick = fn;
</script>
{% endif %}
{% endblock cookies %}
and jinja2
#app.context_processor
def inject_template_scope():
injections = dict()
print(injections)
def cookies_check():
value = request.cookies.get('cookie_consent')
print(value)
return value == 'true'
injections.update(cookies_check=cookies_check)
return injections
The prints are for debugging. The problem is that the list is always empty and the banner is never showing. What should I do to make this work? Does that mean that the site is not generating any cookie to begin with? If so how can I add a cookie when the site is loaded?
A cookie can be added,read,deleted using document.cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
By default cookie delete after browser is closed.
I'm working on a simple web application that lets users rate and comment on movies, storing them in a database to be viewed later. The user inputs a movie to rate, and if that movie title is shared by multiple films, they are prompted to specify which of those films they meant. I've chosen to do this with radio buttons in my html file, but I can't figure out how to get the text of the button chosen and use it in Flask. The application takes the name of the film chosen and prints that name at the top of a different html file, but no matter what I do it always prints "None" instead of the chosen title.
I was able to find this answer: Get the text of the selected radio button in JQuery , which led me to try
var confirmed = $("input[name='confirmation']:checked").parent('label').text();
in my html script in order to obtain the text of the checked button. But when I try to request this in Flask it does not work.
confirm.html :
<div id="id02" class="modal" data-backdrop="false">
<form class="modal-content animate" action="/confirm" method="post">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
<div class="container">
<h1>Please Specify Which Title to Rate:</h1>
{% for movie in multi %}
<label class="container">{{movie["title"]}} ({{movie["year"]}})
<input type="radio" id={{movie["year"]}} name="confirmation">
<span class="checkmark"></span>
</label>
{% endfor %}
<button type="submit">Rate</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
<script>
// Get the modal when page is loaded
$(window).on('load',function(){
$('#id02').modal('show');
});
var modal = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
// variable storing the name of the film selected
var confirmed = $("input[name='confirmation']:checked").parent('label').text();
</script>
application.py :
#app.route("/confirm", methods=["GET", "POST"])
def confirm():
if request.method == "POST":
full = request.form.get("confirmed")
session["title"] = full # add movie title to session in order to use in rate function
return render_template("rate.html", full=full)
else:
return render_template("confirm.html")
I also have tried assigning an id to the button if it is checked in hopes of getting the text from the id, but when I tried this I just got "None" as well.
{% for movie in multi %}
<label class="container">{{movie["title"]}} ({{movie["year"]}})
<input type="radio" name="confirmation">
{% if checked=="checked" %}
<input type="hidden" id="confirmed" value="({{movie["year"]}})">
{% endif %}
<span class="checkmark"></span>
</label>
{% endfor %}
I'm very new to programming and this is my first time trying to make a web application, so any help on this is greatly appreciated!
When flask gives you a radio button value. It gives you the value attribute not the radio button text, so you only need to put value attributes to your radio buttons
I was building a profile picture feature, it was working fine so I left it for a while, probably a week. I came back to it and ran the local server, but when I do there's a few lines that appear in the console. But do not exist on the source file.
Source file:
<script type='text/javascript'>
Dropzone.options.myDropzone = {
autoProcessQueue : false,
paramName: 'uploaded_image',
dictDefaultMessage: "Drag and drop files or click here to upload picture",
init: function() {
var submitButton = document.querySelector("#submitBtn")
myDropzone = this;
submitButton.addEventListener("click", function() {
myDropzone.processQueue();
});
// Automatically overwrites file so the user can only upload one
this.on("addedfile", function() {
document.getElementById('submitBtn').style.visibility = "visible";
});
this.on('addedfile', function(){
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
}
};
</script>
<!-- Modal -->
<div id="picModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"></span>
<form action="{% url 'profile_test' %}" method='POST' enctype="multipart/form-data" class="dropzone" id="my-dropzone">{% csrf_token %}
<!-- submit button stays hidden by default, until user selects a picture -->
<button id='submitBtn' type='submit' class='pic-submit-button' style='visibility: hidden;'> Submit </button>
<input id='submit-all' type='file' name='uploaded_image'/>
{{form}}
</form>
</div>
</div>
Now the code I'm seeing when I run the server is only a few lines, and it's in the HTML that creates the modal:
<!-- Modal -->
<div id="picModal" class="modal" style="display: block;">
<!-- Modal content -->
<div class="modal-content">
<span class="close"></span>
<form action="/api/profile_test/" method="POST" enctype="multipart/form-data" class="dropzone dz-clickable" id="my-dropzone"><input type="hidden" name="csrfmiddlewaretoken" value="WDMihPq0zDhDQGaWxSFYyvxjtmxUxsBMpAzcDqVxDGUZj11O8wtqbCfCie1m81Tf">
<!-- submit button stays hidden by default, until user selects a picture -->
<button id="submitBtn" type="submit" class="pic-submit-button" style="visibility: hidden;"> Submit </button>
*****<input id="submit-all" type="file" name="uploaded_image">
<label for="id_user">User:</label><select name="user" id="id_user">
<option value="" selected="">---------</option>
<option value="2">Brian</option>
<option value="3">Charles</option>
</select>
<label for="id_img">Img:</label><input type="file" name="img" required="" id="id_img">
<div class="dz-default dz-message"><span>Drag and drop files or click here to upload picture</span></div></form>
</div>
</div>*****
The last chunk of code I put stars around is the code that is unknown to me. The Django project I cloned was using gulp, I talked to my friends and they said that it may have something to do with it, maybe it's doing something with Dropzone.js?. But why would it inject a random dropdown menu listing users in Django? I didn't use gulp myself because I just wanted to develop the feature, but that may have been a mistake.
Possibly the
{{form}}
is causing this issue.
Users are entering their address and age. When the find button is hit, it will display the inputs. However, for the case where input is not valid, I would like to add an error message.
How do I check if the input is not valid and gives an error message? I want my error message to be on the same page as where values are input. The code does not work correctly.
<div class = "Information">
<h2>Your Infomation</h2>
<form action="" method=post>
if (error){
<p id="error"><strong></strong>{{error}}
}
<div id = "address">
<label>address</label>
<input type=text name=address value="{{request.form.address}}">
</div>
<div id = "age">
<label>age</label>
<input type=text name=age value="{{request.form.age}}">
</div>
<div class = "Input">
<a href="/results">
<button type = "button" class = "btn btn-primary" value="find" >Find!</button>
</a>
</div>
</form>
</div>
#app.route('/results',methods=['GET','POST'])
def result():
error = None;
if request.method == 'POST':
if request.form['age'] != '14':
error='You did not enter proper values'
return render_template('template.html',error=error)
You need to use proper Jinja syntax to render templates:
{% if error %}<p id="error">{{ error }}</p>{% endif %}
Beyond that, the button you've added to your form doesn't actually submit the form, as you've given it the "button" type rather than the "submit" type and have wrapped it in an anchor for some reason. Replace the contents of <div class="Input"> with:
<button type="submit" class="btn btn-primary" value="find">Find!</button>
My web app currently has 3 pages. I obtained a user input on the first page, which I passed to my view.py, and calculated some variables I needed for my 2nd page. I want to pass the variables that exist in my 2nd page to the third page, but don't know how to go about it. Any suggestions on how to modify the html for the 2nd page to achieve this?
So far, I'm solving this problem by making my variables global in view.py. This seems to work but doesn't seem to be a viable long-term solution.
Thanks!
existing variables: thePrediction, theData
The html for the 2nd page:
<div class = "caption-full">
<h3>Currently, I have a {{thePercentage}} chance of getting adopted.</h3>
{% if thePrediction[1] + thePrediction[2] >0%}
<form action="/third_page" method="GET">
<button class="btn btn-large btn-info" >Go to third page</button>
</form>
{% endif %}
</div>
I think I figured it out:
<div class = "caption-full">
<h3>Currently, I have a {{thePercentage}} chance of getting adopted.</h3>
{% if thePrediction[1] + thePrediction[2] >0%}
<form action="/third_page" method="GET">
<input type="hidden" name="alignment" value="{{thePassedValue}}" />
<button class="btn btn-large btn-info" >Go to third page</button>
</form>
{% endif %}
</div>