We Keep Coding

How to display value from the database in input tag in django?

I am having an HTML template for displaying my form data to allow users to view as well as edit their data:-
<div id="div_id_first_name" class="form-group">
<label for="id_first_name" class="requiredField"> First name<span class="asteriskField">*</span> </label>
<div class="">
<input type="text" name="first_name" value="{{p_form.first_name}}" maxlength="20" class="textinput textInput form-control" required id="id_first_name" />
</div>
</div>
<div id="div_id_last_name" class="form-group">
<label for="id_last_name" class="requiredField"> Last name<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="last_name" value="{{p_form.last_name}}" maxlength="20" class="textinput textInput form-control" required id="id_last_name" /></div>
</div>
<div id="div_id_id_no" class="form-group">
<label for="id_id_no" class="requiredField"> ID No.<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="id_no" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_id_no" /></div>
</div>
<div id="div_id_phone_no" class="form-group">
<label for="id_phone_no" class="requiredField"> Phone No.<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="phone_no" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_phone_no" /></div>
</div>
<div id="div_id_cgpa" class="form-group">
<label for="id_cgpa" class="requiredField"> CGPA<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="cgpa" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_cgpa" /></div>
</div>
<div id="div_id_degree" class="form-group">
<label for="id_degree" class="requiredField"> Degree<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="degree" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_degree" /></div>
</div>
<div id="div_id_stream" class="form-group">
<label for="id_stream" class="requiredField"> Stream<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="stream" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_stream" /></div>
</div>
I am rendering this page with the view funstion:-
def profile(request):
if request.method == 'POST':
u_form = UserUpdateForm(request.POST, instance=request.user)
p_form = ProfileUpdateForm(request.POST,
request.FILES,
instance=request.user.profile)
if u_form.is_valid() and p_form.is_valid():
u_form.save()
p_form.save()
messages.success(request, f'Your account has been updated!')
return redirect('profile')
else:
u_form = UserUpdateForm(instance=request.user)
p_form = ProfileUpdateForm(instance=request.user.profile)
v_form = ProfileViewForm(instance=request.user.profile)
context = {
'u_form': u_form,
'p_form': p_form,
'v_form': v_form
}
return render(request, 'users/profile.html', context)
I am trying to get this:-
But The view turns out to look something like this:-
I am unable to figure out how can I display those values.

Problem is that p_form.first_name is an input field itself. Please try to add .value fields this way:
value="{{p_form.first_name.value}}"

Show/hide text boxes depending on checkbox

I want to hide/show text boxes when user click on check boxes. I already searched in stack overflow, but I didn't get the solution..
Here is my code:
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Email" id="email" name="email" >
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" >
<span class="glyphicon glyphicon-phone form-control-feedback"></span>
</div>
I want to give one check box name display contact info or not. If user click on yes I want to show these two fields. If user click no I want to hide these two fields.
Can anyone help me?
Thanks in advance.

You can achieve this simple task by jQuery. Suppose you have checkbox with an id of contact-info you have to check that is checked with the help of :checked seudo class and display input type display none and display block.
if('#contact-info').is(":checked")){
$('#email,#mobile').css("display","block");
}else{
$('#email,#mobile').css("display","none");
}

function check(opt){
if(opt == 'yes'){
document.getElementById('email').style.display="";
document.getElementById('mobile').style.display="";
document.getElementById("no").checked=false;
}
else
if(opt == 'no'){
document.getElementById('email').style.display="none";
document.getElementById('mobile').style.display="none";
document.getElementById("yes").checked=false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group has-feedback">
<input style="display:none;" type="text" class="form-control" placeholder="Email" id="email" name="email" >
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Name" id="name" name="name" >
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input style="display:none;" type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" id="mobile" >
<span class="glyphicon glyphicon-phone form-control-feedback"></span>
</div>
Yes : <input type="checkbox" onclick="check('yes');" id="yes" />
No : <input type="checkbox" onclick="check('no');" id="no" />

Please check
$(function(){
$('your checkbox id or name').prop(true/false);
checkBoxOnchange();
});
function checkBoxOnchange() {
if ($('your checkbox id or name').is(":checked")) {
$("input[name='email']").show();
$("input[name='mobile_number']").show();
} else {
$("input[name='email']").hide();
$("input[name='mobile_number']").hide();
}
}
and in ur checkbox on-change event call checkBoxOnchange()

Toggle element visibility based on validation results

Given the following HTML
<form class="form-horizontal"
asp-controller="Installation"
asp-action="CreateUser"
method="post">
<fieldset>
<!-- Form Name -->
<legend>Account Creation</legend>
<!-- Username input-->
<div class="form-group">
<label class="col-md-4 control-label" for="userName">Username</label>
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span class="has-error" asp-validation-for="UserName"></span>
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">E-mail</label>
<div class="col-md-4">
<input id="email"
name="email"
type="text"
placeholder="jane#doe.com"
class="form-control input-md"
required=""
asp-for="Email">
<span class="help-block">Enter your e-mail address</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password"
name="password"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="Password">
<span class="help-block">Enter a password that is at least 8 characters, fewer than 30</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="confirmPassword">Confirm Password</label>
<div class="col-md-4">
<input id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="PasswordConfirmation">
<span class="help-block">Re-enter your password</span>
</div>
</div>
<!-- Submit -->
<div class="form-group">
<label class="col-md-4 control-label"
for="createAccount"></label>
<div class="col-md-4">
<button id="createAccount" type="submit" name="createAccount" class="btn btn-primary">Create Account</button>
</div>
</div>
</fieldset>
</form>
I would like to hide/show the usernameTip span, when the asp-validation-for span contains a validation error, along with any other span that i'm using as a tip when there is an adjacent asp-validation-for span.
Reading this post I can get the JavaScript needed to show/hide the span. The only thing I can't figure out is if the View actually has knowledge of the validation errors in a manor that lets me conditionally hide/show that usernameTip span if errors exist.
Does anyone know what I need to do in order to toggle the visibility based off the data annotation errors on my model?
When looking in Chrome, asp-validation-for span is turned into this at compile time:
<span class="has-error field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">Usernames must be between 2 and 50 characters</span>
EDIT
When validation fails, there is a ==$0 appended to the end.
Usernames must be between 2 and 50 characters == $0
I do not see any classes being added or removed from the span when the validation fails.
Edit 2
I got this working using the accepted answer. For those looking in the future however, you can use MVC's ViewData property in the view to determine if there are errors.
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
#if (ViewData.ModelState[nameof(AccountCreationViewModel.UserName)] == null || ViewData.ModelState[nameof(AccountCreationViewModel.UserName)].Errors.Count == 0)
{
<span class="help-block">Enter a unique Username</span>
}
else
{
<span class="label label-danger" role="alert" asp-validation-for="UserName"></span>
}
</div>

<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span id="error" class="has-error" asp-validation-for="UserName"></span>
</div>
<script>
if( $("#error").text().length>0){
//show usernameTip
}
</script>

How to activate form field one by one with the valid values user entered

I do have a Form and now I need to activate this form's field one by one. That mean If an user fill out first field correctly (Not empty and should be valid) then I need to activate second one and so on.
This is my HTML form:
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
This is how I tried it in jquery:
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
$('.sequence').on('change blur keyup', enableNextElement);
});
This coding working for me but not work with validation. That mean if an user entered a not valid email next field is activating. But I want to keep next field disable till user entered a valid email.
Can anybody tell me how to do it?
UPDATED HTML
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<div class="element-right">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>
Thank you.

your both function call simultaneously and you havent mention sequence class to textboxes so you can try
http://jsfiddle.net/Vishnuk/uqfe2403/6/
html
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name sequence" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email sequence" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone sequence" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Script
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
enableNextElement(event);
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
});

Try this
$(".form-control").focusout(function() {
var t = $(this).val();
var k = $(this);
setTimeout(function() {
if (t) {
k.parent().parent().next(".form-group").find(".form-control").removeAttr('disabled');
} else {
k.parent().parent().nextAll(".form-group").children().find(".form-control").attr('disabled', '');
}
}, 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<div class="form-group element-right">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>

Input boxes not spaced when viewport is resized (bootstrap)

I'm currently creating a sign up form using bootstrap and I was making the first name and last name text boxes inline but when I resize the browser by compacting it, the display of both text boxes seem to stick? I've tried using inline-block and also margin but it'll affect the others too which would look odd. Here is an sample. (You'd have to zoom-out to see the effect.)
http://jsfiddle.net/5ghc1r18/6/
<div class="container">
<div class="wrapper">
<div class="row">
<div style="overflow:auto;width:90%" class="col-lg-10">
<form id="form" action="welcome.php" class="form-horizontal" method="POST">
<h1 class="text-center">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Sign Up
</h1>
<div class="form-group">
<div class="col-lg-6">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
<div class="col-lg-6">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="email" placeholder="Email Address" name="email" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="text" placeholder="Mobile" name="mobile" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<label for="day">Date of Birth:</label>
<div id="date1" class="datefield">
<input id="day" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="DD" />/
<input id="month" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="MM" />/
<input id="year" type="tel" onkeypress="return isNumberKey(event)" maxlength="4" placeholder="YYYY" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<select name="gender" class="form-control" required>
<option value="">Select one</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">I'm not sure</option>
</select>
</div>
</div>
<div class="form group">
<div style="width:100%">
<button type="submit" class="btn btn-success btn-block"> <i class="fa fa-plus"></i> Sign up!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks for the help!

The problem in your HTML is here
<div class="form-group">
<div class="col-lg-6">
put <div class="form-group"> inside the <div class="col-lg-6"> currently you are doing opposite.
e.g;
<div class="col-lg-6">
<div class="form-group">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>

You can give margin to the input boxes:
input[type="text"] {
margin: 10px auto;
}