Html form not submitting data - html

This html form is not submitting data and i don't know why.I have tried to find the error and i do not seem to get around it,any help will be gladly appreciated
{% extends 'registration/base.html' %}
{% load widget_tweaks %}
{% block title %}Create account{% endblock %}
{% block body %}
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-4 card jumbotron ">
<h2><span class="badge badge-light">Create Account</span></h2><br>
<form action="{% url 'tzuzz:create_account' %}" method="post">
{% csrf_token %}
<div class="form-group">
<label>Email </label>
<input class="form-control is-valid" type="text" name="email" placeholder="Email">
<label>Names</label>
<input class="form-control is-valid" type="text" name="names" placeholder="Enter first and last name">
<label>Sex</label>
<select class="form-control" name="sex">
<option>Male</option>
<option>Female</option>
</select>
<label>Date of birth</label>
<input class="form-control is-valid" name="date" type="date">
<label>Password</label>
<input class="form-control is-valid" type="password" name="password" placeholder="Password">
</div>
<button class="btn btn-secondary">Login</button>
</form>
<br><br>
{% if error %}
<p class="alert alert-danger alert-dismissible fade show" role="alert">
{{error}}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</p>
{% endif %}
</div>
</div>
{% endblock %}

Here is the answer i forgot to include type submit in my button
<button class="btn btn-secondary" type="submit">Login</button>

Related

How check the user how much time spend on a video in

I am using django framework. I embed the youtube video link in html, I want to know that the user spend how much time on the video and save the time in database with his deatils.
the details of the user is stored in cookies. like email.
here is my code.
<div id="request" class="modal fade" {% if request.session.email %} data-backdrop="static" {% endif %} role="dialog">
{% if 'email' not in request.session %}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span class="close" data-dismiss="modal" aria-label="Close">×</span>
<h2 class="modal-title">Get start</h2>
</div>
<div class="modal-body text-center">
<form class="form-request" action="" method="post">
{% csrf_token %}
<div class="row-fields row">
<div class="form-group col-field">
<input type="text" class="form-control" name="name" required placeholder="Name *" id="name">
</div>
<div class="form-group col-field">
<input type="email" class="form-control" name="email" required placeholder="Email *" id="email">
</div>
<div class="form-group col-field">
<input type="number" class="form-control" name="phone" required placeholder="Phone *" id="phone">
</div>
<div class="col-sm-12 buttons">
<button type="submit" class="bttn-hover color-1" data-text-hover="Submit">Send request</button>
</div>
</div>
</form>
</div>
</div>
</div>
{% elif request.session.email %} {% comment %} <a href="http://www.youtube.com/watch?v=ANwf8AE3_d0"> {% endcomment %}
<iframe class="embed-responsive-item set-style-of-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY/?autoplay=1;enablejsapi=1"
allowfullscreen style="height:50%; width:65%" id="myvideo-iframe"></iframe>
<button class="btn btn-close button-closing-style" aria-label="Close" onclick="my_video_pause();"
class="close" data-dismiss="modal">close</button>
<a href="http://cdn.onlinewebfonts.com/svg/img_414950.png" class="button-closing-style" onclick="my_video_pause();" data-dismiss="modal">
</a>
{% endif %}
</div>
</div>

Checkboxes are not the same height as input boxes - Bootstrap

I want the checkboxes on the left side to be the same height as the text input boxes on the right.
HTML:
{% block content %}
<h1>{{ls.name}}</h1>
<form method="post" action="#">
{% csrf_token %}
{% for item in ls.item_set.all %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
{% if item.complete == True %}
<input type="checkbox", value="clicked", name="c{{item.id}}" checked>
{% else %}
<input type="checkbox", value="clicked", name="c{{item.id}}">
{% endif %}
</div>
</div>
<input type="text", value="{{item.text}}" class="form-control">
</div>
{% endfor %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="submit", name = "newItem", value="newItem" class="btn btn-primary">Add Item</button>
</div>
<input type="text", name="new">
</div>
<button type="submit", name = "save", value="save" class="btn btn-primary">Save</button>
</form>
{% endblock %}
give you check box class then in you linked css give checkbox height and width acc to your need
<div class="input-group-text">
{% if item.complete == True %}
<input class="check" type="checkbox", value="clicked", name="c{{item.id}}" checked>
{% else %}
<input class="check" type="checkbox", value="clicked", name="c{{item.id}}">
{% endif %}
then in your css
.check {
height:20px;
width:20px;
}

How to change the default registration in django

I have used django's default registration. I want to edit this forms because it's appearance does not look very good to me. I want to convert the instructions into tool tip or something better looking how can I do it?I am new to django
)
html
<div class="header-wrapper">
<div class="header" style="background-image: url('/static/img/tele-bg.jpg');">
<div class="title-container text-center">
<h2>Register</h2>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
For this you can use django bootstrap forms or you can make your own custom tempalate for registering the user.
If you want django bootstrap form which are pretty good you can try like this:
First install pip install django-bootstrap4
Then add the bootstrap4 into your INSTALLED_APPS:
INSTALLED_APPS = [
...........
'bootstrap4',]
Then you can render the forms in your template with this tag:
{% load bootstrap4 %}
<div class="header-wrapper">
<div class="header" style="background-image: url('/static/img/tele-bg.jpg');">
<div class="title-container text-center">
<h2>Register</h2>
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
EDIT: This is just a demo you can change this design as you want:
<div class="header-wrapper">
<div class="header" style="background-image: url('/static/img/tele-bg.jpg');">
<div class="title-container text-center">
<h2>Register</h2>
<form method="post">
{% csrf_token %}
Username:<br>
<input type="text" name="username" placeholder="Username"><br>
Password:<br>
<input type="password" name="password1" placeholder="Password"><br>
Password Confirmation:<br>
<input type="password" name="password2" placeholder="Confirm Password"><br><br>
<input type="submit" value="Submit">
</form>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>

Register button not working in registration_form.html django

I've been following the How to Django 1.9 tutorials and I came across a problem. My registration_form.html has been working properly ever since installment but after adding bootstrap to the template, the registration button has no action. This is the registration_form.html without the bootstrap
{% extends "rango/base.html" %}
{% block body_block %}
<h1>Register Here</h1>
<form method="post" action=".">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit" />
</form>
{% endblock %}
This is the registration_template with the bootstrap
{% extends 'rango/base.html' %}
{% block body_block %}
<link href="http://v4-alpha.getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<div class="jumbotron">
<h1 class="display-5">Register</h1>
</div>
<form role="form" method='post' action='.'>
{% csrf_token %}
<div class="form-group">
<p class="required"><label class="required" for="id_username">Username:</label>
<input class="form-control" id="id_username" maxlength="30" name="username" type="text" />
<span class="helptext">
Required. 30 charachters or fewer. Letters, digits and #/./+/-/_ only.
</span>
</p>
<p class="required"><label class="required" for="id_email">Email:</label>
<input class="form-control" id="id_email" name="email" type="email"/>
</p>
<p class="required"><label class="required" for="id_password1">Password:</label>
<input class="form-control" id="id_password1" name="password1" type="password"/>
</p>
<p class="required"><label class="required" for="id_password2">Password Confirmation:</label>
<input class="form-control" id="id_password2" name="password2" type="password" />
</p>
</div>
<button type="submit" class="btn btn-primary" value='Submit'>Submit</button>
</form>
<p>
Already a member?
Log In Here!
</p>
{% endblock %}
Add url in your template form under action attribute as showed below:
<form role="form" method='post' action='{% url 'example' %}'>
This may fix your issues!!!.Make sure that your form has no errors.Try to add your views.py,urls.py and models.py, so we can figure it out easily.
Must be an input type not a button type use <input type="submit" class="btn btn-primary" value='Submit'>Submit</button> instead
<button type="submit" class="btn btn-primary" value='Submit'>Submit</button>

Getting smaller size for text input field in django bootstrap

I am using textfields, radiobuttons, textarea etc in my form. The textfield size is very small and looks very bad:
How can I make slightly larger? How the height of text area is smaller than that of gender field?
Code is:
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Name</label>
<div class='col-md-6'>
{% render_field form.name class="form-control" placeholder="Full Name" type="text" %}
{% if form.name.errors %}
<div class="alert alert-danger tpad">
{{ form.name.errors.as_text }}
</div>
{% endif %}
</div>
</div>
<!-- name ends here -->
{# Gender goes here #}
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Gender</label>
<div class='col-md-6'>
{% for radio in form.gender %}
{{ radio }}
{% endfor %}
{{form.gender.errors}}
</div>
</div>
<!-- enroll ment number -->
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_enrollment_number'>Enrollment Number</label>
<div class='col-md-6'>
{% render_field form.enrollment_no class='form-control' placeholder='Enrollment Number' type='text' %}
{% if form.enrollment_no.errors %}
<div class="alert alert-danger tpad">
{{ form.enrollment_no.errors.as_text }}
</div>
{% endif %}
</div>
</div>
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_faculty_name'>Faculty Name</label>
<div class='col-md-6'>
{% render_field form.faculty_name class='form-control' rows="1" cols="1" placeholder='Faculty Name' type='text' %}
{% if form.faculty_name.errors %}
<div class="alert alert-danger tpad">
{{ form.faculty_name.errors.as_text }}
</div>
{% endif %}
</div>
</div>
The code generated is:
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Name</label>
<div class='col-md-6'>
<input class="form-control" id="id_name" maxlength="200" name="name" placeholder="Full Name" type="text" />
</div>
</div>
<!-- name ends here -->
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Gender</label>
<div class='col-md-6'>
<select id="id_gender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
Solution: The text size rendered by bootstrap was 20px. I changed it manually to 40px, here:
.uneditable-input{display:inline-block;height:40px;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555;vertical-align:middle;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}input,textarea,
Since your code generate an id for the name input, adding (or update) this rule in your CSS would do the trick
#id_name {
height: 30px; /* where you give it same height as your select */
}
Another way, more generic for your form elements (input text and select), could be like this
form-control select,
form-control input[type=text] {
height: 30px;
}
I think you should resize the box like: cols or you should make it as a textarea.
For example that part of the box:
{% render_field form.name class="form-control" cols="1" placeholder="Full Name" type="text" %}