Please help, I have provided below three files: application.py, ask.html, and link.html. In ask.html, I'm trying to ask the user to provide me a link. They will then be redirected to link.html where there is a button to take them to that link. But once the button is pressed, it doesn't take me to the link, comes out error 404 not found.
In application.py:
#app.route("/")
def ask():
return render_template("ask.html")
#app.route("/link")
def link():
weblink = request.args.get("weblink")
return render_template("link.html", weblink=weblink)
In ask.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ask</title>
</head>
<body>
<form action="/link">
<input placeholder="weblink here" name="weblink" type="text">
<input type="submit">
</form>
</body>
</html>
In link.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ask</title>
</head>
<body>
Go to Link
</body>
</html>
First, change:
<form action="/link">
to:
<form action="/link" method="post">
Then, in link():
#app.route("/link", methods = [“GET”, “POST”])
def link():
weblink = request.form.get("weblink")
...
Change
<form action="/link">
To
<form action = "{{url_for('link')}}" method = "post">
in application.py
change
#app.route('/link')
to
#app.route('/link', methods=['GET', 'POST'])
def link():
if request.method == 'POST':
weblink = request.form.get('weblink')
return render_template('link.html', weblink=weblink)
Related
I am trying to grab the value from the drop-down menu after clicking the submit button for which the UI looks like this :
The code for the above is as follows :
app.py
from flask import Flask, render_template, request
app = Flask(__name__)
app.debug = True
#app.route('/', methods=['GET'])
def dropdown():
colours = ['SBI', 'Kotak', 'Citi', 'AMEX', 'BOB', 'AXIS', 'HDFC', 'IDBI', 'YES', 'IndusInd']
return render_template('feba.html', colours=colours)
if __name__ == "__main__":
app.run()
index.html is in the templates folder
<!DOCTYPE html>
<html lang="en">
<style>
body {text-align:center}
</style>
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="{{url_for('static', filename='logo_1.jpg')}}" align="middle" />
<h1>KARDFINDER</h1>
<h2>json file generator for banks</h2>
<select name="colour" method="GET" action="/">
<option value="{{colours[0]}}" selected>{{colours[0]}}</option>
{% for colour in colours[1:] %}
<option value="{{colour}}">{{colour}}</option>
{% endfor %}
</select>
<input type= "submit" name="submitbutton" value ="Submit"></body>
</html>
logo_1.jpg is in the static folder
My main aim to post this question is to get a solution with the help of which I can grab the value from the drop-down menu after the submit button is clicked and I want that value stored in a variable in the app.py file
Please Help me with this.
below code works on me,
from flask import Flask, render_template, request, redirect
app = Flask(__name__)
app.debug = True
#app.route('/', methods=['GET'])
def dropdown():
colours = ['SBI', 'Kotak', 'Citi', 'AMEX', 'BOB', 'AXIS', 'HDFC', 'IDBI', 'YES', 'IndusInd']
return render_template('feba.html', colours=colours)
#app.route('/dropdown', methods = ['POST'])
def dropp():
dropdownval = request.form.get('colour')
print(dropdownval)
return redirect("/", code=302)
if __name__ == "__main__":
app.run()
<!DOCTYPE html>
<html lang="en">
<style>
body {text-align:center}
</style>
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="{{url_for('static', filename='logo_1.jpg')}}" align="middle" />
<h1>KARDFINDER</h1>
<h2>json file generator for banks</h2>
<form method="POST" action="/dropdown">
<select name="colour">
<option value="{{colours[0]}}" selected>{{colours[0]}}</option>
{% for colour in colours[1:] %}
<option value="{{colour}}">{{colour}}</option>
{% endfor %}
</select>
<input type="submit" value ="Submit">
</form>
</body>
</html>
you should learn http requests, html forms and ajax
You could also just combine the index and drop down pages into one:
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
app.debug = True
#app.route('/', methods=['GET','POST'])
def dropdown():
colours = ['SBI', 'Kotak', 'Citi', 'AMEX', 'BOB', 'AXIS', 'HDFC', 'IDBI', 'YES', 'IndusInd']
if request.method=='POST':
var = request.form['var']
return render_template('feba.html', colours=colours)
if __name__ == "__main__":
app.run()
This is a bit simpler. You can use the same html code as Mert Celik but change action="/dropdown" to action="/"
I am trying to fetch GET data receiving from an HTML form.
But it is giving me MultiValueDictError.
It is also saying
During handling of the above exception, another exception occurred:
My HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<form action="home_redirect/fd" id="redirect" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<input type="text" value={{user}} name="user">
<input type="submit">
</form>
<script>
document.getElementById("redirect").submit()
</script>
</body>
</html>
My views.py :
def home(request):
user = request.POST['user']
return render(request, 'main.html', {'login': user})
In you html i remove action and script. Like this:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<form id="redirect" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<input type="text" value={{user}} name="user">
<input type="submit">
</form>
</body>
</html>
Here we checking the method is POST then redirect to your url.
def home(request):
user = request.POST
if request.method =="POST":
return redirect('home_redirect') # home_redirect is the redirected url
return render(request, 'afl_announcement/main.html', {'login': user})
In your <form> you specify:
<form action="home_redirect/fd" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<input type="text" value={{user}} name="user">
<input type="submit">
</form>
so you make a POST request, and the data is encoded in the payload of the request. You access this data through request.POST:
def home(request):
user = request.POST['user']
return render(request, 'main.html', {'login': user})
I have built a Send Email from a Static HTML Form using Google Apps Mail. The problem is that when I submit the form, I see a confirmation message that it was sent like:
{"result":"success","data":"{\"firstname\":[\"Abhay\"]}"}
I want to remove that and besides that I want a clean text after a form submission e.g. "Thanks for submitting". Please correct my code to remove this output.
<!DOCTYPE HTML>
<html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> contact form </title>
</head>
<body>
<div>
<form id="gform" method="POST"
action="https://script.google.com/macros/s/AKfycbwlSM9z9ELHa1-
X6C_srRrB0j7FUlGgevJw7w7M/exec" >
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."
required oninvalid="this.setCustomValidity('Put here custom message')"/>
<input type="submit" value="Submit"/>
</form>
<div style="display: none;" id="thankyou_message">
<h2> <em>Thanks</em>xfn</h2>
</div>
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-
without-server/master/form-submission-handler.js"></script>
</body>
</html>
You can make an ajax request instead of submitting the from directly.
<form id="gform" onsubmit="return postMessage()">
In below
<script>
function PostMessage() {
var form = document.getElementById('gform')
fetch('"https://script.google.com/macros/s/AKfycbwlSM9z9ELHa1-
X6C_srRrB0j7FUlGgevJw7w7M/exec', {
method: 'POST',
body: new URLSearchParams(new FormData(a)).toString()
}).then(function(res){ return res.json(); })
.then(function(data){
if(data.result == "success") {
document.getElementById('thankyou_message').style.display = 'block';
}
});
return false;
}
</script>
I'm newbie to web programming and I can't understand why the following code doesn't work.
It is supposed to remove permanently the content of the div element when the button is pressed, but it disappears for a while and then reappears.
The code is the following:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form onSubmit="prueba()">
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I believe what's happening is that your button is submitting a form, which sends the form to the web server then reloads your page. So:
Your "onSubmit" JS runs immediately and clears the div content.
Your page reloads and the content comes back.
Try something like this instead of a form (i.e. remove the surrounding form tag):
<button onclick="prueba()">Entrar</button>
Try this. You don't need a form to hide a DIV
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<input type="button" onclick="prueba()" value="Entrar">
</body>
</html>
DEMO : http://jsfiddle.net/36pvts4t/2/
try this , for me this is working .This code is remove the text in div with id "uno" , on form submit .
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
console.log("Inside the function preueba ");
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form action="#" method="get" onSubmit="prueba()" target="_blank" >
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I must not understand how to change the content of my <div> tag.
Here is my html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="simple.js"></script>
<title>simple</title>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is my .js file:
function myFunction() {
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
}
When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(
What am I doing wrong here.
Update: Thanks everyone! Here is what I have working now:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" id="myurl" size="100" /></p>
</form>
<button id='clickme'>Click me</button>
<button id='noclickme'>No Click me</button>
</div>
<script src="simple.js"></script>
</body>
</html>
My .js file:
function say_something(s) {
document.getElementById("results").innerHTML = s;
}
document.getElementById("clickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Goodbye [" + url + "]");
});
A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
});
Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.
Example jsFiddle
The reason is the form label.
when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
<script src="simple.js"></script>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>