We Keep Coding

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

Change method and action inside button attribute

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

How to Keep lable names for text box

Plunker.
In this plunker I want to keep lable names on top of textboxes. How can I keep lables for the textboxes.
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
<input type="text" ng-model="item.rowId"> <input type="text" ng-model="item.name">
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span><span class="glyphicon glyphicon-plus" style='margin-left:4px'></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="addParentRow(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>

I guess you're trying to prevent changes on rowId element.
In that case just add ng-disabled="true" to that input:
<input type="text" ng-model="item.rowId" ng-disabled="true">

I hope this will help u
Demo
CSS
label {display:block;}
textarea { display:block;}
HTML
<label for="title">Title: </label><textarea rows="5" id="title" name="title"></textarea>

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.