I want to press enter on the 'Buscar' input and focus on the first input ( 'Qtd on the table').
I tried
$(this).nextAll('input').first().focus();
$(this).next('input:text').focus();
And a lot of solutions and other codes I found here and online but nothing worked. I didn't get any errors on the console which makes it harder to find out what I'm missing.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
First, you shouldn't be setting numerical ids. Second, buscar has no siblings so you can't say nextAll because they aren't any siblings.
What you can do is watch the input for an enter key up and focus on the first input with the name quantidade. See the first function below.
$('#busca').on('keyup', function(e){
if(e.which === 13){
$('input[name="quantidade"]').first().focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
// get all the inputs that are not disabled and not hidden
var $allInputs = $(':input:not(:disabled):not(:hidden)');
$('#busca').on('keyup', function(e){
// if enter was pressed
if ((e.keyCode || e.which) === 13) {
// cancel any form submit that might happen
e.preventDefault();
// focus on the input that is the next index after the index that busca has
$allInputs.eq( $allInputs.index(this) + 1 ).focus();
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
Related
I want to check the checkbox items by looking for its value using JavaScript; I have the below test table with input form. When I put the value id to the form also hitting enter, then checking its checkbox.
For now the JavaScript is checking if value is = 1, but I want to make the value come from the input form to checking specific record.
$(document).ready(function() {
var chkbox = $('.customcheckbox');
$(".customvalue").keyup(function() {
chkbox.prop('checked', this.value == 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card-header">
<h4 class="text-center">Checking Checkboxes by Id </h4>
<div class="col-md-12">
<div class="card-md-4">
<div class="card-body">
<input id="myTxt" type="text" value="" name="search" class="form-control ml-auto m-2 customvalue" style="width: 25%;" placeholder="Enter barcode">
<form action="delete.php" method="post">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>
<button type="submit" name="stud_delete_multiple_btn" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete selected?')">DELETE</button>
</th>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10px;text-align:center">
<input type="checkbox" name="stud_id_1" class="customcheckbox" value="1">
</td>
<td>1</td>
<td>Susana</td>
<td>Daivid</td>
</tr>
<tr>
<td style="width: 10px;text-align:center">
<input type="checkbox" name="stud_id_1" class="customcheckbox" value="2">
</td>
<td>2</td>
<td>Sose</td>
<td>Nawsat</td>
</tr>
<tr>
<td style="width: 10px;text-align:center">
<input type="checkbox" name="stud_id_1" class="customcheckbox" value="3">
</td>
<td>3</td>
<td>Primso</td>
<td>Navid</td>
</tr>
<tr>
<td style="width: 10px;text-align:center">
<input type="checkbox" name="stud_id_1" class="customcheckbox" value="4">
</td>
<td>4</td>
<td>Lila</td>
<td>Noord</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</col-md-12>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
$(document).ready(function() {
var chkbox = $('.customcheckbox');
$(".customvalue").keyup(function() {
const customValue = $(this).val();
chkbox.each(function() {
$(this).prop('checked', customValue == $(this).val());
});
});
});
I want to change commitment text to be changed with input field when I click on commitment and when I press enter it should show the newly entered input.
I am new to javascript but I looked many codes but they didn't slove what I want please can you provide any idea how to do this?`
<div class="table-responsive">
<table class="table table-bordered table-hover" id="dtBasicExample" cellspacing="0" width="100%">
<!-- Table head -->
<thead class="theader">
<tr>
<th>Grade</th>
<th>Student</th>
<th>
<!-- Default un -->
<!-- <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck1">
<label class="custom-control-label" for="tableDefaultCheck1">P/A</label>
</div> -->P/A
</th>
<th>Check-In</th>
<th>Check-Out</th>
<th>Tutor</th>
<th>Videos</th>
<th>Others</th>
<th>Commitment</th>
</tr>
</thead>
<tbody>
</tr>
<tr>
<td>7</td>
<td>Name</td>
<th scope="row">
<!-- Default un -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
<label class="custom-control-label" for="tableDefaultCheck3"></label>
</div>
</th>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Commitment
<div class="md-form">
<input type="text" id="form2" class="form-control">
<label for="form2">New Commitment</label>
</div>
</td>
</tr>
</tbody>
</table>
Is this what you are looking for?
$('.md-form input').keydown(function(e) {
if(e.keyCode == 13 && $(this).val().length > 0){
$(this).next().text($(this).val())
}
});
Working demo
$('.md-form input').keydown(function(e) {
if (e.keyCode == 13 && $(this).val().length > 0) {
$(this).next().show().text($(this).val())
$(this).hide();
}
});
$('.Commitment label').click(function() {
$(this).prev().show();
$(this).hide();
})
.Commitment input {
display: none;
}
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div class="table-responsive">
<table class="table table-bordered table-hover" id="dtBasicExample" cellspacing="0" width="100%">
<!-- Table head -->
<thead class="theader">
<tr>
<th>Grade</th>
<th>Student</th>
<th>
<!-- Default un -->
<!-- <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck1">
<label class="custom-control-label" for="tableDefaultCheck1">P/A</label>
</div> -->P/A
</th>
<th>Check-In</th>
<th>Check-Out</th>
<th>Tutor</th>
<th>Videos</th>
<th>Others</th>
<th>Commitment</th>
</tr>
</thead>
<tbody>
<tr>
<td>7</td>
<td>Name</td>
<th scope="row">
<!-- Default un -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
<label class="custom-control-label" for="tableDefaultCheck3"></label>
</div>
</th>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td class="Commitment">
<div class="md-form">
<input type="text" id="form2" class="form-control">
<label for="form2">New Commitment</label>
</div>
</td>
</tr>
<tr>
<td>7</td>
<td>Name</td>
<th scope="row">
<!-- Default un -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
<label class="custom-control-label" for="tableDefaultCheck3"></label>
</div>
</th>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td class="Commitment">
<div class="md-form">
<input type="text" id="form2" class="form-control">
<label for="form2">New Commitment</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I have a table inside a div that shows some important information about the elements inside the div and I want this table to follow the scroll as long as the div.
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12 col-lg-19 ">
<div class="table-responsive">
<table>
<tr style="white-space:nowrap;">
<th class="fill"><h2>Meritos</h2></th>
<th scope="row" style="white-space:nowrap;">
<h2>Auto Puntuación</h2>
<input type="text" value="<?= $solicitude->autoPuntuacion ?>" size="2" disabled>
</th>
<th></th>
<th scope="row" style="white-space:nowrap;">
<h2>Puntuación Evaluación</h2>
<input type="text" id="puntuacion" value="<?= $solicitude->puntuacionEvaluacion ?>" size="2" disabled>
</th>
</tr>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
{code .....}
</div>
</div>
</div>
</div>
I have tried everything that I found about making an element follow the scroll with Javascript/jQuery with no result.
I´m working with Bootstrap v3.3 and Cakephp v3.5.
Thanks a lot in advance.
Use position: fixed;
See code below:
.panel-body{
height: 150px;
overflow-y: scroll;
padding:0!important;
}
.table-responsive{
position: fixed;
width:90%!important;
}
.list-group{
height: 300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
</div>
</div>
</div>
</div>
I have a page where I can do CRUD operations using ASP.NET MVC with AngularJS. I am showing the my Data in the html table. I want to show them with UI Grid as its in http://ui-grid.info/
Can anyone help me show the data in the UI Grid?
This is how my WebApp looks:
Controller.js
app.controller('crudController', function ($scope, crudService) {
$scope.IsNewRecordProject = 1;
loadRecordsProject();
//Function to load all Projects records
function loadRecordsProject() {
var promiseGet = crudService.getProjects(); //The Method Call from service
promiseGet.then(function (pl) { $scope.Projects = pl.data },
function (errorPl) {
$log.error('failure loading Projects', errorPl);
});
}
});
Module.js
var app;
(function () {
app = angular.module("crudModule", []);
})();
Service.js
app.service('crudService', function ($http) {
//Get All Projects
this.getProjects = function () {
return $http.get("/api/ProjectsAPI");
}
});
And this is my Project.cshtml file
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- page content -->
<body>
<div class="container-fluid">
<div class="header-title">
<h1>Projects</h1>
<br />
</div>
</div>
#*<div class="right_col" role="main">*#
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" ng-controller="crudController">
<div class="col-md-7">
<div class="col-md-4 left-zero">
<div class="form-group">
<div class="col-md-5 left-zero">
<div class="form-group row">
<div class="col-md-2">
<input id="txtSearch" type="text" placeholder="Search by name..." class="form-control" Height="33" Width="200" />
</div>
<div class="col-md-2 pull-right">
<div style="margin-left: 47px;"><input id="btnSearch" type="button" value="Search" Class="btn btn-primary" /></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 pull-right">
<table style="border-collapse: separate; border-spacing: 10px 0px;">
<tr>
<td>
<select id="cbStatus" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
<td>
<select id="cbPlatform" class="form-control">
<option>Desktop</option>
<option>Web</option>
<option>Mobile</option>
</select>
</td>
<td>
<select id="cbVerify" class="form-control">
<option>Veryfy1</option>
<option>Veryfy2</option>
</select>
</td>
<td>
<select id="cbBlank" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td>
<select id="cbBlank2" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td><input id="btnNewProjects" type="button" value="Create New" data-ng-click="ShowInsertPanel = !ShowInsertPanel" class="btn btn-success" /></td>
</tr>
</table>
</div>
<table class="table table-bordered" align="center">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Application</th>
<th>Status</th>
</tr>
</thead>
<tbody ng-repeat="Proj in Projects">
<tr ng-click="getProject(Proj)">
<td width="50"> <span>{{Proj.id}}</span></td>
<td width="150"> <span>{{Proj.name}}</span></td>
<td width="150"> <span>{{Proj.application}}</span></td>
<td width="150"> <span>{{Proj.status}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5">
<br />
<br />
<div class="row">
<div class="col-md-12" ng-show="ShowInsertPanel">
<div class="x_panel">
<div class="x_title">
<h2>New Project <small></small></h2>
<ul class="nav navbar-right panel_toolbox">
<li class="pull-right">
<a class="close-link" data-ng-click="ShowInsertPanel = !ShowInsertPanel"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="dashboard-widget-content">
<table class="table table" align="center">
<tbody>
<tr>
<th>ID</th>
<td style="vertical-align: middle;"><input type="text" id="p_id" readonly="readonly" ng-model="id" class="form-control" /></td>
</tr>
<tr>
<th>Name</th>
<td style="vertical-align: middle;"><input type="text" id="p_name" required ng-model="name" class="form-control" /></td>
</tr>
<tr>
<th>Application</th>
<td style="vertical-align: middle;"><input type="text" id="p_application" required ng-model="application" class="form-control" /></td>
</tr>
<tr>
<th>Status</th>
<td style="vertical-align: middle;">
<select id="cbStatus" required ng-model="status" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="new" value="New" ng-click="clearProject()" class="btn btn-default" />
<input type="button" id="save" value="Save" ng-click="saveProject()" class="btn btn-success" />
<input type="button" id="delete" value="Delete" ng-click="deleteProject()" class="btn btn-danger" />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<br />
#*</div>*#
</body>
<!-- /page content -->
You need to define the grid options and return the data as JSON. Look at the following tutorial documentation: http://ui-grid.info/docs/#/tutorial/106_binding
I have list of packages. All of them are radio buttons. When clicked, i get list of price options who are also radio button, but only first price option, others are normal buttons.
When i click on package radio button, i need first price option also checked and active, so it can show some values inside of it. Others needs to be closed.
<div class="col-md-12 packageList">
<h4 class="col-sm-4"><input class="col-sm-1" id="id_radio26"
type="radio" value="26" name="radio"> Paket 1</h4>
<h4 class="col-sm-3">Credits:<span> 20</span></h4>
<h4 class="col-sm-3">Duration: <span>2min</span></h4>
<h4 class="col-sm-2"><span>$200</span>/Month</h4>
</div>
<br>
<div class="package" id="package26">
<label>Price Option: </label>86
<label class="hideRadio">
<input class="price_option" type="radio"
value="86"
name="price_option" checked="checked">
</label>
<br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_86">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header">
<th>Values</th>
</tr>
</thead>
<tbody>
<th>
Vrednost 31<br>
<input type="hidden"
name="value-86[]"
value="Vrednost 31">
</th>
</tbody>
<tbody>
<th>
Vrednost 32<br>
<input type="hidden"
name="value-86[]"
value="Vrednost 32">
</th>
</tbody>
</table>
</div>
</div>
</div>
<label class="hideRadio">
<button class="price_option" type="button"
name="price_option" value="91">
Alternative Payment
</button>
</label>
<br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_91">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header">
<th>Values</th>
</tr>
</thead>
<tbody>
<th>
assd<br>
<input type="hidden"
name="value-91[]"
value="assd">
</th>
</tbody>
<tbody>
<th>
asdasd<br>
<input type="hidden"
name="value-91[]"
value="asdasd">
</th>
</tbody>
</table>
</div>
</div>
</div>
</div>
This is my script for now:
/*Radio buttons */
$('div[id^="package"]').hide();
$('body').on('click', 'input[id^="id_radio"]', function () {
$('div[id^="package"]').hide();
$('#package' + $(this).val()).show();
console.log($(this).val());
});
$('div[id^="price_option_div"]').hide();
$('body').on('click', '.price_option', function () {
$('div[id^="price_option_div_"]').hide();
$("#price_option_div_" + $(this).val()).show();
console.log($(this).val());
});
I assume that u cant change your HTML Code and add some Classes. Therefore you could use something like this:
/* Radio buttons */
// set variables
var $packages = $('div[id^="package"]'),
$priceOptions = $('div[id^="price_option_div"]'),
priceOptionNr;
// hide stuff
$packages.hide();
$priceOptions.hide();
$('input[id^="id_radio"]').on('click', function () {
// hide stuff
$packages.hide();
$priceOptions.hide();
// safe price option value
priceOptionNr = $('#package' + $(this).val())
.find('.price_option').val();
// show specific price option + connected div
$('#package' + $(this).val()).show()
.find('#price_option_div_' + priceOptionNr).show();
});
$('.price_option').on('click', function () {
$priceOptions.hide();
$("#price_option_div_" + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 packageList">
<h4 class="col-sm-4"><input class="col-sm-1" id="id_radio26" type="radio" value="26" name="radio"> Paket 1</h4>
<h4 class="col-sm-3">Credits:<span> 20</span></h4>
<h4 class="col-sm-3">Duration: <span>2min</span></h4>
<h4 class="col-sm-2"><span>$200</span>/Month</h4>
</div> <br>
<div class="package" id="package26">
<label>Price Option: </label>86
<label class="hideRadio"> <input class="price_option" type="radio" value="86" name="price_option" checked="checked"> </label> <br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_86">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header"> <th>Values</th> </tr>
</thead>
<tbody>
<th> Vrednost 31<br> <input type="hidden" name="value-86[]" value="Vrednost 31"></th>
</tbody>
<tbody>
<th> Vrednost 32<br> <input type="hidden" name="value-86[]" value="Vrednost 32"></th>
</tbody>
</table>
</div>
</div>
</div>
<label class="hideRadio"> <button class="price_option" type="button" name="price_option" value="91"> Alternative Payment</button> </label> <br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_91">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header">
<th>Values</th>
</tr>
</thead>
<tbody>
<th> assd<br> <input type="hidden" name="value-91[]" value="assd"></th>
</tbody>
<tbody>
<th> asdasd<br> <input type="hidden" name="value-91[]" value="asdasd"></th>
</tbody>
</table>
</div>
</div>
</div>
</div>