Change method and action inside button attribute - javascript

I want to change form method with button.onclick function. My code is working right now but it looks dirty and if I have too many buttons they will turn unreadable code block. Do we have any option to set it via button.onclick? Something like that ((onclick="form.method='patch'"))
I found something about it but they didn't work. I need to change both method and route in <button ((this area))> SUBMIT </button> If there is any way to do it I'm waiting your answers.
index.blade.php
#if($backup->trashed())
{{ Form::open(['route' => ['backup.patch', $backup->id], 'method'=>'patch', 'role'=>'form']) }}
#endif
#if(!$backup->trashed())
{{ Form::open(['route' => ['backup.delete', $backup->id], 'method'=>'delete', 'role'=>'form']) }}
#endif
<div class="btn-group btn-group-xs" role="group" aria-label="Config Tools">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Edit" onclick="window.location='{{ url("backup/{$backup->id}") }}'">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
#if($backup->trashed())
<button type="submit" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Activate">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
#endif
#if(!$backup->trashed())
<button type="submit" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
#endif
</div>
{{ Form::close() }}
web.php
Route::get('/backup/{id}', 'Admin\BackupController#show')->name("backup.show");
Route::post('/backup/{id}', 'Admin\BackupController#update')->name("backup.update");
Route::delete('/backup/{id}', 'Admin\BackupController#delete')->name("backup.delete");
Route::patch('/backup/{id}', 'Admin\BackupController#patch')->name("backup.patch");
My search results:
https://css-tricks.com/separate-form-submit-buttons-go-different-urls/
https://www.w3schools.com/tags/att_button_formmethod.asp
Thanks for your answers from now on!
Edit: You can ask "Why you didn't write form for each button?"
I'm answering, If I write form inside <div class="btn-group btn-group-xs" role="group"> buttons appearing separately.
Like this: http://jsfiddle.net/kmgd4z17/1/
But I want them as: http://jsfiddle.net/tg21j0f7/

index.blade.php
<div class="btn-group btn-group-xs" role="group" aria-label="Config Tools">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Edit" onclick="window.location='{{ url("backup/{$backup->id}") }}'">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
#if($backup->trashed())
<button type="button" class="btn btn-default" onclick="javascript : submitForm('PATCH', {{$backup->id}})" data-toggle="tooltip" data-placement="bottom" title="Activate">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
#endif
#if(!$backup->trashed())
<button type="button" class="btn btn-default" onclick="javascript : submitForm('DELETE', {{$backup->id}})" data-toggle="tooltip" data-placement="bottom" title="De-Activate">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
#endif
</div>
script
<script>
function submitForm($method, $id){
var form = document.createElement("form");
form.setAttribute('method', "POST");
form.setAttribute('action',"/backup/" + $id);
var i = document.createElement("input");
i.setAttribute('type',"hidden");
i.setAttribute('name',"_method");
i.setAttribute('value', $method);
form.appendChild(i);
var j = document.createElement("input");
j.setAttribute('type',"hidden");
j.setAttribute('name',"_token");
j.setAttribute('value', "{{Session::token()}}" );
j.setAttribute('id',"csrf-token");
form.appendChild(j);
document.body.appendChild(form);
form.submit();
}
</script>
I solved that issue with this method. I'm creating a form when pressed to a button. Maybe someone can solve with more effective way but my solution is this. :)

Related

my accesskey control is for the top row in safari and bottom row in chrome

I have a dynamic editable table with JavaScript, each row has an edit and delete button.
I have given accesskey "e" for edit and "d" for delete.
In safari ctrl+alt+e and ctrl+alt+d selects the first row of the table.
In chrome ctrl+alt+e and ctrl+alt+d selects the last row of the table.
I want it to access the first row in chrome as well.
<button id="bEdit" type="button" class="btn btn-sm btn-outline-secondary" accesskey="e" onclick="butRowEdit(this);notApplicable();">
<span class="fa fa-pencil" > </span>
</button>
<button id="bElim" type="button" class="btn btn-sm btn-outline-secondary" accesskey="d" onclick="butRowDelete(this);remove();">
<span class="fa fa-trash" > </span>
</button>
<button id="bAcep" type="button" class="btn btn-sm btn-outline-secondary" style="display:none;" accesskey="s" onclick="save();butRowAcep(this);">
<span class="fa fa-check" > </span>
</button>
<button id="bCanc" type="button" class="btn btn-sm btn-outline-secondary" style="display:none;" accesskey="c" onclick="butRowCancel(this);">
<span class="fa fa-times" > </span>
</button>
</div>````

How to hide/show using angular ng-click?

I am trying to create something like toggle so when user click on 1sideBarMenui want to displayshowMenu` and if click again it should hide it , i think below code should do it , where i am making mistake ?
main.html
<button type="button" ng-click="showSideBarMenu()" tooltip-placement="top" tooltip-popup-delay="300" uib-tooltip="Browse more" class="btn btn-success btn-circle pull-right"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>
<div class="sideBarMenu" ng-show="showMenu">
<ul>
<li>
<button type="button" title="start recording" class="btn btn-danger btn-xlarge" ng-click="recordLogs()" ng-disabled="disabledRecBtn"><span class="glyphicon glyphicon-record"></span></button>
</li>
<li>
<button type="button" class="btn btn-primary btn-xlarge" ng-click="stopLogs()" ng-disabled="disabledStopBtn"><span class="glyphicon glyphicon-stop" title="stop recording"></span></button>
</li>
<li>
<!--<button type="button" class="btn btn-success btn-md" ng-click="searchLogs()"><span class="glyphicon glyphicon-search" title="search logs in bowser"></span></button>-->
<button type="button" class="btn btn-info btn-xlarge" ng-click="serverFiles()"><span class="glyphicon glyphicon-folder-open" title="download server logged files"></span></button>
</li>
</ul>
</div>
ctrl.js
$scope.showMenu = false;
$scope.showSideBarMenu = function(){
$scope.showMenu = true;
};
$scope.toggleSideBarMenu = function() { // function name changed to be more semantic
$scope.showMenu = !$scope.showMenu;
};
Note that you don't need to initialize scope vars to false in most cases. Angular treats undefined values and false values the same way in the view.

Pass html string in controller and put into .html (angular js)

I have a problem. Call my button "off" or "on" that I needed. If active status in json is 1 then button off is showing in html, so instead. But I have tried with
ng-bind-html
Still not working, any solution for me ? Thanks
This is my code :
Controller
if(item.active === 1){
html_button = '<button type="button" class="btn btn-success"><i class="fa fa-toggle-on"></i> On</button>';
}else{
console.log(1);
html_button = '<button type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>';
}
$scope.getButtonOnOff = function(html_button) {
return $sce.trustAsHtml(html_button);
};
Html
<span ng-if="data.active === 1">
<button ng-show="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
<button ng-hide="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
</span>
<span ng-if="data.active === 0">
<button ng-show="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
</span>
Lets try angular way
<td width="20%">
<button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
<button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>

submit on <input> calls func in ng-click

This snippet of code I am using as template:
<div class="input-group input-group-sm date-time-with-arrows" style="width:100%">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="prevDay()"> <i class="fa fa-angle-left "></i></button>
</span>
<div id="input" class="input-group input-group-sm nested-group" ng-model="model">
<input class="form-control input-sm" ng-disabled="disabled" type="text" ng-attr-placeholder="{{configuration.noSelectionLabel}}" />
<span class="input-group-btn after-date-input">
<button class="btn btn-default pick-cal" ng-disabled="isDisabled" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
<span class="input-group-btn after-date-input">
<button class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button>
</span>
</div>
Note functions in tags button prevDay() and nextDay(). When I change date in input and press enter, prevDay() function is called and I have no idea why.
If you don't specificy a type="button" for a <button>, it will default as a submit button.
The button with function prevDay() on it is the first one, which will be used when you hit enter.
Just add type="button" to your <button>s and it will work.
I almost got insane for this just a couple of days ago...
The reason is that angular submits form on click of every button that is not of type="button".
If you change to <button type="button" class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button> it should work.

Bugs with button+tooltip "pull-effect"

When I move cursor on a camera, button is pulling. Why? Can I solve this problem?
http://jsfiddle.net/uDj9p/
<div class="input-group-btn advanced-group">
<button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Отправить картинку">
<span class="glyphicon glyphicon-camera"></span>
</button><button class="btn btn-default">
<span class="glyphicon glyphicon-file"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-facetime-video"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-bullhorn"></span>
</button>
</div>
Try adding the following CSS:
.btn {
margin: 0 !important;
}
http://jsfiddle.net/uDj9p/15/
Sometimes there is a little flicker but not sure what's causing that yet.

Categories