I wanted to display some integer values in the html from javascript but unfortunately both .html and .text is not working
here is my code
<script type="text/javascript">
$(".total").text("<?php echo $row_price['product_price'] + $economy; ?>");
$('input:radio[name="shipping_type"]').change(function(){
if($(this).val() == "economy"){
$(".total").text("<?php echo $row_price['product_price'] + $economy; ?>");
}else{
$(".total").text("<?php echo $row_price['product_price'] + $fast; ?>")
}
});
</script>
By checking the source code value is successfully coming in the .text() function. no error is displaying on the console as well
html
<tr>
<td class='radio-container'>
<input checked="checked" id="shipping_type_economy" name="shipping_type" type="radio" value="economy" />
</td>
<td><label for="shipping_type_domestic">Economy</label></td>
<td class='right'>
<span class="economy">10.20$</span>
</td>
</tr>
<tr>
<td class='radio-container'>
<input id="shipping_type_fast" name="shipping_type" type="radio" value="fast" />
</td>
<td><label for="shipping_type__fast">Fast</label></td>
<td class='right'>
<span class="fast">20.00$</span>
</td>
</tr>
<tr><td>TOTAL</td>
<td class="right" id="total"><span class="total"><span/></td>
</tr>
Your code is correct,just wrap your Jquery Code inside $(document).ready(function(){..}) block as shown below :-
$(document).ready(function(){
//Jquery Code
});
You are using the jQuery syntax, which requires you to have the jQuery library included. jQuery is a library on top of javascript. http://jquery.com/, besides that, the code needs to be wrapped in a doc ready statement.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
....your code
});
</script>
Related
I am trying to autopopulate an input field (location-name) with the value entered in another field (location-address). I have looked online everywhere and managed to make the JS snippet work on a straightforward example, but for some reason this is not working with the following php code.
Just to clarify, I would like the value entered in "location-address to be passed to "location-name".
<script>
$('#location-address')
.keyup(function() {
var value = $(this).val();
$('#location-name').text(value);
})
.keyup();
</script>
<tr class="em-location-data-name">
<th style="padding-top: 14px;">
<?php _e ( 'Event unique identifier:', 'dbem' )?>
</th>
<td>
<input id="location-name" type="text" name="location_name" />
</td>
</tr>
<tr class="em-location-data-address">
<th style="padding-top: 14px;">
<?php _e ( 'Address:', 'dbem' )?> </th>
<td>
<input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
</td>
</tr>
Firstly your code needs to be placed in a document.ready handler. Secondly, you need to use val() not text() to set the value of an input field.
$(function() {
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val(value);
}).keyup();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="em-location-data-name">
<th style="padding-top: 14px;">
<?php _e ( 'Event unique identifier:', 'dbem' )?>
</th>
<td>
<input id="location-name" type="text" name="location_name" />
</td>
</tr>
<tr class="em-location-data-address">
<th style="padding-top: 14px;">
<? php _e( 'Address:', 'dbem') ?>
</th>
<td>
<input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
</td>
</tr>
</table>
You need to wrap your jQuery code in $(document).ready(); so that jQuery binds all HTML elements.
Corrected code:
<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val( value );
});
}).keyup();
</script>
Use this
<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val( value );
});
});
</script>
I have a Javascript variable Pass which holds value that I got from my XSLT. I want to display the value of Pass in my html webpage inside a table. The variable Pass definitely holds a value. I am able to get in in a alert box using the alert() function, But, i am not able to get this value to my webpage.
I have so far tried these two but they dont seem to work.
<td> Pass</td>
<td> document.write(Pass) </td>
Here is the section of code, where I need help:
<table>
<script type="text/javascript">
var Total='<xsl:value-of select="#total" />'
var Failure='<xsl:value-of select="#errors" />'
var Pass= Total - Failure
<tr>
<td>Pass </td>
<td> *Value of the variable 'Pass' goes here* </td>
</tr>
</script>
</table>
If you're using XSLT anyway, just use XSLT to output the value instead of JavaScript:
<table>
<tr>
<td>Pass </td>
<td><xsl:value-of select="#total - #errors"/></td>
</tr>
<table>
<table>
<tr>
<td>Pass </td>
<td> *Value of the variable '<span id="PassId">Pass</span>' goes here* </td>
</tr>
</table>
<script type="text/javascript">
var Total='<xsl:value-of select="#total" />'
var Failure='<xsl:value-of select="#errors" />'
var Pass= Total - Failure;
document.getElementById('PassId').innerHTML = Pass;
</script>
Assign the element you want the value to appear in an id.
Eg <td id="myexample"><\td>
You can now easily access that element from JavaScript.
var myexample = document.getElementById("myexample");
myexample.innerHTML = "your value here";
As long as you can get your XSLT to render the value correctly for vars Total and Failure. The following can work:
<html><body>
<table>
<tr>
<td>Pass </td>
<td> *Value of the variable <span id="passval"></span> goes here* </td>
</tr>
</table>
<script type="text/javascript">
var Total='<xsl:value-of select="#total" />'
var Failure='<xsl:value-of select="#errors" />'
var Pass= Total-Failure;
var passvalholder = document.getElementById("passval");
passvalholder.innerHTML=Pass;
</script>
</body></html>
I'm trying to find "checkbox" inside the parent element table. Below, my HTML code has a checkbox input with an ID of "selectall". Using jQuery, when "selectall" is changed, I want to, skip back to the parent element table and find the first mention of "checkbox" as follows:
HTML:
<table border="1" cellpadding="5">
<tr>
<th>#</th>
<th>ID</th>
<th>Datetime</th>
<th>Reading</th>
<th>Status</th>
<th>Gate</th>
</tr>
<?php
// while loop, fetch the SQL result as an array
while ($row = mysqli_fetch_array($sql)) {
// echo the database data
echo '<tr><td><input name="checkbox[]" type="checkbox" class="check-class" value="' . $row['ID'] . '"></td>';
echo "<td>" . $row['ID'] . "</td><td>" . $row['datetime'] . "</td><td>" . $row['reading'] . "</td><td>" . $row['status'] . "</td><td>" . $row['gate'] . "</td></tr>";
}
// have a check all button and delete input -->
?>
<tr valign="middle">
<td>
<input type="checkbox" id="selectall"/>Check All
</td>
<td align="center" colspan="5">
<input name="delete" type="submit" id="delete" value="Delete">
</td>
</tr>
</table>
Javascript:
$(function() {
// declare select all checkbox
$('#selectall').change(function() {
// declare other checkboxes
var checkboxes = $(this).closest('table').find(':checkbox');
// if checked, set to all true
if ($(this).prop('checked')) {
checkboxes.prop('checked', true);
}
// else, set all to false
else {
checkboxes.prop('checked', false);
}
});});
The purpose is that, for every row in my sql query, I return the fields to the HTML table, each with a checkbox. My table is coded so that for every record, a checkbox appears on the same table row, thus allowing me to select that checkbox (or multiple of) in a different SQL statement later to DELETE such record(s) from the SQL table.
Thus, using javascript, I'm trying to use a separate checkbox that, once checked, checks all the other checkboxes. If that makes sense.
I had a working example before, but it was a mess. I wrapped everything within php tags and echoed all the necessary HTML tags (obviously a bad idea), hence the change now. But it did work before:
Before:
echo '<form name="form1" method="POST" action="">';
echo '<table border="1" cellspacing="0" cellpadding="5">';
echo "<tr><th>#</th><th>ID</th><th>datetime</th><th>reading</th><th>status</th><th>gate</th></tr>";
// while loop, fetch the SQL result as an array
while ($row = mysqli_fetch_array($sql)) {
// echo the database data
echo '<tr><td><input name="checkbox[]" type="checkbox" class="check-class" value="' . $row['ID'] . '"></td>';
echo "<td>" . $row['ID'] . "</td><td>" . $row['datetime'] . "</td><td>" . $row['reading'] . "</td><td>" . $row['status'] . "</td><td>" . $row['gate'] . "</td></tr>";
}
// have a check all button and delete input
echo '<tr valign="middle"><td><input type="checkbox" id="selectall"/>Check All</td><td align="center" colspan="5"><input name="delete" type="submit" id="delete" value="Delete"></td></tr>';
echo "</table>";
Javascript:
$(function() {
// declare select all checkbox
$('#selectall').change(function() {
// declare other checkboxes
var checkboxes = $(this).closest('form').find(':checkbox');
// if checked, set to all true
if ($(this).prop('checked')) {
checkboxes.prop('checked', true);
}
// else, set all to false
else {
checkboxes.prop('checked', false);
}
});});
Please advise.
EDIT (Converted HTML paste):
<!DOCTYPE html>
<html>
<head>
<title>Flood Sensor Web Interface</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/checkall.js"></script>
<script type="text/javascript" src="js/buttoncontrol.js">
</script>
<script type="text/javascript" src="js/paginate.js"></script>
</head>
<body>
<h1>Flood Sensor Web Interface</h1>
<p>This web interface will display all the table data. To
delete, check the relevant checkbox (or multiple checkboxes)
and press the delete button.</p>
<table border="1" cellpadding="5">
<tr>
<th>#</th>
<th>ID</th>
<th>Datetime</th>
<th>Reading</th>
<th>Status</th>
<th>Gate</th>
</tr>
<tr>
<td>
<input name="checkbox[]" type="checkbox"
class="check-class" value="2">
<td>2</td>
<td>2014-12-03_18:24:52</td>
<td>0</td>
<td>Safe</td>
<td>Open</td>
<tr>
<td>
<input name="checkbox[]" type="checkbox"
class="check-class" value="3">
<td>3</td>
<td>2014-12-03_18:24:55</td>
<td>13443</td>
<td>Safe</td>
<td>Open</td>
<tr>
<td>
<input name="checkbox[]" type="checkbox"
class="check-class" value="4">
<td>4</td>
<td>2014-12-03_18:24:58</td>
<td>35656</td>
<td>Caution</td>
<td>Open</td>
<tr>
<td>
<input name="checkbox[]"
type="checkbox" class="check-class"
value="6">
<td>6</td>
<td>2014-12-03_18:25:04</td>
<td>57085</td>
<td>Danger</td>
<td>Closed</td>
<tr>
<td>
<input name="checkbox[]"
type="checkbox"
class="check-class" value="7">
<td>7</td>
<td>2014-12-03_18:25:07</td>
<td>28823</td>
<td>Caution</td>
<td>Open</td>
<tr>
<td>
<input name="checkbox[]"
type="checkbox"
class="check-class"
value="8">
<td>8</td>
<td>
2014-12-03_18:25:10</td>
<td>65535</td>
<td>Danger</td>
<td>Closed</td>
<!-- have a check all button and delete input -->
<tr valign="middle">
<td>
<input type="checkbox"
id="selectall" />Check
All</td>
<td align="center"
colspan="5">
<input name="delete"
type="submit"
id="delete"
value="Delete">
<a href="https://agent.electricimp.com/ABCDEFG?report=0">
Disable Database
Reporting</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?report=1">
Enable Database
Reporting</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?gate=0">
Override OFF
Barrier</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?gate=1">
Override ON
Barrier</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?lamp=0">
Override OFF
Lamp</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?lamp=1">
Override ON
Lamp</a>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</table>
</body>
</html>
Your main issue in the demo code is using parent() but the parent of your checkbox is a td not a table so you aren't reaching far enough up the DOM.
I suggest using closest() (as in code shown in question) instead
Try this:
$(function () {
$('#selectall').change(function () {
$(this).closest('table').find(':checkbox').prop('checked',this.checked);
});
});
See following API docs:
parent()
closest()
DEMO
I think this will do what you are wanting much easier.
$(document).ready(function(){
$("#selectall").on("change", function() {
$.event.trigger("mycheck", {checked: $(this).prop("checked")});
});
$(".check-class").on("mycheck", function(e, data) {
$(this).prop("checked", data.checked);
});
});
Using the jsfiddle here: http://jsfiddle.net/revxaisks/vw6oc4x6/2/
#Chris Caviness solved the problem. Firstly, check the revised javascript code.
Secondly, like I mentioned in the top post, use an older 1.8.3 script file, then just use the standard
$(document).ready(function(){
in order to wrap the script. Save it as SCRIPTNAME.js and then declare it in the HTML after the library declaration (important!)
My problem was I was using the newer 1.9.1 jQuery library which handled data differently.
Hope this helps.
i have implemented validation for fundtransfer in jsfiddle.
it works fine in jsfiddle but not working in localhost.
i am using wamp.
here is my jsfiddle link - http://jsfiddle.net/BzdfN/31/
but when i am implementing this in localhost.its not working.
my html code is
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="validate.js"></script>
<title> Infy Bank Fund Transfer Entry Page </title>
</head>
<body>
<table class="layout" border="0" width="90%" align="center">
<form name="addcust" method ="POST" action ="http://localhost:8080/myapp/jsp/AddCustomerJSP.jsp">
<td colspan="2">
<table border="0" width="70%" align="center">
<tr>
<td align="center" colspan="2">
<div class="heading2">Infy Bank</div>
</td>
</tr>
<tr>
<td align="center" colspan="2"><p class="heading3">Fund transfer</p></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>Payers account no<span class="mandatory">*</span></td>
<td><input type="text" name="text10" id="text10" size="25" />
<div width="100%" id="equal"></div>
</td>
</tr>
<!--<tr>
<td>Payees account no<span class="mandatory">*</span></td>
<td>
<input type="text" name="name" value=2008 maxlength="25">
</td>
</tr>
<tr>
<td>Amount<span class="mandatory">*</span></td><td><input type="text" Value=500 name="state" maxlength="25"></td>
</tr>
<tr>
<td>Description<span class="mandatory">*</span></td><td><input type="text" name="pin" value=self maxlength="6"></td>
</tr>
<tr>
<td><span class="mandatory">*mandatory field</span></td>
<td><input type="submit" name="AccSubmit" value="Submit" onClick="return validatebal();">
<input type="reset" name="res" value="Reset"></td>
</tr>-->
</form>
</table>
<p align="right">Home</p>
</body>
</html>
and my validate.js is
$("#text10").keyup(function(){
$("#text10").blur();
$("#text10").focus();
});
$("#text10").change(function(){
var name = $('#text10').val();
var numbers = /^[0-9]+$/;
var specialChars = "<>#!#$%^&*()_+[]{}?:;|'\"\\,./~`-=";
if (name == "" || name == " " )
{
$("#equal").show();
$("#equal a").html("please enter account number");
}
else if(name.match(numbers))
{
$("#equal").hide();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
}
else if(name.match(specialChars))
{
$("#equal").show();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
}
else
{
$("#equal").show();
$("#equal a").html("please check your account number correctly");
}
});
So guys can you what i am doing wrong.
please help
start your jQuery with:
$( document ).ready(function() {
.../ and end with:
});
maybe this will solve your problem
In jsfFiddle your code is executed on the onload event.
But with including validate.js in the head the content of the script is execute right at the place where you placed <script src="validate.js"></script>. So your jQuery selectors don't find any elements, because they are not in the DOM at the time the script is executed.
You have different possibilities.
Wrap the content of your validate.js into jQuery(function() { /*your code of validate.js **/ })
Another possibility is to place <script src="validate.js"></script> at the end of your document instead placing it in the head.
You can use delegated events like $(document).on("keyup","#text10", function() { /* .... */ }); that way it does not matter if #text10 is in the DOM at this time.
wrap your validate.js code in jQuery ready function as follows should solve the issue:
$(document).ready(function() {
// validate.js code
});
I have a table which i need to move elements up and down in. I have the code working, but as soon as I add a tag to it, it throws the error:
Error: this.visualElement is undefined
Source File: http://192.9.199.11:83/templates/admin/js/jquery/ui.checkbox.js
Line: 94
The HTML looks like this:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<th>Menu</th>
<td>Builds the main navigation menu panel</td>
<td width="80px">
<input type="hidden" class="hiddenData" name="" value="1" />
</td>
</tr>
<tr>
<th>Proudly Support</th>
<td>A widget which displays company's we proudly support</td>
<td width="80px">
<input type="hidden" class="hiddenData" name="" value="2" />
</td>
</tr>
</table>
And the jQuery is as follows:
$(".arrowButtons").live('click', function(e) {
e.preventDefault();
});
$(".upArrow").live('click', function(e) {
var element = $(this).parent().parent();
if(element.prev().html() != null)
{
var elementContents = element.html();
$("<tr>"+elementContents+"</tr>").insertBefore(element.prev());
element.remove();
}
});
Any idea on why that could be happening?
I just commented out the lines that were causing the problem in ui.checkbox.js and it is working. Will do proper testing, but so far everything seems to be working.