Hi guys I am new to Angular JS(1.5). I have a form with two buttons, btn1 and btn2. I also have two text fields.
How can I make sure that btn2 should work only when both text fields have data in them.
Kindly help me out.
I am using this code,
<button type="button" class="btn btn-primary btn-s" ng-disabled="queryExecuting || !canExecuteQuery()" ng-click="executeQuery()">
<span class="zmdi zmdi-play"></span> BTN1 </button>
<input type="text" name="dbname" ng-model="dbname" required placeholder="dbname"/>
<input type="text" name="tname" ng-model="tname" required placeholder="tname"/>
<button type="submit" class="btn btn-primary btn-s" ng-disabled="queryExecuting || !canExecuteQuery()" ng-click="saveToGDPQuery(dbname,tname)">
<span class="zmdi zmdi-play"></span> BTN2 </button>
You could do below:
<button type="submit" class="btn btn-primary btn-s" ng-disabled="!dbname || !tname" ng-click="saveToGDPQuery(dbname,tname)">
If you have those fields within a form you could also potentially use $error.required flags.
And by the way, you should have a "dot" in your model.
Related
I'm building a form consisted of button. I want to get value from a highlighted button being sent to a parameter when submit button is clicked, but the problem is I only found a way to sent value from a radio button. Is there any equivalent way to do this?
I know this is only applicable for radio button, so I'm searching an equivalent queryselector that will give exact action like code below but for button
document.querySelector('input[name=customButton]:checked').value
<button type="button" class="btn" id="customButton1" name="customButton" value="1">
<label for="customButton1">Excellent</label>
<button type="button" class="btn" id="customButton2" name="customButton" value="2">
<label for="customButton2">Not good</label>
You cannot convert a radio directly to a button like you did. The HTML is not valid
You can style a radio like a button or do this
document.getElementById("myForm").addEventListener("click",function(e) {
const tgt = e.target.closest("button")
if (tgt.matches(".customButton")) document.getElementById("customButton").value = tgt.value
})
<form id="myForm">
<input type="hidden" name="customButton" id="customButton" value="" />
<button type="button" class="btn customButton" value="1">Excellent</button>
<button type="button" class="btn customButton" value="2">Not good</button>
</form>
do you have some tips how to put buttons values to the Django sqlite database?
I have a page with some buttons with theirs values and some final button, which would send the buttons values to the database after the final button click.
Thanks.
Here is HTML intention:
<body>
<div class="row">
<form action="" method="post">
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-lg overflow-hidden" value="1">Example1</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-lg overflow-hidden" value="2">Example2</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-lg overflow-hidden" value="3">Example3</button>
</div>
</div>
<input type="submit" value="Send to database">
</form>
</body>
class ValuesButtons(models.Model):
value = models.CharField(max_length=100, verbose_name="Value")
For Example: user clicks on example 1, next on Submit and it will send to database as value 1
If you are trying to submit the values in your buttons to your django database, you would have to first change your buttons by adding a name to them like this:
<button type="button" class="btn btn-primary btn-lg overflow-hidden" value="1" name="btn-1">Example1</button>
then inside your view, you could check to see if the button was pressed and there is a value in POST. Also, this won't work if your value is "0":
if (request.method == "POST):
if (request.POST.get('btn-1', False)):
new_value_button = ValueButtons(value=request.POST.get(
'btn-1'))
new_value_button.save()
This will get and save the values of the specific button pressed.
I am trying to display or hide buttons based on the checkbox. Following is my HTML code :
<input class="form-check-input" [(ngModel)]="switchCase" type="checkbox" id="flexSwitchCheckChecked" (change)="toggleButton()"
<button class="btn btn-primary" *ngIf="!switchCase" [disabled]="!userform.valid">Button A</button>
<button class="btn btn-primary" *ngIf="switchCase" [disabled]="!userform.valid">Button B</button>
Following is my TS code :
toggleButton(){
console.log("Before : "+this.switchCase);
this.switchCase = !this.switchCase;
console.log("After : "+this.switchCase);
}
The value of switchCase changes according to the checkbox value and logs correctly in the console. However, the buttons do not toggle accordingly and I can only see Button A. I am new to angular and not sure where I am going wrong
.html Code
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked"
(change)="toggleButton()">
<button class="btn btn-primary" *ngIf="!switchCase">Button
A</button>
<button class="btn btn-primary" *ngIf="switchCase">Button
B</button>
.ts code
public switchCase: boolean = false;
toggleButton() {
this.switchCase = !this.switchCase;
}
Here i'm using Angular2 i implement some html code for user access but why this data is not binding at Angular2 Source code side
Htmlcode
<form class="form-horizontal" novalidate [formGroup]="EmployeeForm">
<fieldset>
<div class="form-group" [ngClass]="{'has-error': (EmployeeForm.get('EmpName').touched ||
EmployeeForm.get('EmpName').dirty) &&
!EmployeeForm.get('EmpName').valid }">
<label for="name">Name</label>
<input type="text" class="form-control" formControlName="EmpName" [(ngModel)]="EmpName" />
<span>{{EmpName}}</span>
<span class="help-block" *ngIf="(EmployeeForm.get('EmpName').touched ||
EmployeeForm.get('EmpName').dirty) &&
EmployeeForm.get('EmpName').errors">
<span *ngIf="EmployeeForm.get('EmpName').errors.required">
Please enter your first name.
</span>
<span *ngIf="EmployeeForm.get('EmpName').errors.minlength || EmployeeForm.get('EmpName').errors.maxlength ||
EmployeeForm.get('EmpName').pattern">
The first name must be longer than A3 and max5 characters.
</span>
</span>
</div>
<button type="submit" class="btn btn-success" [disabled]="!EmployeeForm.valid" (click)="SaveDetails(EmployeeForm)">SaveDetails</button>
</fieldset>
</form>
component.ts
Here its pinging but data is not binding its showing as
zain = FormGroup {asyncValidator: null, _pristine: false, _touched: true, validator: function, _onCollectionChange: function…}
SaveDetails(Employee) {
}
try to change code from
<button type="submit" class="btn btn-success" [disabled]="!EmployeeForm.valid" (click)="SaveDetails(EmployeeForm)">SaveDetails</button>
to
<button type="submit" class="btn btn-success" [disabled]="!EmployeeForm.valid" (click)="SaveDetails(EmployeeForm.value)">SaveDetails</button>
I am using Parsley.js for validating my Bootstrap formatted HTML forms. It works pretty fine. What I want to do now is to change the color for the submit button if validation fails.
I read the documentation from Parsley.js, but I could not find something like adding a class to the submit button, depending on validation.
Example:
<form>
<input type="text" id="fehler" name="fehler" required>
<button type="submit" class="btn btn-default">Submit</button>
</form>
After click (and validation) should it change to something like this:
<button type="submit" class="btn btn-default novalid"></button>
or this:
<button type="submit" class="btn btn-danger"></button>
Try this :
Put an ID on your button like "validateFormButton" and create this method to call after sending your form :
function change_class(formIsValid) {
var btn = document.getElementById("validateFormButton");
if(formIsValid)
btn.className= "btn btn-default novalid";
else
btn.className= "btn btn-danger";
}