When my delete button is clicked I would like to change the value of the "is_active" input that has the class of 'active' value from "yes" to "no".
So far I tried to using siblings to try and select the input with the class of 'active'. No luck.
Here is my code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).siblings("td").next().find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
I figured it out, here is the updated code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).closest('tr').find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
I changed the line from :
$(this).siblings("td").next().find('.active').val('no');
To this:
$(this).closest('tr').find('.active').val('no');
Related
The below table I want to change the input value for first row become value="1" onclick the copy button.
This value="1" when I entered manually and the value should repeat to the entire row when I click the copy button.
Note: I couldn't found any script regarding this to add the tried code.
Kindly comment below for further clarification.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
Copy this first value to the rest:
$(function() {
$(".btn-success").on("click", function(e) {
e.preventDefault(); // stop the link
var $inputs = $(this).closest("tr").find("input");
var val = $inputs.eq(0).val(); // take the first
$inputs.val(val);
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
You could do it like this:
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
This will take the value from the input associated with the link/button and put that value into the other input's on the same tr
Demo
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
You get the value of input using prev() inside click handler of the copy button.
Find parent td using closest and then get all its sibling tds. find input inside sibling tds and append first input value to the input existing values
$(document).ready(function(){
$('a.btn.btn-success').on('click', function(){
var val = $(this).prev('input').val();
var $td = $(this).closest('td');
var $siblings = $td.siblings();
//to append values
/*$siblings.find('input.form-control').each(function(){
$(this).val($(this).val() + val);
});*/
// to replace values
$siblings.find('input.form-control').val(val);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
This JS code could be helpful.
jQuery(document).ready(function($) {
jQuery('.table a.btn').click(function(event) {
event.preventDefault();
var fieldVal = jQuery(this).siblings('.form-control').val();
jQuery(this).parent('td').siblings('td').children('.form-control').val(fieldVal);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
In order to answer the question "Is it possible to place the button outside?":
Here is a version with the button in front of all the input fields:
Starting from the button itself (this) you look for the closest parent container of type td, then find all its siblings and their children of type input. The result is a jquery object with all the inputs of one table row. Then do the copying of values from the first (flds.eq(0)) to the rest of them all (flds.slice(1)).
$('.table a.btn').click(function() {
var flds = $(this).closest('td').siblings().find('input');
flds.slice(1).val(flds.eq(0).val());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table"><thead><tr>
<th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th>
</tr></thead><tbody><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="1">
</td><td>
<input type="text" class="form-control" value="11">
</td><td>
<input type="text" class="form-control" value="11">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td></tr></tbody></table>
I am trying to access the attribute/value of 'schoolidx' that is not hidden, when add button is clicked; however I am having hard time accessing it.
Can someone guide me please? I am trying to get only "1", or "2", or "3" depending on which one is not hidden ("display: none;"). In this case, "1".
Tried different methods:
let schoolIndex = $('#schoolTableBody > tr:not([style*="display: none"])').attr("schoolidx"),
schoolIndex2 = $('tr').filter(function(){ return $(this).css("display") != "none";}).attr("schoolidx"),
schoolIndex3 = $('tr').filter(function(){ return $(this).css("display") != "none";}).attr("schoolidx"),
schoolIndex4 = $("#schoolTableBody > tr:visible")
<table class="table table-striped table-hover table-condensed" id="schoolTable">
<thead>
<tr>
<th> </th>
<th>School Name</th>
<th>Country</th>
</tr>
</thead>
<tbody id="schoolTableBody">
<tr class="school-row" style="">
<td><button id="addSchoolBtn" title="Add" style="width:50px"/></td>
<td><input type="text" name="sName" id="sName"></td>
<td><input type="text" name="Country" id="Country"></td>
</tr>
<tr schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="SK">SK</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="JS">JS</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="CAS">CAS</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="AM">AM</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr schoolidx="3" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="BAS">BAS</td>
<td><input type="hidden" name="Country" value="BR">BR</td>
</tr>
</tbody>
</table>
Instead of attempting to search by styling, perhaps you could add an 'active' class when you unhide a given row, and remove it when you hide it again.
You can then search using jQuery. var schoolid = $("tr.active").prop("schoolidx");
Have a look at addClass and removeClass. I assume you already have the ability to hide each row. Just add those two functions to that bit of code.
Note that I have changed your 'attribute' to a valid data attribute
For the JS, we have to make sure we're only selecting the tr's within the tbody but not the first tr as thats where the add button is.
Then do an if() within an onclick to check to see if the display is set to none
<button> aren't self closing, they require a </button>
document.getElementById('addSchoolBtn').addEventListener('click', () => {
document.querySelectorAll('#schoolTableBody tr:not(.school-row)').forEach(tr => {
if (tr.style.display !== "none") alert(tr.dataset.schoolidx)
})
})
<table class="table table-striped table-hover table-condensed" id="schoolTable">
<thead>
<tr>
<th> </th>
<th>School Name</th>
<th>Country</th>
</tr>
</thead>
<tbody id="schoolTableBody">
<tr class="school-row" style="">
<td><button id="addSchoolBtn" title="Add" style="width:50px">Add</button></td>
<td><input type="text" name="sName" id="sName"></td>
<td><input type="text" name="Country" id="Country"></td>
</tr>
<tr data-schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="SK">SK</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr data-schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="JS">JS</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr data-schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="CAS">CAS</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr data-schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="AM">AM</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr data-schoolidx="3" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="BAS">BAS</td>
<td><input type="hidden" name="Country" value="BR">BR</td>
</tr>
</tbody>
I am trying to generate the SUM of some numbers, however, getting output as NaN when calculating the sum values
Below is the sample code
Demo
$("#rTpe2").keyup(function(e){
$("#rFor2").val((this.value * $("#PerHourRate2").val()).toLocaleString('en-IN'));
$("#rFor3").val.toLocaleString('en-IN')(Number($("#rFor1").val().toLocaleString('en-IN')) + Number($("#rFor2").val().toLocaleString('en-IN')))
});
val().toLocaleString() is not valid.
do like below:-
Example:-
$('tr').find('td:eq(2) input').keyup(function(){
var final_td_value = $(this).val()* $(this).closest('td').prev('td').find('input').val();
var final_bar_value =final_td_value+Number($("#rFor2").val().replace(/,/g , ''));
$(this).closest('td').next('td').find('input').val(final_td_value.toLocaleString('en-IN'));
$("#rFor3").val((Number($("#rFor1").val().replace(/,/g , ''))+Number($("#rFor2").val().replace(/,/g , ''))).toLocaleString('en-IN'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gap10"></div>
<div class="container">
<table class="table table-bordered data" >
<thead>
<tr>
<th colspan="4"><h3 style="text-align: left;margin-top:0px; margin-bottom:0px;">Technology Design Services</h3></th>
</tr>
<tr class="one">
<th >Service Area</th>
<th>Per Hour Rate</th>
<th>Number Of Hours</th>
<th>Total Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Service1</td>
<td><div class="form-group num">
<input name="" type="number" placeholder="" class="form-control input-md"id="PerHourRate1"type="text" value="2325" readonly>
</div></td>
<td><div class="form-group num">
<input name="" type="number" placeholder="" class="form-control input-md"value="0" id="rTpe1">
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0" id="rFor1" readonly>
<tr>
<td>Service2</td>
<td><div class="form-group num">
<input name="" type="number" placeholder="" class="form-control input-md"id="PerHourRate2"type="text" value="2025" readonly>
</div></td>
<td><div class="form-group num">
<input name="" type="number" placeholder="" class="form-control input-md"value="0" id="rTpe2">
</div></td>
<td><div class="form-group num">
<input name="" type="text" placeholder="" class="form-control input-md"value="0" id="rFor2" readonly>
</div></td>
<input name="Total" type="text" placeholder="" class="form-control input-md"value="0" id="rFor3" readonly>
I want to find the total from the input field and set the total value to the particular text field.
Here is my Html:
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
</table>
Here I want to add each adult,young,children field in each row and set the value to the corresponded total column.I used for loop for this purpose. But It Shows some error while adding.
Here is my sample code.
http://jsfiddle.net/3gxnya5a/
You can use a simple loop like
$(document).ready(function () {
$('#table').on('keyup', 'input', function () {
//loop through each 4th td in each rows as they are the sum elements
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {
var sum = 0;
//add up the previous 4 values
$(this).prevAll(':lt(3)').find('input').each(function () {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
$(document).ready(function() {
$('#table').on('keyup', 'input', function() {
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function() {
var sum = 0;
$(this).prevAll(':lt(3)').find('input').each(function() {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
</table>
Already answered, but I felt worth adding an alternative.
If you add attributes to the columns you want to add, your code won't / is less likely to break when you add columns/move them around, eg:
<table id='theTable'>
<tbody>
<tr>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5" class='data-total'/></td>
then
$("#theTable>tbody>tr").each(function() {
var sum = 0;
$(".data-add", this).each(function() {
sum += (+this.value || 0); // stolen from Arun to ignore invalid values etc
});
$(".data-total", this).val(sum);
});
I am trying to create the jquery select field which includes images. (http://designwithpc.com/Plugins/ddSlick)
It seems that there is something wrong with my code, as the console is showing an error:
Uncaught TypeError: Object [object Object] has no method 'ddslick'
HTML
<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
$('#quote').keyup(function (){ doTotal(this); calcMenu(this); ddslick(this); });
// ]]></script>
<table id="table1" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Enquiry Date</td>
<td>
<div align="center"><input type="text" name="dateToday" size="25" /></div></td>
</tr>
<tr>
<td>Conference Name</td>
<td>
<div align="center"><input type="text" name="conferenceName" size="25" /></div></td>
</tr>
<tr>
<td>Company Name</td>
<td>
<div align="center"><input type="text" name="companyName" size="25" /></div></td>
</tr>
<tr>
<td>Special Requests</td>
<td><textarea name="comment" rows="5" cols="26"></textarea></td>
</tr>
</tbody>
</table>
<table id="table2" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>First Name</td>
<td>
<div align="center"><input type="text" name="firstName" size="25" /></div></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<div align="center"><input type="text" name="lastName" size="25" /></div></td>
</tr>
<tr>
<td>Tel No</td>
<td>
<div align="center"><input type="text" name="telNo" size="25" /></div></td>
</tr>
<tr>
<td>Cell</td>
<td>
<div align="center"><input type="text" name="cellNo" size="25" /></div></td>
</tr>
<tr>
<td>Email</td>
<td>
<div align="center"><input type="text" name="email" size="25" /></div></td>
</tr>
<tr>
<td><input onclick="formReset()" type="button" value="Reset form" /></td>
</tr>
</tbody>
</table>
<table id="tablex" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<th scope="col" width="30">
<div align="center">Date</div></th>
<th scope="col" width="128">
<div align="center">Amount of Delegates ½ Day Conference # R 240 pp</div></th>
<th width="112">
<div align="center">Amount of Delegates Full Day Conference # R 260 pp</div></th>
<th width="112">
<div align="center">Menu No</div></th>
<th width="112">
<div align="center">Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)</div></th>
<th width="112">
<div align="center">Total Persons for meals</div></th>
<th width="112">
<div align="center">Amount of Single Rooms # R 480 pp</div></th>
<th width="112">
<div align="center">Amount of Double Rooms # R 720 pp</div></th>
<th width="134">
<div align="center">Total for the day</div></th>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date1" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday1" size="5" maxlength="10" /></div></td>
<td>
<div align="center"><input type="text" name="fullday1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total1" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date2" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total2" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date3" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total3" size="5" /></div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="myDropdown">
<select id="myDropdown">
<option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
data-description="Description with Facebook">Facebook</option>
<option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
data-description="Description with Twitter">Twitter</option>
<option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
data-description="Description with LinkedIn">LinkedIn</option>
<option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
data-description="Description with Foursquare">Foursquare</option>
</select>
</div>
</form>
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
If you are using wordpress, try following this steps:
1 - Copy the jquery.ddslick.js file in the /js folder of your theme.
2 - Be sure you have write the correct path to the file in your header.php. Inside the <head> tag you should have something like this:
<script src='<?php echo get_template_directory_uri(); ?>/js/jquery.ddslick.js'></script>
3 - As #Arnelle Balane has point out, you probably should write this piece of code:
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
Inside some script tags:
<script type="text/javascript">
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
</script>
Or, you can put that code inside your custom .js file. That way you don't have to put all the code in the html:
a - Inside your /js folder, make another .js file, something like this: script.js
b - Inside the script.js file, copy the above code without script tags inside a jQuery on ready function, like this:
jQuery(document).ready(function($) {
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
});
4 - Check you have jquery activate on your theme, if not, you can download jquery from here and repeat step 2 for the jQuery file or you can use jQuery from wordpress.
5 - Double check for typos and test if works; if not, is probably something else; keep us informed.
Update: I add more info in the step three, in case of using a external .js file.