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
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>````
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.
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>
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.
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.