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>
Related
How to select <ul> inside <td> of selected row.
here is my html and jquery code.
Help me to resolve this issue.
I am trying to select <ul> tag inside <td> to insert fetched data by ajax.
this is jquery code.
$('.result').click(function () {
var tpid = $(this).parents('tr').find('.tpId').val();
$.ajax({
type: "POST",
url: "/Reception/PatientTests/getHelpValue",
data: { 'tpid': tpid },
success: function (data) {
str = "";
for (var i = 0; i < data.length; i++) {
str +="<li>"+data[i] + "</li>";
}
$(this).find('td ul').html(str);
},
error: function (e) {
alert('Error' + JSON.stringify(e));
}
});
});
this is my html code.
<table class="table table-bordered table-sm" style="height:auto">
<tbody><tr class="blue-gradient-rgba text-white">
<th>Test Name</th>
<th>Value</th>
<th>Unit</th>
<th>Normal</th>
<th>Minimum</th>
<th>Maximum</th>
</tr>
<tr>
<input type="hidden" class="tid" value="2">
<th colspan="2">COMPLETE BLOOD COUNT</th>
</tr>
<tr>
<td>Haemoglobin</td>
<td>
<input type="hidden" class="tpId" value="9">
<input type="text" class="result" value="45">
<ul class="helpValues"></ul>
</td>
<td>gm %</td>
<td>m-14.0 to 18.0 Gms. %
F- 12.5 to 16.0 Gms. %</td>
<td></td>
<td></td>
</tr>
<tr>
<td>MCV</td>
<td>
<input type="hidden" class="tpId" value="12">
<input type="text" class="result" value="75">
<ul class="helpValues"></ul>
</td>
<td>fl</td>
<td>76- 96</td>
<td></td>
<td></td>
</tr>
<tr>
<input type="hidden" class="tid" value="3">
<th colspan="2">DENGUE IgG /IgM</th>
</tr>
<tr>
<td>Dengue IgG</td>
<td>
<input type="hidden" class="tpId" value="13">
<input type="text" class="result" value="53">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td>1 mL serum</td>
<td></td>
</tr>
<tr>
<td>Dengue IgM</td>
<td>
<input type="hidden" class="tpId" value="14">
<input type="text" class="result">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Dengue NS1</td>
<td>
<input type="hidden" class="tpId" value="15">
<input type="text" class="result">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
I tried this $(this).find('td ul').html(str); but it's not working.
here I want to add data into ul of the particular row.
.tpId is just previous and ul is just next to the .result. So, you can use prev and next:
var tpid = $(this).parents('tr').find('.tpId').val();
// Alternative:
var tpid = $(this).prev().val(); // I love this approach
// This is wrong
$(this).find('td ul').html(str);
// You're finding from `.result`
// So, use:
$(this).parents('tr').find('ul').html(str);
// But, you can do just
$(this).next().html(str); // I love this approach
As far as my understanding, you try to access 'ul', inside of your 'td'. Here is the block of code which includes ul inside of td.
<tr>
<td>MCV</td>
<td>
<input type="hidden" class="tpId" value="12">
<input type="text" class="result" value="75">
<ul class="helpValues"></ul>
</td>
<td>fl</td>
<td>76- 96</td>
<td></td>
<td></td>
</tr>
Jquery code
$(".result").on("click",function()
{
let ul=$(this).parent().find("ul");
let ulValues=$(ul).val();
console.log(ulValues);
})
I have a simple question regarding jAutoCalc, my question can be answered in two ways:
1> How to customize the jAutoCalc plugin so that we can make it able to be used for input array names instead of just names.
my code is here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart]').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=cart]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
</script>
</head>
<body>
<form name="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add">Add Row</button></td>
</tr>
</table>
</form>
</body>
</html>
since the names are same for dynamically generated input's i want use input array. The problem is that if i do so then I'm unable to use the plugin features!
2> The question can be answered in second way by providing methods to use plugin while using input arrays
I know its an old post but maybe others may have same issue.
Try to open jautocalc.js find this function "getFieldSelector(field)" and edit this code.
return ':input[name="' + field + '"]';
to
return ':input[name="' + field + '[]"]';
I think the whole problem is with javascript
the javascript should be like
$(document).ready(function(){
$('.item_total').keyup(function(){
$('your result input name here).text($('.item_total').val() * 1.5);
});
});
this link will help you:
http://jsfiddle.net/7BDwP/
You will get idea from the above link what i am trying to say
I have a table inside a form, the rows and data inside the rows are generated from the back end automatically. Well all the columns are disabled, so that the user can not edit it but one column is editable. on submit compare the value from editable column and value in quanity column and display a alert message if value of editable is more.
function validateAvaliable(){
var aproducts = document.getElementById("available-quanity").value;
var sproducts = document.getElementById("send-quanity").value;
console.log(aproducts);
console.log(sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" id="available-sno" disabled value="1"></td>
<td><input type="text" name="available-name" id="available-name" disabled value="shoes"></td>
<td><input type="text" name="available-id" id="available-id" disabled value="123"></td>
<td><input type="number" name="available-quanity" id="available-quanity" disabled value="50"></td>
<td><input type="text" name="available-brand" id="available-brand" disabled value="adidas"></td>
<td><input type="text" name="available-color" id="available-color" disabled value="black"></td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="number" name="send-quanity" id="send-quanity" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
When I try to debug it it's getting the values but if statement is skipping.
I need the code in javascript or Jquery.
Thanks in Advance
Added parseInt() and it did the trick:
function validateAvaliable() {
var aproducts = parseInt(document.getElementById("available-quanity").value);
var sproducts = parseInt(document.getElementById("send-quanity").value);
console.log(aproducts);
console.log(sproducts);
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" id="available-sno" disabled value="1"></td>
<td><input type="text" name="available-name" id="available-name" disabled value="shoes"></td>
<td><input type="text" name="available-id" id="available-id" disabled value="123"></td>
<td><input type="number" name="available-quanity" id="available-quanity" disabled value="50"></td>
<td><input type="text" name="available-brand" id="available-brand" disabled value="adidas"></td>
<td><input type="text" name="available-color" id="available-color" disabled value="black"></td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="number" name="send-quanity" id="send-quanity" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
I have a page containing:
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[1][arg1]" value="X"></td>
<td><input type="input" name="set[1][arg2]" value="Y"></td>
<td><input type="input" name="set[1][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[2][arg1]" value="X"></td>
<td><input type="input" name="set[2][arg2]" value="Y"></td>
<td><input type="input" name="set[2][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[3][arg1]" value="X"></td>
<td><input type="input" name="set[3][arg2]" value="Y"></td>
<td><input type="input" name="set[3][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[4][arg1]" value="X"></td>
<td><input type="input" name="set[4][arg2]" value="Y"></td>
<td><input type="input" name="set[4][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[5][arg1]" value="X"></td>
<td><input type="input" name="set[5][arg2]" value="Y"></td>
<td><input type="input" name="set[5][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[6][arg1]" value="X"></td>
<td><input type="input" name="set[6][arg2]" value="Y"></td>
<td><input type="input" name="set[6][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
Two (or more) divs, containing a table each, plus n rows, each containing inputs. The inputs you already see are dynamically created from data in the db.
I would like to be able to just add a new <tr> when the link below any table is clicked. The catch being that the table which will recieve the new row is the one immediately above the link clicked.
I did think about giving each table a unique id which matches the id of the link but am unsure how in the jQuery to then recognise that a link with a random id has been clicked.
Then i thought maybe I could use the closest functionality and traverse backwards from the link to the table above it but I don't think that works. (maybe it does?)
Also, when I add the new row, it needs to be blank, which I think I could figure out, once I manage to clone the last (or any for that matter) row and append it to the end of the relevant table. E.g. new row:
<tr>
<td><input type="input" name="newSet[][arg1]" value=""></td>
<td><input type="input" name="newSet[][arg2]" value=""></td>
<td><input type="input" name="newSet[][arg3]" value=""></td>
</tr>
Hope it makes sense what I am asking.
Thanks in advance.
Jon
First, add a class addSet to your links and remove the id or make it unique. Repeated ids is not a valid markup. After doing this, I'd say this should work
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').each(function(index) {
var $this = $(this);
$this.val('');
$this.prop('name','set[][arg' + (index + 1) + ']' );
})
$table.append($clonedRow);
});
DEMO
DEMO
As pointed out in the comments, please change id="addSet" to class="addSet" to get rid of duplicate ID's. Make a clone of the last row .... there should be at least one row in the table, otherwise this part will fail. Then fix the name and value of each input element in the clone. You can either change the current value with .val() or the default/initial value with .attr() or removeAttr('value').
Here is the code you need:
$(function() {
$(document).on('click', 'a.addSet', function(e) {
e.preventDefault();
var tr = $(this).closest('div.my_div').find('tr').last().clone();
tr.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$(this).closest('div.my_div').find('table tbody').append( tr );
});
});
you can do it by adding a class to the link as id must be unique:
HTML:
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[1][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[1][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[1][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[2][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[2][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[2][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[3][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[3][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[3][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[4][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[4][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[4][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[5][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[5][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[5][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[6][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[6][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[6][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
JQUERY:
$(".addSet").click(function () {
$(this).prev("table").append('<tr><td><input type="input" name="newSet[][arg1]" value=""></td><td><input type="input" name="newSet[][arg2]" value=""></td><td><input type="input" name="newSet[][arg3]" value=""></td></tr>');
})
FIDDLE:
http://jsfiddle.net/kbxekrjc/
I am answering my own question because I used a combination of two of the other provided answers (#ClaudioRedi & #user3558931)
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$clonedRow.hide();
$table.append($clonedRow);
$clonedRow.show('slow');
});
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.