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;
}
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.
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.
Button group is not working as it should, the problem is if the "ON" is selected, it should not be selected again, but the problem is even the "ON" button is selected I am able to select the ON button again.
How can I stop my button to stop any action when the button is already selected.
This is my code for my button group:
<form action="myclass.php" method="post">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-xs myOnbutton">
// myOnbutton is the button name
<input type="radio" autocomplete="off"> ON
</label>
<label class="btn btn-default btn-xs myOffbutton">
// myOffbutton is the button name
<input type="radio" autocomplete="off"> OFF
</label>
</div>
</form>
Do anyone knows where I am making the mistake, so it is selecting the button again.
This is basic HTML. It has nothing to do with bootstrap, you just need to add names to the checkboxes so you cant select both.
<label class="btn btn-default btn-xs myOnbutton">
<input type="radio" autocomplete="off" name="switch"> ON
</label>
<label class="btn btn-default btn-xs myOffbutton">
<input type="radio" autocomplete="off" name="switch"> OFF
</label>
if you want to disable the groups after first selection,you should use jquery like Plunker :
$(".btn-xs :radio").click(function(){
$(".btn-xs :radio").attr("disabled", true); //Disable all with the same name
});
and if you want to disable selected radio button only,Plunker :
$(".btn-xs :radio").click(function(){
$(this).attr("disabled", true); //Disable all with the same name
});
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";
}