I'm trying to display radio buttons horizontally using Bootstrap-CSS and Flask-WTForms. As far as I understand, I need to use the Bootstrap class class_="radio-inline" to accomplish that. I've tried it and all I get is this:
where radio buttons are, discouragingly, organized vertically.
Flask WTForm code:
from flask.ext.wtf import Form
import csv
import os
import buildHome as bh
from wtforms import TextField, RadioField, TextAreaField, SubmitField, validators, BooleanField
class ContactForm(Form):
firstName = TextField("First name", [validators.Required("Please enter your first name.")])
lastName = TextField("Last name", [validators.Required("Please enter your last name.")])
#name = TextField("Name", [validators.Required("Please enter your name.")])
email = TextField("Email", [validators.Required("Please enter your email address."), validators.Email("Please enter your email address.")])
node_1 = BooleanField("Joan Johnson (Buckridge Inc)")
direction_1 = RadioField('', choices=[('Choice1','Choice1'),('Choice2','Choice2'),('Choice3','Choice3')])
freq_1 = RadioField('', choices=[(1,'Daily'),(7,'Weekly'),(30,'Monthly'),(183,'Yearly'),(365,'More')])
submit = SubmitField("Send")
Html template for Flask to create the html code
{% extends "layout.html" %}
{% block content %}
<form action="{{ url_for('home') }}" method=post>
{{ form.hidden_tag() }}
<h3>Part I</h3>
<div class="well span6">
<div>
{{ form.firstName.label }} {{ form.firstName }}
</div>
<div>
{{ form.lastName.label }} {{ form.lastName }}
</div>
<div>
{{ form.email.label }} {{ form.email }}
</div>
</div>
<h3>Part II</h3>
<div <form class="form-horizontal" role="form">
<div class="well span6">
{{ form.node_1 (class_="checkbox style-2 pull-left") }} {{ form.node_1.label(class_="col-sm-3 control-label") }}
{{ form.direction_1.label }} {{ form.direction_1 (class_="radio-inline") }}
{{ form.freq_1.label }} {{ form.freq_1 (class_="radio-inline") }}
</div>
{{ form.submit }}{% endblock %}
Html script, produced by the Flask WTForm script above
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">LOGO</h1>
<nav>
<ul class="menu">
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<form action="/" method=post>
<div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1454454094##65db3f398f17785503e4bf13dfe76ad4879eb792"></div>
<h3>
Part I</h3>
<div class="well span6">
<div>
<label for="firstName">First name</label> <input id="firstName" name="firstName" type="text" value="">
</div>
<div>
<label for="lastName">Last name</label> <input id="lastName" name="lastName" type="text" value="">
</div>
<div>
<label for="email">Email</label> <input id="email" name="email" type="text" value="">
</div>
</div>
<h3>Part II</h3>
<div <form class="form-horizontal" role="form">
<div class="well span6">
<input class="checkbox style-2 pull-left" id="node_1" name="node_1" type="checkbox" value="y"> <label class="col-sm-3 control-label" for="node_1">Joan Johnson (Buckridge Inc)</label>
<label for="direction_1"></label> <ul class="radio-inline" id="direction_1"><li><input id="direction_1-0" name="direction_1" type="radio" value="Choice1"> <label for="direction_1-0">Choice1</label></li><li><input id="direction_1-1" name="direction_1" type="radio" value="Choice2"> <label for="direction_1-1">Choice2</label></li><li><input id="direction_1-2" name="direction_1" type="radio" value="Choice3"> <label for="direction_1-2">Choice3</label></li></ul>
<label for="freq_1"></label> <ul class="radio-inline" id="freq_1"><li><input id="freq_1-0" name="freq_1" type="radio" value="1"> <label for="freq_1-0">Daily</label></li><li><input id="freq_1-1" name="freq_1" type="radio" value="7"> <label for="freq_1-1">Weekly</label></li><li><input id="freq_1-2" name="freq_1" type="radio" value="30"> <label for="freq_1-2">Monthly</label></li><li><input id="freq_1-3" name="freq_1" type="radio" value="183"> <label for="freq_1-3">Yearly</label></li><li><input id="freq_1-4" name="freq_1" type="radio" value="365"> <label for="freq_1-4">More</label></li></ul>
</div>
<input id="submit" name="submit" type="submit" value="Send">
</div>
</body>
</html>
</body>
</html>
I'm probably missing something rather obvious, but can't get my finger on it. Also, it's my first time using Bootstrap or any CSS styling for that matter. So that might be it
In short, What am I doing wrong?
I found a solution!
All I needed to do was to iterate through my radio buttons field while building the html template, like so:
{% for subfield in form.freq_1 %}
<tr>
<td>{{ subfield }}</td>
<td>{{ subfield.label }}</td>
</tr>
{% endfor %}
Related
I'm trying to center an entire embedded Mailchimp form in my nonprofit's Shopify but after trying a few things I'm not sure how to do this properly.
Code below:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:center; font:14px Helvetica,Arial,sans-serif; width:600px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://caffelena.us6.list-manage.com/subscribe/post?u=46238df01d2ba6f28a9a0f68d&id=e2eee316a5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe To Our Mailing List!</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; center: -5000px;" aria-hidden="true"><input type="text" name="b_46238df01d2ba6f28a9a0f68d_e2eee316a5" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
This is my view file and my controller file
View file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-http-equiv="X-UA-Compatible" content="ie=edge">
<title>Register page</title>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:45px">
<div class="col-md-4 col-md-offset-4">
<h4>Register | Custom Auth</h4><hr>
<form action="{{ route('auth.save') }}" method="post">
#if(Session::get('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
</div>
#endif
#if(Session::get('fail'))
<div class="alert alert-danger">
{{ Session::get('fail') }}
</div>
#endif
#csrf
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" placeholder="Enter username here" value="{{ old('username') }}">
<span class="text-danger">#error('username'){{ $message }} #enderror</span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" placeholder="Enter password here">
<span class="text-danger">#error('password'){{ $message }} #enderror</span>
</div>
<div class="form-group">
<label>Phonenumber</label>
<input type="tel" class="form-control" name="phonenumber" placeholder="Enter phonenumber here" value="{{ old('phonenumber') }}">
<span class="text-danger">#error('phonenumber'){{ $message }} #enderror</span>
</div>
<button type="submit" class="btn btn-block btn-primary">Sign up</button>
<br>
I already have an account, sign in
</form>
</div>
</div>
</div>
</body>
</html>
Api file
Route::post('/auth/save', [MainController::class, 'save'])->name('auth.save');
Route::post('/auth/check', [MainController::class, 'check'])->name('auth.check');
Route::get('/auth/logout', [MainController::class, 'logout'])->name('auth.logout');
Route::group(['middleware'=>['AuthCheck']], function(){
Route::get('/auth/login', [MainController::class, 'login'])->name('auth.login');
Route::get('/auth/register', [MainController::class, 'register'])->name('auth.register');
Route::get('/client/dashboard', [MainController::class, 'dashboard']);
});
This is my Rest API and blade file.I have the error Undefined variable: errors, but i cant find where is the problem. Can anyone help me ? I search maybe there is a problem in kernel config, but i everything is fine.*
I am learning VueJS following a course in Udemy, and I have this code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/968b5b8bf4.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-header">Nuevo Usuario</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name" >Nombre Completo</label>
<input v-model="name" type="text" class="form-control" />
</div>
<div class="form-group">
<label for="email">Correo Electrónico</label>
<input v-model="email" type="email" class="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<input v-model="password" type="password" class="form-control" />
</div>
<button #click.prevent="addUser" class="btn btn-primary btn-block">Ingresar Usuario</button>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-header">Actualizar Usuario</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">Nombre Completo</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="email">Correo Electrónico</label>
<inputt type="email" class="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<input type="password" class="form-control" />
</div>
<button #click.prevent="modifyUser" class="btn btn-primary btn-block">Guardar Cambios</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mt-3">
<table class="table table-bordered table-striped">
<thead class="text-center">
<th>#</th>
<th>Nombre Completo</th>
<th>Correo Electrónico</th>
<th>Acciones</th>
</thead>
<tbody>
<tr class="text-center" v-for="(user, index) in users">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<button class="btn btn-success btn-sm">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-danger btn-sm">
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
and then, my VueJS code:
new Vue({
el: '#app',
data: {
newUser: {
name: '',
email: '',
password: '',
},
users: [],
},
methods: {
addUser () {
var nuevo = {}
nuevo.name = this.newUser.name
nuevo.email = this.newUser.email
nuevo.password = this.newUser.password
this.users.push(nuevo)
this.newUser.name = ''
this.newUser.email = ''
this.newUser.password = ''
},
},
})
As you can see, I am creating a variable to save the data obtained by a form and send it to an array. Then use the v-for to iterate on each of them and have them displayed in a table. But I am getting this error:
vue.js:634 [Vue warn]: Property or method "name" is not defined on the
instance but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property.
<input v-model="name" type="text" class="form-control" />
should be
<input v-model="newUser.name" type="text" class="form-control" />
as you defined the data as {newUser: {name: ""}}.
do same to your other fields such as email
I want to have a different forms for the identity.tpl page and registration.tpl.
But the two references on the same form page customer-form.tpl.
How can I do ?
My form is static, it works perfectly for the registration.tpl page.
custom-form.tpl :
{include file='_partials/form-errors.tpl' errors=$errors['']}
<form action="{$action}" id="customer-form" class="js-customer-form" method="post">
<section>
<div class="col-md-6 mt-15">
<div class="row">
<label for="">
Civilité <sup class="c-warning">*</sub>
</label>
<label class="ml-60 mr-20" for="">
<input name="id_gender"
type="radio"
value="1">
Monsieur
</label>
<label for="">
<input name="id_gender"
type="radio"
value="2">
Madame
</label>
</div>
<div class="row">
<div class="col-md-3 plr-0 ">
<label for="">
Nom <sup class="c-warning">*</sub>
</label>
</div>
<div class="col-md-6">
<input name="lastname" type="text" value="" required>
</div>
</div>
<div class="row">
<div class="col-md-3 plr-0 ">
<label for="">
Prénom <sup class="c-warning">*</sub>
</label>
</div>
<div class="col-md-6">
<input name="firstname" type="text" value="" required>
</div>
</div>
<div class="row obligatory">
<label for=""><sup>*</sup>Champs obligatoires</label>
</div>
</div>
<div class="col-md-6 pt-55">
<div class="row">
<div class="col-md-4 plr-0 ">
<label for="">
Adresse e-mail <sup class="c-warning">*</sub>
</label>
</div>
<div class="col-md-6">
<input name="email" type="email" value="" required>
</div>
</div>
<div class="row">
<div class="col-md-4 plr-0 ">
<label for="">
Mot de passe <sup class="c-warning">*</sub>
</label>
</div>
<div class="col-md-6">
<input
name="password"
type="password"
value=""
required >
</div>
</div>
<div class="row">
<div class="col-md-4 plr-0 ">
</div>
<div class="col-md-6 ml-10">
<label for="">
<input
name="newsletter"
type="checkbox"
value="1">
S’inscrire à la newsletter
</label>
<!-- <input class="mt-10" type="submit" value="S'INSCRIRE"> -->
</div>
</div>
<footer class="form-footer clearfix">
<input type="hidden" name="submitCreate" value="1">
{block "form_buttons"}
<button class="btn form-control-submit pull-xs-right" data-link-action="save-customer" type="submit">
S'INSCRIRE
</button>
{/block}
</footer>
</div>
</section>
</form>
identity.tpl :
{extends 'customer/page.tpl'}
{block name='page_content'}
<div class="container container-id container-perso">
<h2 class="legal">{l s='Your personal information'}</h2>
{render file='customer/_partials/customer-form.tpl' ui=$customer_form}
</div>
{/block}
identity.tpl :
{extends file='page.tpl'}
{block name='page_header_container'}{/block}
{block name='page_content_container'}
{hook h="displaySliderImg"}
<div class="container container-id container-user">
{block name='register_form_container'}
<h2 class="legal">{l s='Create an account'}</h2>
<p class="text-center mt-10">Remplissez les informations ci-dessous.</p>
<div class="row bg-grey ptb-30 plr-50 mt-90" id="registration">
<div class="col-md-12">
{$hook_create_account_top nofilter}
<section class="register-form">
{render file='customer/_partials/customer-form.tpl' ui=$register_form}
</section>
</div>
</div>
</div>
<p>{l s='Already have an account?'} {l s='Log in instead!'}</p>
{/block}
</div>
{/block}
Copy all content from customer-form.tpl to identity.tpl and registration.tpl and then make your modifications.
As advice, you should make some changes in corresponding front controller and model object too, because it has validation based on current customer-form.tpl fields. Code should be something like this:
{render file='customer/_partials/form-that-you-want.tpl' ui=$form-that-you-want}
Good luck.
In PrestaShop each page has a unique value and this value can be fetched using the following code:
$this->context->smarty->smarty->tpl_vars['page']->value['page_name']
You will get a different value from above variable on Identity and Registration page, you can pass the value of above variable through Smarty and add a condition in 'custom-form.tpl'
I can't seem to get my checkboxes to align with the labels and select options inside a well using bootstrap 3.3.5. My code is:
<div class="well">
<div class="row">
<div class="col-md-6">
<label class="control-label">Checkboxes</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="checkbox">
<input type="checkbox" id="1">1
</div>
<div class="checkbox">
<input type="checkbox" id="2">2
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Select</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<select id="2" class="form_control">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
</div>
</div>
Fiddle illustrating misalignment:
https://jsfiddle.net/dwzvsoax/
I'm pretty new to bootstrap, so I'm probably doing something dumb! Thank you in advance.
Wrap your form elements and labels together with a .form-group element.
jsFiddle
Also, you should read the Boostrap Documentation on Forms
<div class="well">
<div class="form-group">
<label>Check Boxes</label>
<div class="checkbox">
<label>
<input type="checkbox" /> 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> 2
</label>
</div>
</div>
<div class="form-group">
<label>select</label>
<select id="2" class="form-control">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
</div>
you could add in to the .checkbox class an attribute margin-left:22px; in the css file and that should give you the desired effect. If it's just on one page though, just add it in style tags at the top of the page, as it may not be desirable everywhere.
I updated your fiddle