I add multi radio box in twig page like this:
<div class="cc-selector">
<input id="avatar-1" type="radio" name="avatar" value="1" />
<label class="drinkcard-cc avatar-1" for="avatar-1"></label>
<input id="avatar-2" type="radio" name="avatar" value="2" />
<label class="drinkcard-cc avatar-2" for="avatar-2"></label>
<input id="avatar-3" type="radio" name="avatar" value="3" />
<label class="drinkcard-cc avatar-3" for="avatar-3"></label>
<input id="avatar-4" type="radio" name="avatar" value="4" />
<label class="drinkcard-cc avatar-4" for="avatar-4"></label>
<input id="avatar-5" type="radio" name="avatar" value="5" />
<label class="drinkcard-cc avatar-5" for="avatar-5"></label>
<input id="avatar-6" type="radio" name="avatar" value="6" />
<label class="drinkcard-cc avatar-6" for="avatar-6"></label>
</div>
in Output in see whitespace:
how do can i remove whitespace in twig template?!
You can use spaceless filter. It will do exactly what you want : removing whitespace between HTML elements only (keeping the ones inside).
Using this in Twig :
{% apply spaceless %}
<div class="cc-selector">
<input id="avatar-1" type="radio" name="avatar" value="1" />
<label class="drinkcard-cc avatar-1" for="avatar-1"></label>
<input id="avatar-2" type="radio" name="avatar" value="2" />
<label class="drinkcard-cc avatar-2" for="avatar-2"></label>
<input id="avatar-3" type="radio" name="avatar" value="3" />
<label class="drinkcard-cc avatar-3" for="avatar-3"></label>
<input id="avatar-4" type="radio" name="avatar" value="4" />
<label class="drinkcard-cc avatar-4" for="avatar-4"></label>
<input id="avatar-5" type="radio" name="avatar" value="5" />
<label class="drinkcard-cc avatar-5" for="avatar-5"></label>
<input id="avatar-6" type="radio" name="avatar" value="6" />
<label class="drinkcard-cc avatar-6" for="avatar-6"></label>
</div>
{% endapply %}
Will give this HTML :
<div class="cc-selector"><input id="avatar-1" type="radio" name="avatar" value="1" /><label class="drinkcard-cc avatar-1" for="avatar-1"></label><input id="avatar-2" type="radio" name="avatar" value="2" /><label class="drinkcard-cc avatar-2" for="avatar-2"></label><input id="avatar-3" type="radio" name="avatar" value="3" /><label class="drinkcard-cc avatar-3" for="avatar-3"></label><input id="avatar-4" type="radio" name="avatar" value="4" /><label class="drinkcard-cc avatar-4" for="avatar-4"></label><input id="avatar-5" type="radio" name="avatar" value="5" /><label class="drinkcard-cc avatar-5" for="avatar-5"></label><input id="avatar-6" type="radio" name="avatar" value="6" /><label class="drinkcard-cc avatar-6" for="avatar-6"></label></div>
Since the contents of the template is HTML I'd advise you to use SeeoX's approach.
But I've decided to mention the other option to assign the contents of a template to a variable and apply filters which could be useful sometimes:
{% set contents %}
{% include ('cc-selector.twig') %}
{% endset %}
contents spaceless:
{{ contents | spaceless }}
replace only new lines:
{{ contents | replace({"\n": ""}) | raw }}
working example
It may be because of the linebreak between the input & the label. Removing that space may/may not help, but try that.
<div class="cc-selector">
<input id="avatar-1" type="radio" name="avatar" value="1" /><label class="drinkcard-cc avatar-1" for="avatar-1"></label><input id="avatar-2" type="radio" name="avatar" value="2" /><label class="drinkcard-cc avatar-2" for="avatar-2"></label><input id="avatar-3" type="radio" name="avatar" value="3" /><label class="drinkcard-cc avatar-3" for="avatar-3"></label><input id="avatar-4" type="radio" name="avatar" value="4" /><label class="drinkcard-cc avatar-4" for="avatar-4"></label><input id="avatar-5" type="radio" name="avatar" value="5" /><label class="drinkcard-cc avatar-5" for="avatar-5"></label><input id="avatar-6" type="radio" name="avatar" value="6" /><label class="drinkcard-cc avatar-6" for="avatar-6"></label>
</div>
Related
This is my input form. Here, the Price label save as string in Database. How can change it into integer format. I'm using mongodb 3.2 version
<section>
<div class="container mt-4">
<div class="row">
<div class="col-md-6">
<h2 class="text-center">Add Product</h2>
<form action="/admin/add-product" method="POST" enctype="multipart/form-data">
<label for="">Name</label>
<input type="text" name="Name" class="form-control">
<label for="">Category</label>
<input type="text" name="Category" class="form-control">
<label for="">Price</label>
<input type="number" name="Price" class="form-control">
<label for="">Description</label>
<input type="text" name="Description" class="form-control">
<label for="">Image</label>
<input type="file" name="Image" class="form-control">
<button type="submit" class="btn btn-success mt-4">Submit</button>
</form>
</div>
</div>
</div>
</section>
Add to cart
addProduct:(product,callback)=>{
db.get().collection("product").insertOne(product).then((data)=>{
console.log(data)
callback(data.ops[0]._id)
})
}
Before adding the product to database change Price to integer
let Price=parseInt(req.body.Price)
req.body.Price=Price
then add product to mongodb
I am using Angular 7. I don't know where the error occurs in this form. It always shows form is not a known property of this method. Where did I make a mistake in the below code? I am getting this error.
Can't bind to 'formGroup' since it isn't a known property of 'form'
<form [formGroup]="newClientForm">
<fieldset>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter name" class="form-control" name="name" formControlName="name" #name required="required" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter email" class="form-control" name="email" formControlName="email" #email required="required" pattern="([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="password" class="st0" placeholder="Password" class="form-control" name="password" formControlName="password" #password required="required" pattern=".{6,}"
title="Minimum 6 characters required" autocomplete="off" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter mobile" class="form-control" name="mobile" formControlName="mobile" #mobile required="required" />
</div>
<br>
<div class="row" style="text-align:center">
<!-- <input type="submit" value="Register" /> -->
<button type="submit" class="st1" value="register" (click)="register()">Register</button>
</div>
<br>
<div class="row" style="text-align:center">
<div class="forgot">
Login?
</div>
</div>
<br>
</fieldset>
</form>
Try this stackblitz link reactive form. I have created a similar form using your html code and have run it.
Things i did were very basics:
Imported ReactiveFormsModule from #angular/forms
and have created a formgroup in ts file and added all controls you used in your html.
It runs well.
Let me know if your issue is different from the solution provided.
I am new in Material Component and facing a problem since yesterday. I am using a input text filed for design a signup form but every field take extra underline, I cannot find out the issue please.
<form class="example-form" (ngSubmit)="onSignup(f)" #f="ngForm">
<label class="registr">Registration Form</label>
<table class="example-full-width" cellspacing="0"><tr>
<td><mat-form-field class="example-full-width">
<input matInput id="fname" name="fname" placeholder="First name">
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
<input matInput id="lname" name="lname" placeholder="Last Name">
</mat-form-field></td>
</tr></table>
<table class="example-full-width" cellspacing="0"><tr>
<td><mat-form-field class="example-full-width">
<input type="email" matInput placeholder="Enter your email" id="email" name="email" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
<mat-select placeholder="Select Role">
<mat-option *ngFor="let role of roles" [value]="role" value="option" required>{{role}}</mat-option>
</mat-select>
</mat-form-field></td>
</tr></table>
<mat-form-field>
<input type="password" matInput placeholder="Enter your password" id="password" name="password" [type]="hide ? 'password' : 'text'">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>
<button type="button" class="btn btn-info d-none d-lg-block m-l-15" type="submit">Sign Up</button>
</form>
In my express app I have a separate file for middlewares. I used express.static to make the resources available to the app. Code from middlewares.js...
app.use(express.static('public'));
app.use(express.static('node_modules/vue/dist'));
app.use(express.static('node_modules/bootstrap/dist/css'));
app.use(express.static('node_modules/bootstrap/dist/js'));
app.use(express.static('node_modules/multiple.js'));
app.use(express.static('node_modules/chart.js/dist'));
It works fine for all the routes. However, when I try to define a parameterized route, and render a template this way, it fails to load up the resources. Express fails to find CSS/JS/Image files from those statics. What am I missing here? Here is my code for the route..
app.get('/invoices/:id', app.authenticated, (req, res) => {
Invoices.find({_id: req.params.id}, (err, invoice) => {
if (err) {
res.json({error: err});
}
res.render('invoicesCreate');
});
});
Updated: The View file
{{#section 'classes'}}has-navigation page-dashboard{{/section}}
{{#section 'body-classes'}}-fluid{{/section}}
<div class="row" id="invoicer">
<div class="col-xs-12 col-md-6">
Fill your details and get live preview in the right side
<form class="" action="/invoices" method="post" enctype="multipart/form-data">
<div class="">
<div class="invoiceform-logo-container">
<input type="file" name="profilelogo" id="fileinput" accept="image/*" v-on:change="updateImage()">
<img v-bind:src="logo" alt="" />
</div>
<div class="invoiceform-number"></div>
<div class="invoiceform-currency"></div>
</div>
<div class="divider"></div>
<div class="">
Your Name / Company Name
<textarea name="company_name" rows="8" cols="40" v-model="from"></textarea>
Client Name / Company Name
<textarea name="client_name" rows="8" cols="40" v-model="to"></textarea>
\{{date_title}}
<input type="date" name="start_date" v-model="date">
\{{due_date_title}}
<input type="date" name="end_date" v-model="due_date" v-bind:min="date">
\{{balance_title}} \{{balance}}
<div class="input-group">
<span class="input-group-addon">$</span>
<input name="end_date" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="invoiceform-itemlist" v-on:focusout="checkToRemove()">
<div class="">
\{{item_header}}
\{{quantity_header}}
\{{unit_cost_header}}
\{{amount_header}}
</div>
<div class="" v-for="item in items">
<input type="text" name="items[1][item_name]" v-model="item.head">
<input type="number" name="items[1][item_quantity]" v-model="item.quantity" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_rate]" v-model="item.rate" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_amount]" v-model="item.amount">
</div>
<button type="button" name="button">Add Item</button>
</div>
<div class="divider"></div>
<div class="">
\{{subtotal_title}} \{{subtotal}}
\{{tax_title}}
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" v-model="tax">
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> %
</span>
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> F
</span>
</div>
<div id="discount" v-if="fields.discount">
Discount <input type="number" name="" v-model="discounts">
</div>
<div id="shipping" v-if="fields.shipping">
Shipping <input type="number" name="shipping" v-model="shipping">
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="discount" v-model="fields.discount"> \{{discounts_title}}
</label>
<label class="btn btn-primary">
<input type="checkbox" name="shipping" v-model="fields.shipping"> \{{shipping_title}}
</label>
</div>
</div>
<div class="divider"></div>
<div class="">
Total <input type="number" name="name" v-model="total" min="0">
\{{amount_paid_title}} <input type="number" name="total" v-model="amount_paid" min="0" v-bind:max="total">
</div>
<div class="divider"></div>
<div class="">
\{{notes_title}}
<input type="text" name="name" v-model="notes">
\{{payment_terms_title}}
<input type="text" name="name" v-model="terms">
<button type="submit" name="button">Save Now</button>
<button type="button" name="button">Download PDF</button>
</div>
</form>
</div>
<div class="col-xs-12 col-md-6 hidden-sm-down"></div>
</div>
{{#section 'script'}}
window.invoice = {{{json defaultInvoice}}}
console.log({{{json defaultInvoice}}})
{{/section}}
Here is my code of send-page:
<p>[[!FormIt?
&hooks=`email,FormItLog,spam,emailUser,redirect`
&emailTo=`heash94#gmail.com`
&emailSubject=`[[+subject]]`
&emailFromName=`[[+name]]`
&emailTpl=`ContactTpl`
&redirectTo=`62` ]]</p>
<div>[[+fi.error.error_message]]</div>
<form action="[[~[[*id]]]]" method="post"><input type="hidden" name="nospam:blank" value="" />
<div>
<label for="name">Name: </label> <input id="name" type="text" name="name:required" value="[[+fi.name]]" /> <span>[[+fi.error.name]]</span>
</div>
<div>
<label for="name">Email: </label> <input id="email" type="text" name="email:email:required" value="[[+fi.email]]" /> <span>[[+fi.error.email]]</span></div>
<div>
<label for="subject">Theme: </label> <input id="subject" type="text" name="subject:required:stripTags" value="[[+fi.subject]]" /> <span>[[+fi.error.subject]]</span></div>
<div>
<label for="message">Text: </label><span>[[+fi.error.message]]</span> <br /> <textarea id="message" name="message:required:stripTags" rows="7" cols="55">[[+fi.message]]</textarea></div>
<div>
<input type="submit" name="Submit" value="Отправить" /></div>
</form>
I tried many examples, but they send to my email empty messages.
Here is my reciver-page code:
This message [[+name]] ([[+email]]) was sand with callback form:
[[+message]]
But in response I have only "This message () was sent with callback form: ".
Modx Revolution.
Sounds like modx is not seeing the name="email:email:required" as 'email' - put your CSS/JS validation in another attribute & also use the &validate attribute for the formit call.