I have two v-model
case 1:
<input type="date" v-model="date" class="form-control" id="date" placeholder="Date" v-on:change="onDateChange()">
<input type="text" v-model="editForm.u1" class="form-control" id="u1" placeholder="U1">
this works fine
case 2:
<input type="date" v-model="date" class="form-control" id="date" placeholder="Date" :change="onDateChange()">
<input type="text" v-model="editForm.u1" class="form-control" id="u1" placeholder="U1">
In this even changing u1 triggers onDateChange();
:change binds the attribute, as in v-bind:change="onDateChange()"
#change="onDateChange() is the shorthand syntax for v-on.
Related
I'm using Laravel and Bootstrap 4.2.1 and would like to display a form label over two required in-line text fields. I can get the label over the two fields by placing the form label outside of a form group but I am unable to get the red asterisk (*) display next to the form label. I've placed my code here in jsfiddle.
<label for="contact_first_name" class="form-label required">Contact Name</label>
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name" name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
Try adding a span tag with class="text-danger" or style="color:red" inside the label tag and the * in it. Either way, you will get an * sign with the label.
Below, I have used the bootstrap approach of adding class="text-danger" to the span tag.
<label for="contact_first_name" class="form-label required">Contact Name
<span class="text-danger">*</span>
</label>
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name" name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
Here is the link to the Jsfiddle.
#AhmadKarimi Thank you for your comment and solution. I just figured it out (by accident) while working on a different form. I needed to drop the label form control down one level inside of the form-group. It doesn't appear to work in jfiddle though.
<div class="form-group mb-3">
<label for="contact_first_name" class="form-label required">Contact Name</label>
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name"
name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name"
name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
How to I can show date in laravel blade from my table in this input field
<div class="form-group">
<strong>Date:</strong>
<input type="date" name="date" class="form-control" value="{{ $productInovoice->date }}" placeholder="Date">
</div>
I think you should format the date to fix that.
try this:
<div class="form-group">
<strong>Date:</strong>
<input value="{{ $productInovoice->date->format('Y-m-d') }}" type="date" name="date" class="form-control" placeholder="Date">
</div>
or you can use the model attribute like below, put this function in your product model:
public function setDateAttribute($value)
{
$this->attributes['date'] = Carbon::parse($value)->format('Y-m-d');
}
This worked for me:
<input type="date" class="form-control" id="published_at" name="published_at" required value="{{ date_format(date_create($book->published_at), 'Y-m-d') }}">
<input type="date" name="date" class="form-control" value="{{ $productInovoice->created_at->format('d M y') }}" placeholder="Date">
You can try this:
<input type="date" name="date" class="form-control"
value="{{ date_format(date_create($productInovoice->date), 'd/m/Y')) }}">
I am in the process of learning AngularJS, still at the most basic stages of form validation. I followed the official tutorial here, and managed to get the validation working like they have, where if input is invalid, the background changes colour.
That is all nice and counts as an important step in my learning, but how do I move a little further and have the validation add / remove CSS classes required by Bootstrap to show visual cues?
Here is my HTML code:
<form novalidate class="css-form">
<div class="form-group">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
<div class="form-group">
<label class="control-label" for="lname">Last Name</label>
<input type="text" id="lname" placeholder="Last Name" class="form-control" ng-model="user.lname" required >
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required >
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" id="password" placeholder="Password" class="form-control" ng-model="user.password" required >
</div>
<div class="form-group">
<label class="control-label" for="emailpref">Want annoying emails?</label>
<select class="form-control" ng-model="user.emailpref" required>
<option value="Null">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
In the Bootstrap3 documentation, it says that if I need to show a valid state, I must add a CSS class of has-success like so:
<div class="form-group has-success">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
How can I get my AngularJS validation to do that? At the moment, my AngularJS is as follows:
function UserCtrl($scope) {
$scope.master = {};
$scope.user = { fname: "J", lname: "Watson", password: "test", email: "j.watson#world.com", emailpref: "Yes" };
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
To add dynamic classes based on field validation you need to do two things
Give your form a name
`<form novalidate class="css-form" name="form1">`
Give each input field a name too. You can then use expression to determine state of error of a field
<div class="form-group has-success" ng-class="{'has-success':form1.fname.$invalid}">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required name="fname">
</div>
Please go through the form guide http://docs.angularjs.org/guide/forms for more details.
You can use angular-validator.
Disclaimer: I am the author of angular-validator
I have been using PayPal Payments Standard. Everything has been working great. Now I want to add support for coupon discounts.
According to the documentation, the discount_amount_cart variable appears to be what I want:
Single discount amount charged cart-wide.
It must be less than the selling price of all items combined in the cart. This variable overrides any individual item discount_amount_x values, if present.
Applies only to the Cart Upload command.
So, I add the variable to my form:
<form id="Paypal" name="Paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input id="cmd" name="cmd" type="hidden" value="_cart">
<input id="upload" name="upload" type="hidden" value="1">
<input id="business" name="business" type="hidden" value="kelly#hopskipdesign.com">
<input id="custom" name="custom" type="hidden" value="Client">
<input id="discount_amount_cart" name="discount_amount_cart"
type="hidden" value="$4.00">
<input id="tax_cart" name="tax_cart" type="hidden" value="$1.65">
<input id="currency_code" name="currency_code" type="hidden" value="USD">
<input id="return" name="return" type="hidden" value="http://www.hopskipphotography.com/Order/Confirm/Client">
<input id="cancel_return" name="cancel_return" type="hidden" value="http://www.hopskipphotography.com/Order/Cart/Client">
<input id="cbt" name="cbt" type="hidden" value="Place Order">
<input id="item_name_1" name="item_name_1" type="hidden" value="Photo #6">
<input id="amount_1" name="amount_1" type="hidden" value="$20.00">
<input id="item_number_1" name="item_number_1" type="hidden" value="B49A8382">
<input id="quantity_1" name="quantity_1" type="hidden" value="1">
<input id="item_name_2" name="item_name_2" type="hidden" value="Photo #10">
<input id="amount_2" name="amount_2" type="hidden" value="$20.00">
<input id="item_number_2" name="item_number_2" type="hidden" value="B49A8428">
<input id="quantity_2" name="quantity_2" type="hidden" value="1">
<div class="checkout-button">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="Check out with PayPal">
</div>
</form>
But when I click the button, everything appears except the discount:
I found a similar question where the answer was to use the tax_cart variable instead of tax_x. But I was already using tax_cart.
Any other ideas as to why discount_amount_cart is not working?
Unlike other amount variables, discount_amount_cart does not like dollar signs.
When I changed the field to:
<input id="discount_amount_cart" name="discount_amount_cart"
type="hidden" value="4.00">
PayPal displayed the discount:
I have this in my view :
<input id="#Html.TextBoxFor(m => m.UserName)" type="text" placeholder="Username" autofocus required>
<input id="(#Html.PasswordFor(m => m.Password))" type="password" placeholder="Password" required>
Its working but my result is
What am I doing wrong?
Either you want to put HTML as tags:
<input id="UserName" type="text" placeholder="Username" value="#Model.UserName" autofocus required />
<input id="Password" type="password" placeholder="Password" value="#Model.Password" required />
Or let Razor to do it for you:
#Html.TextBoxFor(m => m.UserName);
#Html.PasswordFor(m => m.Password);
You are mixing it together. Your example starts with pure HTML, then it finds the Razor command which renders another input tags, inside the pure HTML one. Prefer Razor code when you need to return the model type.