from django import forms
class MyForm(forms.Form):
checkbox = forms.MultipleChoiceField(
choices=[('apple', 'apple'), ('orange', 'orange')],
widget=forms.CheckboxSelectMultiple
)
urls
from django.urls import path
from . import views
urlpatterns=[
path('myform/',views.my_form,name='my_form')
]
views
from django.shortcuts import render
from aapp.forms import MyForm
# Create your views here.
def my_form(request):
if request.method == 'POST':
selected = request.POST.getlist('checkbox')
print(selected)
else:
form = MyForm()
return render(request, 'my_form.html', {'form': form})
urls
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('aapp.urls'))
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button id="submit-btn" type="submit">Submit</button>
</form>
</body>
<
when i click checkbox apple - i need to show apple? How to fix it?
Any other ways to print checkbox values in a template in Django-models-forms-templates?
Multiple checkbox value shows on templates when i click the value
Related
I am trying to fetch data to html page from database but i am not getting any output on the html page
models.py
from django.db import models
class image(models.Model):
name=models.CharField(max_length=100)
img=models.ImageField(upload_to='slideshow1')
admin.py
from django.contrib import admin
from .models import image
# Register your models here.
admin.site.register(image)
views.py
from django.shortcuts import render,redirect
from django.http import HttpResponse
from django.contrib.auth.models import User,auth
from django.contrib import messages
from .models import image
def slideshow1(request):
dest=image.objects.all()
return render(request,'slideshow1.html',{'dest':dest})
urls.py
from django.urls import path,include
from . import views
urlpatterns = [
path('login/',views.login,name='login'),
path('signup/',views.signupform,name='signup'),
path('logout/',views.logout,name='logout'),
path('slideshow1',views.slideshow1,name='slideshow1'),
]
slideshow1.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
{% block content %}
<h1 >{{image.name}}</h1>
{% endblock %}
</body>
</html>
you can not access all the data without using 'for loop' even you have only one entry in the table. So use loop to extract it.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
{% for x in image %}
<h1 >{{x.name}}</h1>
<img src="{{x.img.url}}">
{% endfor %}
</body>
</html>
I'm implementing i18n with flask_babel like below and it works in local server.
However it doesn't work in production after deploy.
It can show translated with "_('English')", however it does show {{ _('English')}} as is in HTML.
Is there any way to show an appropriate message in HTML?
[main.py]
from flask_babel import gettext as _
#app.route('/', methods=['GET'])
def root():
flash(_('English'), 'success')
return render_template('index.html')
[index.html]
<!doctype html>
<html>
<head>
</head>
<body>
{{ _('English')}}
</body>
</html>
i have heard that two way binding is not free in react.
from this i understood that if we add an input field and type some text inside it shouldn't reflect pressed keys.
but with hooks(App1.js) or without hooks(App2.js) input field behaving the same, it reflects the typed text. can someone tell me the difference between the following codes( App1.js, App2.js).
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<div id="root"></div>
<script src="App1.js"></script>
<div id="root2"></div>
<script src="App2.js"></script>
</body>
</html>
App1.js:
import React,{useState} from "react"
import {render} from "react-dom"
const App1 = ()=>{
console.log("nnn")
const [name,setName] = useState("hello")
return (
<div>
<label htmlFor="name">
</label>
<input
id = "name"
value = {name}
onChange = {(e)=>(setName(e.target.value))}>
</input>
</div>
)
}
render(<App1/>, document.getElementById("root"))
App2.js:
import React,{useState} from "react"
import {render} from "react-dom"
const App = ()=>{
return (
<div>
<label htmlFor="name">
</label>
<input
id = "name">
</input>
</div>
)
}
render(<App/>, document.getElementById("root2"))
why do we need hooks in this scenario ? when input in App2 is reflecting the typed text from keyboard.
i am new to react so kindly ignore my stupidity if i am being stupid.
There is no 2-way data binding happening there. On your App2.js you are using an Uncontrolled Component which is not bound to React but to the normal DOM.
//html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/babel"></script>
<div id="content"></div> //show the content of component here
</body>
</html>
//js code
import {render} from 'react-dom';
import React from 'react';
class Calculate extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
render(<Calculate />, document.getElementById('content'));
File directory structure:
package.json:
I want to show "hello world"in the html page without webpack to babel nor online files,because i use npm tool download react,react-dom and babel to node_modules,then i use "import React from 'react';"to import what i need,but see nothing in the page,i can't know why
If you are creating a bundle file from all your js files using webpack,provide a path to that bundle file in your script tag and place the script tag below the div with id=content
Hey bruh but what is that <div> tag for?
It doesn't describe anything.
First make some content in your <div>
for example:
<head>
<style>
.container {
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
This is just a example,but for js use <script> tag.
<script>
import {render} from 'react-dom';
import React from 'react';
class Calculate extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
render(<Calculate />, document.getElementById('content'));
</script>
Whoops I made a mistake, REALLY gave there this, it was written on my starter notes And i have saw it and though it is ok.Sorry. ;-)
What i want to do is, just send down the HTML+css+js files as static pages on some routes like:
#app.route('/', methods=[GET])
def index():
return <html+css+js>
Particularly i would like to stay away from templates, and rely on ajax/websocket connecting to other routes of the flask app to get the JSON objects and update the webpage. Also I had a hard time in linking css and js files in html. The url_for method seems to completely rely on template system and doesn't seem to work properly in my case.
eg.
Directory Structure
redirect-server(app home folder)
static
index.html
main.js
venv(python3 virtualenv)
main.py(flask app)
main.py
from flask import Flask, redirect
from flask import render_template
app = Flask(__name__)
#app.route('/')
def index():
return redirect("/abc/xyz")
#app.route('/abc/xyz')
def abc():
return app.send_static_file("index.html")
app.run(debug=True)
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
The error I get is the following
127.0.0.1 - - [28/Oct/2015 14:07:02] "GET /abc/%7B%7B%20url_for('static',%20filename='main.js')%20%7D%7D HTTP/1.1" 404 -
The HTML is returned fine but it cannot find the js file
You send the template as a static file.
app.send_static_file("index.html")
Better render it, as shown in the docs :)
there is no way i could find this to work without relying on templates.
The following worked for me
restructuring my directories as follows
redirect-server
static
main.js
templates
index.html
main.py
main.py
from flask import Flask, redirect
from flask import render_template
app = Flask(__name__)
#app.route('/')
def index():
return redirect("/abc/xyz")
#app.route('/abc/xyz')
def abc():
return render_template("index.html")
app.run(debug=True)
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>