I have a html form with an add button which is attached to the right hand side of a textbox, and a separate delete button. The form uses some bootstrap css. However, the delete button shows up on the page as a small grey square, with no text inside it. What is making it show up so strangely?
<form id = "myform">
<div class="col-lg-6">
<h3> New Group: </h3>
<div class="input-group">
<input type="text" id = "input" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick = "addTag()" >Add</button>
</span>
</div><!-- /input-group -->
<table class = "table" padding = "5">
<ul id = "list" class="list-group">
</ul>
</table>
<button type = "button" class="btn btn-default" value = "Delete" id = "deleteBtn" onClick = "if(confirm('Are you sure?'))
Delete()"></button>
</form>
You must move the text from value in between the tags
<button type = "button" class="btn btn-default" id = "deleteBtn" onClick = "if(confirm('Are you sure?')) Delete()">Delete</button>
JSFiddle
The spaces. You shouldn't use spaces for and after your "="-s. So:
value = "Delete"
is bad.
value="Delete"
is okay. Good luck! :-)
Related
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;
}
I have two btn btn-default buttons displaying in-line, but the hover effect of the second one (the ActionLink button) is not taking on the same properties of the first. The first one looks like it has some Css targeting the input tag, so I was figuring to give that input tag to the second button; however, I can't seem to integrate it correctly without errors. Could anyone point me in the direction of combining an input tag with an ActionLink button?
Here's my code for both buttons, the "Create" button is on top, and it's the one with the input tag that I want to also give to the "Back to List" button on the bottom. I haven't included Css for now, as my issue is more to do with html. But if it is necessary, please let me know.
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
#Html.ActionLink("Back to List", "Index", routeValues: null, htmlAttributes: new {#class = "btn btn-default", #role = "button" })
</div>
</div>
I appreciate any and all answers!
There is no btn-default anymore in bootstrap4. Use btn-secondary instead. That should give you the hover effect you want consistently.
Just so you know you don't have to use <input /> for your submit button. You can just use the regular <button /> with the right type:
<button type="submit" class="btn btn-secondary">Create</button>
So you don't have to stick with the thinking that you have to use an input tag for the other button.
#Html.ActionLink() will generate an anchor tag <a href="# /> unless you override it, so you can't use it to generate an input tag anyway.
This Works for me. Not super clean looking.
<div class="input-group">
<div class="input-group-addon">
#Html.ActionLink("Back to List", "Index", routeValues: null, htmlAttributes: new {#class = "btn btn-default", #role = "button" })
</div>
<input class="text-box single-line form-control" style="width:100%;">
</div>
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.
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";
}