I've encountered a problem jQuery and PHP. I'm writing a jQuery function in my registration.php file, but it doesn't work.
This jQuery function is to control all the textbox via the checbox.
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#css').click(function(){
if (this.checked) {
$('#csc').removeAttr("disabled");
$('#cse').removeAttr("disabled");
$('#csp').removeAttr("disabled");
}
else {
$("#csc").attr("disabled", true);
$("#cse").attr("disabled", true);
$("#csp").attr("disabled", true);
}
});
$('#wrt').click(function(){
if (this.checked) {
$('#wsc').removeAttr("disabled");
$('#wse').removeAttr("disabled");
$('#wsp').removeAttr("disabled");
}
else {
$("#wsc").attr("disabled", true);
$("#wse").attr("disabled", true);
$("#wsp").attr("disabled", true);
}
});
$('#maths').click(function(){
if (this.checked) {
$('#msc').removeAttr("disabled");
$('#mse').removeAttr("disabled");
$('#msp').removeAttr("disabled");
}
else {
$("#msc").attr("disabled", true);
$("#mse").attr("disabled", true);
$("#msp").attr("disabled", true);
}
});
$('#sccb').click(function(){
if (this.checked) {
$('#ssc').removeAttr("disabled");
$('#sse').removeAttr("disabled");
$('#ssp').removeAttr("disabled");
}
else {
$("#ssc").attr("disabled", true);
$("#sse").attr("disabled", true);
$("#ssp").attr("disabled", true);
}
});
});
</script>
<table class="registration">
<tr>
<td width="250">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Subjects</strong></p>
</td>
<td width="220">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Full Name</strong></p>
</td>
<td width="200">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Email</strong></p>
</td>
<td width="150">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Phone Number</strong></p>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="cscb" name="computerskills" value="computerskills"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-computerskills-icon.png"></td>
<td><p5>Computer Skills</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="csc" name="CScoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="cse" name="CS_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="csp" name="CS_phone" disabled="disabled"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" name="writing" value="writing"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-english-icon.png"></td>
<td><p5>English</p5></td>
<td><p5 style="font-size: 12px; font-weight: normal; color: #333333;"> & </p5></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-writing-icon.png"></td>
<td><p5>Writing</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="wsc" name="Engcoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="wse" name="Eng_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="wsp" disabled="disabled" name="Eng_phone"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" name="mathematics" value="mathematics"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-mathematics-icon.png"></td>
<td><p5>Mathematics</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="msc"name="Mcoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="mse" name="M_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="msp" disabled="disabled" name="M_phone"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="sccb" name="science" value="science"></input>
</td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-science-icon.png"></td>
<td><p5>Science</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="ssc" name="Sccoor" disabled="disabled" size="30"></input>
</script>
</td>
<td>
<input type="text" id="sse" name="Sc_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="ssp" name="Sc_phone" disabled="disabled"></input>
</td>
</tr>
</table>
Why is that so? Please help, I'm still new to the programming world. Thanks.
I tried to save it as .html file it works, but it doesn't work with .php
For changing disabled and other DOM properties you should use prop method instead of attr, and instead of using IDs you can traverse the DOM and find the target inputs using closest and find methods.
$(document).ready(function () {
$('table input[type=checkbox]').change(function () {
$(this).closest('table')
.closest('tr')
.find('input[type=text]')
.prop('disabled', !this.checked);
});
});
http://jsfiddle.net/hum7n/
"css","wrt","maths" Id attributes are not given to corresponding check box.. Please add this and try.
HTML code:
<table class="registration">
<tr>
<td width="250">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Subjects</strong></p>
</td>
<td width="220">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Full Name</strong></p>
</td>
<td width="200">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Email</strong></p>
</td>
<td width="150">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Phone Number</strong></p>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="css" name="computerskills" value="computerskills"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-computerskills-icon.png"></td>
<td><p5>Computer Skills</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="csc" name="CScoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="cse" name="CS_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="csp" name="CS_phone" disabled="disabled"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" name="writing" id="wrt" value="writing"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-english-icon.png"></td>
<td><p5>English</p5></td>
<td><p5 style="font-size: 12px; font-weight: normal; color: #333333;"> & </p5></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-writing-icon.png"></td>
<td><p5>Writing</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="wsc" name="Engcoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="wse" name="Eng_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="wsp" disabled="disabled" name="Eng_phone"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="maths" name="mathematics" value="mathematics"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-mathematics-icon.png"></td>
<td><p5>Mathematics</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="msc"name="Mcoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="mse" name="M_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="msp" disabled="disabled" name="M_phone"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="sccb" name="science" value="science"></input>
</td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-science-icon.png"></td>
<td><p5>Science</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="ssc" name="Sccoor" disabled="disabled" size="30"></input>
</script>
</td>
<td>
<input type="text" id="sse" name="Sc_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="ssp" name="Sc_phone" disabled="disabled"></input>
</td>
</tr>
</table>
I made some tweaks to it
$(document).ready(function() {
$('.skills').on('click', '.chk_skill', function(){
$(this).closest('tr.skill').find('input').not(this).prop('disabled', !this.checked)
})
});
HTML
<table class="registration">
<tr>
<td width="250">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px">
<strong>Subjects</strong>
</p>
</td>
<td width="220">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px">
<strong>Full Name</strong>
</p>
</td>
<td width="200">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px">
<strong>Email</strong>
</p>
</td>
<td width="150">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px">
<strong>Phone Number</strong>
</p>
</td>
</tr>
<tr>
<td>
<table class="skills">
<tr class="skill">
<td>
<table>
<tr>
<td><input class="chk_skill" type="checkbox" id="cscb" name="computerskills"
value="computerskills" /></td>
<td><img
src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-computerskills-icon.png" /></td>
<td><p5>Computer Skills</p5></td>
</tr>
</table>
</td>
<td><input type="text" id="csc" name="CScoor"
disabled="disabled" size="30"></input></td>
<td><input type="text" id="cse" name="CS_email"
disabled="disabled" size="27"></input></td>
<td><input type="text" id="csp" name="CS_phone"
disabled="disabled"></input></td>
</tr>
<tr class="skill">
<td>
<table>
<tr>
<td><input class="chk_skill" type="checkbox" name="writing"
value="writing"></td>
<td><img
src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-english-icon.png" /></td>
<td><p5>English</p5></td>
</tr>
</table>
</td>
<td><input type="text" id="wsc" name="Engcoor"
disabled="disabled" size="30"></input></td>
<td><input type="text" id="wse" name="Eng_email"
disabled="disabled" size="27"></input></td>
<td><input type="text" id="wsp" disabled="disabled"
name="Eng_phone"></input></td>
</tr>
<tr class="skill">
<td>
<table>
<tr>
<td><input class="chk_skill" type="checkbox"
name="mathematics" value="mathematics" /></td>
<td><img
src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-mathematics-icon.png" /></td>
<td><p5>Mathematics</p5></td>
</tr>
</table>
</td>
<td><input type="text" id="msc" name="Mcoor"
disabled="disabled" size="30"></input></td>
<td><input type="text" id="mse" name="M_email"
disabled="disabled" size="27"></input></td>
<td><input type="text" id="msp" disabled="disabled"
name="M_phone"></input></td>
</tr>
<tr class="skill">
<td>
<table>
<tr>
<td><input class="chk_skill" type="checkbox" id="sccb"
name="science" value="science"></input></td>
<td><img
src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-science-icon.png" /></td>
<td><p5>Science</p5></td>
</tr>
</table>
</td>
<td><input type="text" id="ssc" name="Sccoor"
disabled="disabled" size="30"></input></td>
<td><input type="text" id="sse" name="Sc_email"
disabled="disabled" size="27"></input></td>
<td><input type="text" id="ssp" name="Sc_phone"
disabled="disabled"></input></td>
</tr>
</table>
</td>
</tr>
</table>
Demo: Fiddle
Related
I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.
You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>
I am new to Javascript and already set up the collapsing table below with jquery. This already works. I can expand or collapse the complete table or expand and collapse columns by clicking on the row.
But this also changes the view by setting options like BRS or set (see HTML).
What I want is so control all this by the button "+" in the first column (see HTML).
Maybe it's simple maybe not. Can someone help me?
Thanks
<!DOCTYPE html><html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script><script type="text/javascript">
$(document).ready(function() {
$('.expandable').nextAll('tr').each( function() { // hide all at start
if(!($(this).is('.expandable')))
$(this).hide();
});
$('.expandable').click(function () { // toggle single by click
$(this).nextAll('tr').each( function() {
if($(this).is('.expandable')) {
return false; }
$(this).toggle();
});
});
$('#expand_all').click(function() { // show all
$('.expandable').nextAll('tr').each( function() {
if(!($(this).is('.expandable')))
$(this).show();
});
});
$('#collaps_all').click(function() { // hide all
$('.expandable').nextAll('tr').each( function() {
if(!($(this).is('.expandable')))
$(this).hide();
});
})
});
</script><title>ConfigPage for CAN on RestbusSimulationStation</title>
<body>
<h2>RSS</h2>
<button style="font-size:20px" id="expand_all">expand all</button><button style="font-size:20px" id="collaps_all">collaps all</button>
<table border="1">
<tr bgcolor="#fb9d00">
<th></th>
<th>FRAMES</th>
<th>ID</th>
<th>DLC</th>
<th>BRS</th>
<th>CYCLE/s</th>
<th>SET</th>
<th>SIGNALS</th>
<th>POS</th>
<th>Bits</th>
<th>select:</th>
<th>comput method</th>
<th>enum</th>
</tr>
<tr class="expandable">
<td><input type="button" value="+"></td>
<td><strong>EOCM_CAN8_MSG01</strong></td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr><td><td><td><td><td><td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span></td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767"><td></td>
<td><input type="number" name="enum" min="0" style="width: 3em;"></td>
</td>
</td></td></td></td></td></td></tr>
<tr class="expandable">
<td><input type="button" value="+"></td>
<td><strong>EOCM_CAN8_MSG01</strong></td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr><td><td><td><td><td><td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span></td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767"><td></td>
<td><input type="number" name="enum" min="0" style="width: 3em;"></td>
</td>
</td></td></td></td></td></td></tr>
</table>
</body>
</html>
Please have a look at this approach.
Instead of attaching click handler to <tr>; we are attaching it to the button like $('.expandable input[type=button]').click. Apart from that rest of the code is almost as it is.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.expandable').nextAll('tr').each(function() { // hide all at start
if (!($(this).is('.expandable')))
$(this).hide();
});
$('.expandable input[type=button]').click(function() { // toggle single by click
var trElem = $(this).closest("tr");
trElem.nextAll('tr').each(function() {
if ($(this).is('.expandable')) {
return false;
}
$(this).toggle();
});
});
$('#expand_all').click(function() { // show all
$('.expandable').nextAll('tr').each(function() {
if (!($(this).is('.expandable')))
$(this).show();
});
});
$('#collaps_all').click(function() { // hide all
$('.expandable').nextAll('tr').each(function() {
if (!($(this).is('.expandable')))
$(this).hide();
});
})
});
</script>
<title>ConfigPage for CAN on RestbusSimulationStation</title>
<body>
<h2>RSS</h2>
<button style="font-size:20px" id="expand_all">expand all</button>
<button style="font-size:20px" id="collaps_all">collaps all</button>
<table border="1">
<tr bgcolor="#fb9d00">
<th></th>
<th>FRAMES</th>
<th>ID</th>
<th>DLC</th>
<th>BRS</th>
<th>CYCLE/s</th>
<th>SET</th>
<th>SIGNALS</th>
<th>POS</th>
<th>Bits</th>
<th>select:</th>
<th>comput method</th>
<th>enum</th>
</tr>
<tr class="expandable">
<td>
<input type="button" value="+">
</td>
<td><strong>EOCM_CAN8_MSG01</strong>
</td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span>
</td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767">
<td></td>
<td>
<input type="number" name="enum" min="0" style="width: 3em;">
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</tr>
<tr class="expandable">
<td>
<input type="button" value="+">
</td>
<td><strong>EOCM_CAN8_MSG01</strong>
</td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span>
</td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767">
<td></td>
<td>
<input type="number" name="enum" min="0" style="width: 3em;">
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</tr>
</table>
</body>
</html>
I want to use a jQuery UI slider on this page, but for some reason it won't work. You will see I am busy with "Height in cm without shoes" and I will complete this form as soon as I can get this problem solved. Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module Health Measurements</title>
<link rel="stylesheet" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css">
<script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.3/demos/demos.css">
<script>
$(function() {
$( "#slider-40" ).slider({
min: 65,
max: 240,
value: 170,
slide: function( event, ui ) {
$( "#40" ).val( ui.value );
}
});
$( "#40" ).val( $( "#slider-40" ).slider( "40" ) );
});
</script>
<style type="text/css">
/*
.style2 {font-size: medium}
*/
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="550" border="1">
<tr>
<td colspan="2" bgcolor="#5ACDC7"><h3>Health Measurements</h3></td>
</tr>
<tr>
<td width="332">Height in cm without shoes</td>
<td width="202">
<label for="40"><span class="style2">Height</span>:</label>
<input type="text" id="40" style="border:0; color:#f6931f; font-weight:bold;" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="slider-40" style="height:5px;"></div>
</td>
</tr>
<tr>
<td>Weight in kg without shoes</td>
<td><label>
<input name="41" type="text" id="41" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Hip circumference in cm</td>
<td><label>
<input name="42" type="text" id="42" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Waist circumference in cm</td>
<td><label>
<input name="43" type="text" id="43" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Have you eaten in the last 7 hours?</td>
<td><label>
<select name="44" id="44">
<option>Yes</option>
<option>No</option>
</select>
</label></td>
</tr>
<tr>
<td>Systolic blood pressure mmHg</td>
<td><label>
<input name="45" type="text" id="45" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Diastolic blood pressure mmHg</td>
<td><label>
<input name="46" type="text" id="46" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Glucose mmol/l</td>
<td><label>
<input name="47" type="text" id="47" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Total Cholesterol mmol/l</td>
<td><label>
<input name="48" type="text" id="48" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#5ACDC7"><h5>BP 5 Minute Follow-up</h5></td>
</tr>
<tr>
<td>Systolic blood pressure 5 min</td>
<td><label>
<input name="51" type="text" id="51" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Diastolic blood pressure 5 min</td>
<td><label>
<input name="52" type="text" id="52" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label>
<input type="submit" name="button1" id="button1" value="Submit" />
</label></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
I would appreciate if someone could just point out if you see some errors?
This works for me:
plunker
If the slider does not show up at all please check:
jquery and jquery-ui are loaded.
jquery-ui is loaded AFTER jquery
Friends I came to a bit of problem. Everything was working fine before. But I can't rectify why it starts giving me such error.
Here is my JavaScript Code:
function newSupplier() {
$('div#AddSupplier div.msg').html('').hide();
$('div#AddSupplier div.loader').show();
registerSupplier($('div#AddSupplier table.frm :input').serialize()).done(function (a) {
if (a.Msg) {
$('div#AddSupplier div.msg').html(a.Msg).removeClass('success').addClass('error').fadeIn();
}
else if (a.supid) {
$('div#AddSupplier div.msg').html('Supplier <span class="l2">' + a.supid + '</span> Registered').removeClass('error').addClass('success').fadeIn();
$('div#AddSupplier table.frm :input').val('');
}
}).always(function () {
$('div#AddSupplier div.loader').hide();
}).fail(function () {
$('div#AddSupplier div.msg').html(errMsgNet).removeClass('success').addClass('error').fadeIn();
});
}
And here is the code of registerSupplier() function:
function registerSupplier(dataToPost) {
return $.ajax({
type: "POST",
url: jsonpath + 'Json.ashx?method=RegisterSupplier',
data: dataToPost
});
}
And here is the complete JS file: http://preview.myignou.com/Docs/jScript.js
Related HTML
<div id="ViewOrder">
<h2>View Order Details</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Enter Order Number</label></td>
<td><input type="text" name="orderNumber" onkeyup="$('#ViewOrder>div>div').fadeOut();" /><input type="button" class="but1 m-side" value="OK" onclick="LoadMaterialOrder();"/></td>
<td>
<div class="process"> </div>
</td>
</tr>
</table>
<div>
<div class="border shadow m-tb">
<h2 class="header">Order Details</h2>
<div id="orderDetails" class="tab-content">
<table class="frm">
<tr>
<td><label>Supplier</label></td>
<td><select id="newSupplier" name="supplier"></select></td>
<td class="r-align"><input type="button" value="Load Suppliers" onclick="loadSuppliers('#newSupplier')" /></td>
</tr>
<tr>
<td><label>Order Date</label></td>
<td><input type="text" name="orderDate" /></td>
</tr>
<tr>
<td><label>Delivery Date</label></td>
<td><input type="text" name="deliveryDate" /></td>
</tr>
<tr>
<td><label>Cancel Date</label></td>
<td><input type="text" name="cancelDate" /></td>
</tr>
<tr>
<td><label>Payment Due Mark</label></td>
<td><input id="payDue2" type="checkbox" name="isPayDue" /><label for="payDue2">Yes</label></td>
</tr>
<tr>
<td><label>Remember Mark</label></td>
<td><input id="remark2" type="checkbox" name="isMarked" /><label for="remark2">Yes</label></td>
</tr>
</table>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1 sub-but" value="Save Changes" onclick=""/><input type="reset" value="Reset" /></td>
</tr>
</table>
</div>
<br />
<div class="border shadow m-tb">
<h2 class="header">Payment Records</h2>
<div id="paymentHistory" class="tab-content">
<table class="tab pay-his">
<tr class="th">
<td></td>
<td>Trans#</td>
<td>Date</td>
<td>Comment</td>
<td>Type</td>
<td>Credit</td>
<td>Debit</td>
<td>Balance</td>
<td>Associated Agent</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-1</td>
<td>12-12-12</td>
<td>Abclk lask aa</td>
<td>Credit</td>
<td>500</td>
<td></td>
<td>500.00</td>
<td>Shashwat Tripathi</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-2</td>
<td>12-12-12</td>
<td>Shashwat Tripathi</td>
<td>Debit</td>
<td></td>
<td>500</td>
<td>500.00</td>
<td>Sudhir</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-3</td>
<td>12-12-12</td>
<td>Shashwat Tripathi</td>
<td>Credit</td>
<td>500</td>
<td></td>
<td>500.00</td>
<td>Sudhir Gaur</td>
</tr>
</table>
<br />
<input type="button" class="but2" value="Edit"
onclick="$('#ViewOrder #payEdit').slideDown(function () { $('html, body').animate({ scrollTop: $('#paymentHistory').offset().top-20 }, 500); });" /><input type="button" class="but2 m-side" value="Delete" />
<div id="payEdit" class="border m-tb shadow" style="display:none;">
<h2 class="header">Edit Payment</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Date</label></td>
<td><input type="text" name="date" placeholder="dd-mm-yy"/></td>
</tr>
<tr>
<td><label>Type</label></td>
<td>
<select name="type">
<option>Credit</option>
<option>Debit</option>
<option>Expense</option>
</select>
</td>
</tr>
<tr>
<td><label>Amount</label></td>
<td><input type="text" name="amount" placeholder="धनराशी..." /></td>
</tr>
<tr>
<td><label>Comment</label></td>
<td><textarea name="comment" rows="4" cols="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" class="but1" value="Save Changes" /><input type="button" class="but2 m-side" onclick="$('#payEdit').slideUp();" value="Cancel" /></td>
</tr>
</table>
</div>
</div>
<br />
<h2>Register New Payment</h2>
<hr />
<div id="newMatOrderPayment">
<table class="frm">
<tr>
<td><label>Date</label></td>
<td><input type="text" name="date" placeholder="dd-mm-yy" /></td>
</tr>
<tr>
<td><label>Type</label></td>
<td>
<select name="type">
<option>Credit</option>
<option>Debit</option>
<option>Expense</option>
</select>
</td>
</tr>
<tr>
<td><label>Amount</label></td>
<td><input type="text" name="amount" placeholder="धनराशी..." /></td>
</tr>
<tr>
<td><label>Comment</label></td>
<td><textarea name="comment" rows="4" cols="10"></textarea></td>
</tr>
</table>
</div>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1" value="Register Payment" onclick=""/><input type="button" class="but2" onclick="$('#NewMatOrderPayment :text').val('');" value="Reset" /></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="AddSupplier">
<h2>Register New Suppiler</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Supplier ID</label></td>
<td><input type="text" name="supId" /></td>
</tr>
<tr>
<td><label>Contact Number</label></td>
<td><input type="text" name="contact" /></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea name="address" cols="10" rows="4"></textarea></td>
</tr>
<tr>
<td><label>Email address</label></td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type="text" name="city" /></td>
</tr>
</table>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1 sub-but" value="Register" onclick="newSupplier();"/><input type="reset" value="रीसेट" /></td>
</tr>
</table>
</div>
If I am calling this function directly from FF and Firebug console then It is getting called.
But on button click I am getting error TypeError: newSupplier is not a function
Please ask me If u need additional code.
the first select tag in your html code has ID newSupplier just like the name of the function. some browsers can access the node elements just by specifying the ID in the js code and then the function defined is overridden by the element in the DOM.
you need to rename the function name or the element ID.
Hi I have a div box that opens on my page and then loads a html file which contains CKeditor to deal with the text area. The problem is that if I view the html file in my browser everything works well and I have all the editing options. When I use it in my JS script I get nothing. Can anyone help me please ?
The JS code that does this is here
$(document).ready(function(){
$('#'+divbox).load('../customer_rm/display_email_send.php', function() {
// once loaded
CKEDITOR.replace( 'mail_body' );
and the working HTML file is here
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<style type='text/css'>
table.t {border: 1px solid black}
td, tr {border: 0}
.bdr {
border: 4px solid black ;
}
.white {
background-color:#FFF ;
}
</style>
<div align='center'>
<br><br />
<table id='t' width='700' border='2' bgcolor='#ccc'>
<tr >
<td width='20'> </td>
<td width='50'> </td>
<td width='50'> </td>
<td > </td>
<td width='20' > </td>
</tr>
<tr>
<td> </td>
<td rowspan='3'>
<input type='button'id='send' value='Send'
style='width:60px; height:40px '
/><hr>
<input type='button' value='Close'
style='width:60px; height:20px ' onclick='fadeout()'
/>
</td>
<td><input type='button' value='To :' /></td>
<td><input type='text' class='white' id='mailto' size='80' /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type='button' value='Cc :' /></td>
<td><input type='text' class='white' id='mailcc' name='mailcc' size='80' /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type='button' value='Bcc :' id='bcc' /></td>
<td><input type='text' class='white' id='mailbcc' size='80' /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type='button' value='Subject'
style='width:60px; height:20px ' onclick='fadeout()'
/></td>
<td colspan='2'><input type='text' class='white' id='subject' size='89' /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan='3'>
<textarea id='mail_body' class='white' style='height:380px; width:600px; bgcolor:#fff ' >
</textarea>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
Why not use Jquery to call CKEditor to replace your div...seems much more straightforward:
$( 'textarea' ).ckeditor();
Reference Here: http://ckeditor.com/blog/CKEditor_for_jQuery