How to put button value to database Django - html

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.

Related

How to handle error when id value of table is null when using Modal confirm delete?

so i have modal to confirm delete action, but when the tabel data is null / dont have any data, got have an error because i dont have id to call? but if i have more than 1 data my delete modal code is works perfectly.. an error occurs when I delete the last data in the table.
i have already try :
the error message is :
Undefined variable $listproduct on --> index.blade.php)
Possible typo $listproduct
Did you mean $listproducts?
my loop function is #foreach($listproducts as $listproduct)
this is my button :
<td>
<a href="#" class="btn btn-danger delete"
data-toggle="modal"
data-target="#deleteModal"
productid="{{$listproduct->id}}"> Delete
</a>
</td>
this is my modal :
<!-- Delete Warning Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('products.destroy', $listproduct->id ) }}" method="post">
#csrf
#method('DELETE')
<div class="modal-body">
<label for="id">
<input id="id" name="productid">
</label>
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
</div>
</form>
</div>
</div>
</div>
<!-- End Delete Modal -->
this is my script to get ID ( I use this when i write this code :
<form action="{{ url('delete', 'id' ) }}" method="post">
but still not works
) :
$(document).on('click','.delete',function(){
let id = $(this).attr('productid');
$('#id').val(id);
});
this is my Product Controller :
public function destroy($id): RedirectResponse
{
$deleteads = Product::findOrFail($id);
$deleteads->delete();
return redirect('products');
}
and this is my route (iam using Resource):
Route::group(['middleware' => ['auth']], function() {
***Route::resource('products', ProductController::class);***
Route::delete('/selected-products', [ProductController::class, 'deleteSelectedItem'])->name('products.deleteSelected');
});
First, you can't use your own productid attribute in HTML, thus you should use data attribute you save your information.
Second, your form in the modal doesn't get it's action attribute updated and thus only One product ID remains in the action attribute.
Try putting a # in the action first, and then when an item is clicked to be deleted, use JQuery to update your form's action and put the proper URL and the ID of the product.
Your ID should be saved in data attribute like below:
<td>
<a href="#" class="btn btn-danger delete"
data-toggle="modal"
data-target="#deleteModal"
data-productid="{{$listproduct->id}}"> Delete
</a>
</td>
Form in the modal:
<form action="#" method="post" id="delete_product_form">
#csrf
#method('DELETE')
<div class="modal-body">
<label for="id">
<input id="id" name="productid">
</label>
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
</div>
</form>
JQuery code for handling the form's action attribute update:
$(document).on('click','.delete',function(){
let id = $(this).data('productid');
$('#delete_product_form').attr('action', '/products/' + id);
});

Using checkbox to display or hide button in Angular

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;
}

Enable and disable submit button depends the value of Viewbag

I am trying to Enable or Disable the submit button depends the value of Viewbag.IsBtnEnabled. If Viewbag.IsBtnEnabled = 'Y' or Viewbag.IsBtnEnabled=null it should be enabled else the submit btn should be disabled. My code is working except null value. Here is my code
<div class="center-block col-sm-6">
<button type="submit" class="btn btn-primary form-control" id="btnSave"
name="submit" #(ViewBag.IsBtnEnabled == "Y" ? "" : "disabled")>
Save
</button>
</div>
If Viewbag.IsBtnEnabled = 'Y' or Viewbag.IsBtnEnabled=null it should be enabled else the submit btn should be disabled.
To achieve the requirement, you can try following code snippet.
<div class="center-block col-sm-6">
<button type="submit" class="btn btn-primary form-control" id="btnSave"
name="submit" #((ViewBag.IsBtnEnabled == "Y" || ViewBag.IsBtnEnabled == null) ? "" : "disabled")>
Save
</button>
</div>

Angularjs button query

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.

Html button is too small

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! :-)