I am trying to write a single-page app with the below details, but unable to complete all. (shared the code below)
Header input fields.
Items input(can be using modal) and View(as table)
Sub-items input(using modal) and view(as table) , each items can or cannot have sub-items.
Create/Submit button will send all data to an end-point using Ajax.
sub table data will be added by input form through a bootstrap modal.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form>
<table class="table">
<tbody>
<tr>
<td><input type="text" class="form-control" id='txtCustomerNumb' placeholder="Customer Number" /></td>
<td><input type="text" class="form-control" id='txtCustomerName' placeholder="Customer Name" /></td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td></td>
</tr>
<tr>
<td><input type="text" class="form-control" id='txtDriverName' placeholder="Driver Name" /></td>
<td><input type="text" class="form-control" id='txtDriverContact' placeholder="Driver Contact" /></td>
<td><input type="text" class="form-control" id='txtVehNumber' placeholder="Vehicle No." /></td>
<td></td>
</tr>
<tr>
<td>
<select class="form-control" id="txtDeliverTo" placeholder="Exit Point">
<option value="">Select Exit Point</option>
<option value="Exit_Point_1">Exit Point 1</option>
<option value="Exit_Point_2">Exit Point 2</option>
<option value="Exit_Point_3">Exit Point 3</option>
</select>
</td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td><input type="text" class="form-control" id='txtExitType' placeholder="Type Of Exit" /></td>
<td></td>
</tr>
</tbody>
</table>
<div class="form-row">
<div class="form-group col-md-4">
<label>Name:</label>
<input type="text" name="name" class="form-control" value="Smith" required="">
</div>
<div class="form-group col-md-6">
<label>Email:</label>
<input type="text" name="email" class="form-control" value="smith#abc.com" required="">
</div>
<div class="form-group col-md-2" style="padding-top: 23px;">
<button type="submit" class="btn btn-success save-btn">Add</button>
</div>
</div>
</form>
<br/>
<table class="table table-bordered data-table">
<thead>
<th>Name</th>
<th>Email</th>
<th width="200px">Action</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript">
$("form").submit(function(e){
e.preventDefault();
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();
$(".data-table tbody").append("<tr data-name='"+name+"' data-email='"+email+"'><td>"+name+"</td><td>"+email+"</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");
$("input[name='name']").val('');
$("input[name='email']").val('');
});
$("body").on("click", ".btn-delete", function(){
$(this).parents("tr").remove();
});
$("body").on("click", ".btn-edit", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="'+name+'">');
$(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="'+email+'">');
$(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>")
$(this).hide();
});
$("body").on("click", ".btn-cancel", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-update").remove();
$(this).parents("tr").find(".btn-cancel").remove();
});
$("body").on("click", ".btn-update", function(){
var name = $(this).parents("tr").find("input[name='edit_name']").val();
var email = $(this).parents("tr").find("input[name='edit_email']").val();
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").attr('data-name', name);
$(this).parents("tr").attr('data-email', email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-cancel").remove();
$(this).parents("tr").find(".btn-update").remove();
});
</script>
</body>
</html>
Consider the following example. This is using the latest Bootstrap version.
$(function() {
function addItem(data, table) {
var row = $("<tr>").data("item", data).appendTo(table);
$.each(data, function(k, v) {
$("<td>").html(v).appendTo(row);
});
$("<td>").appendTo(row);
$.each(["update", "cancel", "edit", "delete"], function(i, el) {
$("<button>", {
class: "btn btn-sm btn-" + el
}).html(el[0].toUpperCase() + el.substr(1)).appendTo("td:last", row);
});
$(".btn-edit, .btn-update", row).addClass("btn-info");
$(".btn-cancel", row).addClass("btn-warning");
$(".btn-delete", row).addClass("btn-danger");
$("button:lt(2)", row).hide();
}
function editItem(row) {
var item = $(row).data("item");
var keys = Object.keys(item);
$("td:not(:last)", row).each(function(i, el) {
$(el).html(
$("<input>", {
name: "item_" + keys[i],
type: (i < 2) ? "text" : "number",
value: item[keys[i]]
})
);
});
$("button", row).show();
$("button:gt(1)", row).hide();
}
function updateItem(row) {
var newItem = {
name: $("input[name='item_name']", row).val(),
desc: $("input[name='item_desc']", row).val(),
qnty: $("input[name='item_qnty']", row).val()
};
var keys = Object.keys(newItem);
$(row).data("item", newItem);
$("td:not(:last)", row).each(function(i, el) {
$(el).empty().html(newItem[keys[i]]);
});
$("button", row).show();
$("button:lt(2)", row).hide();
}
$("form").submit(function(e) {
e.preventDefault();
var item = {
name: $("input[name='item']").val(),
desc: $("input[name='description']").val(),
qnty: $("input[name='quantity']").val()
};
addItem(item, "table.data-table");
$("input[name='item'], input[name='description'], input[name='quantity']").val('');
});
$(".table").on("click", ".btn-delete", function() {
if (confirm("Are you sure you wish to delete this row?")) {
$(this).closest("tr").remove();
}
});
$(".table").on("click", ".btn-edit", function() {
editItem($(this).closest("tr"));
});
$(".table").on("click", ".btn-cancel", function() {
var row = $(this).closest("tr");
var item = $(row).data("item");
var keys = Object.keys(item);
$("td:not(:last)", row).each(function(i, el) {
$(el).html(item[keys[i]]);
});
$("button", row).show();
$("button:lt(2)", row).hide();
});
$("body").on("click", ".btn-update", function() {
updateItem($(this).closest("tr"));
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="container">
<form>
<div class="row align-items-center">
<div class="col-10">
<table class="table">
<tbody>
<tr>
<td><input type="text" class="form-control" id='txtCustomerNumb' placeholder="Customer Number" /></td>
<td><input type="text" class="form-control" id='txtCustomerName' placeholder="Customer Name" /></td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td></td>
</tr>
<tr>
<td><input type="text" class="form-control" id='txtDriverName' placeholder="Driver Name" /></td>
<td><input type="text" class="form-control" id='txtDriverContact' placeholder="Driver Contact" /></td>
<td><input type="text" class="form-control" id='txtVehNumber' placeholder="Vehicle No." /></td>
<td></td>
</tr>
<tr>
<td>
<select class="form-control" id="txtDeliverTo" placeholder="Exit Point">
<option value="">Select Exit Point</option>
<option value="Exit_Point_1">Exit Point 1</option>
<option value="Exit_Point_2">Exit Point 2</option>
<option value="Exit_Point_3">Exit Point 3</option>
</select>
</td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td><input type="text" class="form-control" id='txtExitType' placeholder="Type Of Exit" /></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<button class="btn btn-primary" type="submit">Create</button>
</div>
</div>
</form>
</div>
<form>
<div class="row mb-3">
<div class="col-2">
<input type="text" name="item" class="form-control" placeholder="Item Name" required />
</div>
<div class="col-4">
<input type="text" name="description" class="form-control" placeholder="Item Description" required="">
</div>
<div class="col-2">
<input type="number" name="quantity" class="form-control" placeholder="Quantity" required="">
</div>
<div class="col">
<button type="submit" class="btn btn-success save-btn">Add</button>
</div>
</div>
</form>
<table class="table table-bordered data-table">
<thead>
<th>Name</th>
<th>Description</th>
<th>Quantity</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
You can see there are a lot of functions that can be created if you choose. The cancel event is an example without using functions.
You will want to use .closest() to find the parent row. You can then properly select elements from the row as needed.
It did not make a lot of sense to add and remove buttons, better to just hide them when not needed.
You can use Bootstrap-Table, here is an example of what you are looking to do:
https://examples.bootstrap-table.com/#welcome.html#view-source
In this case you can have a table with more options, also you can use ajax to load, paginate and execute actions to the data.
Other option is inside your table you can insert a subtable with javascript.
I have a checkbox which will re-enable all input textboxes in a row if checked. The current state is I can only do it on the first row.
This is my code:
#foreach($kucings as $cat)
<tr>
<th scope="row">
<input type="hidden" name="" value="">
<input type="checkbox" id="name" name="name" value="{{$cat->id}}"/>
{{$cat->name}}
</th>
<td><input type="number" id="age" value="" disabled /></td>
<td><input type="number" id="weight" value="" disabled /></td>
<td><input type="number" id="height" value="" disabled /></td>
</tr>
#endforeach
Below is my javascript:
<script>
document.getElementById('name').onchange = function() {
document.getElementById('age').disabled = !this.checked;
document.getElementById('weight').disabled = !this.checked;
document.getElementById('height').disabled = !this.checked;
};
</script>
You cannot have multiple elements with the same id. You can have dynamic id like this and add event listeners for each of them.
#foreach($kucings as $key => $cat)
<tr>
<th scope="row">
<input type="hidden" name="" value="">
<input type="checkbox" id="name-{{$key}}" name="name" value="{{$cat->id}}"/>
{{$cat->name}}
</th>
<td><input type="number" id="age-{{$key}}" value="" disabled /></td>
<td><input type="number" id="weight-{{$key}}" value="" disabled /></td>
<td><input type="number" id="height-{{$key}}" value="" disabled /></td>
</tr>
#endforeach
<script>
let catCount = {{count($kucings)}};
for (let i = 0; i < catCount.length; i++) {
document.getElementById('name-'+i).onchange = function() {
document.getElementById('age-'+i).disabled = !this.checked;
document.getElementById('weight-'+i).disabled = !this.checked;
document.getElementById('height-'+i).disabled = !this.checked;
}
};
</script>
<button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
<table class="table table-bordered" id="supplier_table">
<thead>
<tr id="first-header">
<th></th>
<th></th>
<th colspan="2">Supplier</th>
</tr>
<tr id="second-header">
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" id="usr" value="Mouse" readonly=""></td>
<td><input type="text" class="form-control" id="usr" value="10" readonly=""></td>
<td><input type="text" class="form-control" id="price"></td>
<td><input type="text" class="form-control" id="total"></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="usr" value="Keyboard" readonly=""></td>
<td><input type="text" class="form-control" id="usr" value="20" readonly=""></td>
<td><input type="text" class="form-control" id="price"></td>
<td><input type="text" class="form-control" id="total"></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="usr" value="Monitor" readonly=""></td>
<td><input type="text" class="form-control" id="usr" value="30" readonly=""></td>
<td><input type="text" class="form-control" id="price"></td>
<td><input type="text" class="form-control" id="total"></td>
</tr>
</tbody>
</table>
This is the add column (append)
$(function() {
$('#add_supplier').click(function() {
$('#supplier_table > thead > tr#first-header').append(
'<th colspan="2">Supplier</th>'
);
$('#supplier_table > thead > tr#second-header').append(
'<th>Price</th>' +
'<th>Total</th>'
);
$('#supplier_table > tbody > tr').append(
'<td><input type="text" class="form-control" id="price"></td>' +
'<td><input type="text" class="form-control" id="total"></td>'
);
});
});
Demo Link: JSFIDDLE
One issue if that the newly-added column id's are missing the id number. If you look at the id, it only shows "price-", when it should probably be "price-2-1", since the original ones are "price-1", and the original ones should probably be something like "price-1-1".
Aside from that, the problem is you need to also add the event listeners to the newly-created items:
$('#add_supplier').click(function(){
$('#supplier_table > thead > tr#first-header').append(
'<th colspan="2">Supplier</th>'
);
$('#supplier_table > thead > tr#second-header').append(
'<th>Price</th>'+
'<th>Total</th>'
);
$('#supplier_table > tbody > tr').append(
'<td><input type="text" class="form-control price" id="price-"></td>'+
'<td><input type="text" class="form-control total" id="total-" readonly></td>'
);
$(".price").each(function () {
$(this).keyup(function () {
multInputs();
});
});
});
With the method below you can search the fields according to proximity, thus being able to make the calculations with the necessary parameters.
$(function(){
$('#add_supplier').click(function(){
$('#supplier_table > thead > tr#first-header').append(
'<th colspan="2">Supplier</th>'
);
$('#supplier_table > thead > tr#second-header').append(
'<th>Price</th>'+
'<th>Total</th>'
);
$('#supplier_table > tbody > tr').append(
'<td><input type="text" class="form-control price" id="price-"></td>'+
'<td><input type="text" class="form-control total" id="total-" readonly></td>'
);
bindPrice();
});
bindPrice();
});
function bindPrice(){
$('.price').off().on('keyup', function(){
$total = $(this).parents().eq(0).next().find('.total');
$qty = $(this).parents().eq(1).find('.qty');
$total.val($(this).val() * $qty.val() )
});
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<style type="text/css">
#supplier_table thead th,
td {
text-align: center;
}
</style>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
<table class="table table-bordered" id="supplier_table">
<thead>
<tr id="first-header">
<th></th>
<th></th>
<th colspan="2">Supplier</th>
</tr>
<tr id="second-header">
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="tbody-tr">
<td><input type="text" class="form-control" id="usr" value="Mouse" readonly=""></td>
<td><input type="text" class="form-control qty" id="qrt-1" value="10" readonly=""></td>
<td><input type="text" class="form-control price" id="price-1"></td>
<td><input type="text" class="form-control total" id="total-1" readonly></td>
</tr>
<tr class="tbody-tr">
<td><input type="text" class="form-control" id="usr" value="Keyboard" readonly=""></td>
<td><input type="text" class="form-control qty" id="qty-3" value="20" readonly=""></td>
<td><input type="text" class="form-control price" id="price-3"></td>
<td><input type="text" class="form-control total" id="total-3" readonly></td>
</tr>
<tr class="tbody-tr">
<td><input type="text" class="form-control" id="usr" value="Monitor" readonly=""></td>
<td><input type="text" class="form-control qty" id="qty-5" value="30" readonly=""></td>
<td><input type="text" class="form-control price" id="price-5"></td>
<td><input type="text" class="form-control total" id="total-5" readonly></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have a table with 3 table rows, each row contains 5 columns with input text boxes, the last column is for the total of the values inputted in the 4 columns. I want to calculate the total automatically using jquery or javascript after the 4 columns was filled with values. How could I do this? Here is my table code.
Table
<table name="tbl_a" id="tbl_a">
<tr>
<td><span style="margin-left:30px;">a. Provision of certified seeds</span></td>
<td>no. of bags</td>
<td>per AT</td>
<td><input type="text" class="form-control" name="at[a]" id="a" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[b]" id="b" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[c]" id="c" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[d]" id="d" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_1]" id="total_1" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
<td></td>
<td>no. of farmers</td>
<td></td>
<td><input type="text" class="form-control" name="at[e]" id="e" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[f]" id="f" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[g]" id="g" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[h]" id="h" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_2]" id="total_2" value="" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
<td style="text-align:center;">Rehab Seeds</td>
<td>no. of bags</td>
<td>per AT</td>
<td><input type="text" class="form-control" name="at[i]" id="i" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[j]" id="j" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[k]" id="k" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[l]" id="l" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_3]" id="total_3" value="" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
</table>
First of all please google for what you wanted to achieve, learn yourself, try to find the solution. If you still not succeeded, ask question with the relevant code that you have tried and with some playgrounds such as jsfiddle.net or jsbin.com etc.
However, here is the script which I used. I added total to the last input field.
$(function () {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
$(this).find('input[type=text]').bind("keyup", function () {
calculateSum();
});
});
function calculateSum() {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
var sum = 0;
$(this).find('input[type=text]').not('.total').each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$(this).find('.total').val(sum.toFixed(2));
});
}
});
Here is the result. In this script, you can have any number of rows, but the last row needed to have a different class name otherwise its value also added to the total.
On input change, calculate inputs's total. If one input is empty return, if not assign total to last input of tr.
$(".form-control").change(function(){
var tr = $(this).parents("tr");
var total = 0;
for (var i = 0; i < tr.find("input").length; i++) {
if ($(tr).find("input").eq(i).val() == 0 || $(tr).find("input").eq(i).val() == "")
return;
total += parseInt($(tr).find("input").eq(i).val());
}
$(tr).find("input").eq($(tr).find("input").length-1).val(total);
}
I am a beginner in jQuery. I want all my input value of my form in an array = (item 01, item 02 and and) save ..
It should show items in a table?
What I have done and it does not work:
<form id="form_id">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<input type="submit" value="submit" id="submit-button" />
</form>
<div id="table">
<h2>List of all person</h2>
<table class="footable">
<thead>
<tr>
<th data-class="expand"> First Name </th>
<th> Last Name </th>
</tr>
</thead>
<tbody>
<tr>
<td>e.g --> array[1].firstname</td>
<td>e.g --> array[1].lastname</td>
</tr>
</tbody>
</table>
</div>
The Javascript code:
$(function() {
$('#submit-button').click(function() {
var formInputs = new Array();
//Get the form ID
var id = $(this).parent().attr('id');
$('#' + id + ' input').each(function() {
//Get the input value
var inputValue = $(this).val();
//Get the input id
var inputId = $(this).attr('id');
//Add them to the array
formInputs[inputId] = inputValue;
});
show....
});
});
try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit-button").click(function(){
var data = $('#form_id').serializeArray();
var obj = {};
for (var i = 0, l = data.length; i < l; i++) {
obj[data[i].name] = data[i].value;
}
$('table.footable tbody').append('<tr><td>'+obj['firstname']+'</td><td>'+obj['lastname']+'</td></tr>');
$("#firstname").val('');
$("#lastname").val('');
})
})
</script>
<form id="form_id">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname" value="" placeholder="Max" required="required" autofocus="autofocus" />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" value="" placeholder="Max" required="required" autofocus="autofocus" />
<input type="button" value="submit" id="submit-button" />
</form>
<div id="table">
<h2>List of all person</h2>
<table class="footable">
<thead>
<tr>
<th data-class="expand"> First Name </th>
<th> Last Name </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
This should work
<form id="form_id">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<input type="button" value="submit" id="submit-button" />
</form>
<div id="table">
<h2>List of all person</h2>
<table class="footable">
<thead>
<tr>
<th data-class="expand">First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
var names = [],
tbody = $("#table tbody");
function getInfo(e) {
var nameObj = {
first: e.target.form[0].value,
last: e.target.form[1].value
};
names.push(nameObj);
e.target.form[0].value = "";
e.target.form[1].value = "";
tbody.empty();
names.forEach(function (name) {
var tr = $("<tr>");
tr.append($("<td>").text(name.first));
tr.append($("<td>").text(name.last));
tbody.append(tr);
});
}
$("#submit-button").on("click", getInfo);
On jsfiddle