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
});
Related
Hi I am developing wordpress website using php, I want to do 4 steps for single php file.If the condition is satisfied it will go to the next page.
function checketudesandformations() {
var x = document.getElementById("myTable").rows.length;
if (x < 3) {
alert("Please Select atleast 2 documents'");
document.location.reload(true);
return false;
} else {
//return true;
}
If above the conditions is satisfied then only below the jquery want fire but i am getting button fire the condition is not satisfied. So please help me any one
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#suivantsteps2").click(function(e) {
e.preventDefault();
jQuery("#candidaturetabform2").css("display", "none");
jQuery("#candidaturetabform3").css("page-break-before", "always");
jQuery("#candidaturetabform3").css("display", "block");
jQuery("#step03").addClass("active")
jQuery("#step02").removeClass("active")
return false;
});
});
</script>
Below my HTML code
<form name="etudesandformations" id="etudesandformations" method="post"
enctype="multipart/form-data" action="#" style="margin-top: 40px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<tr>
<td>
<input name="inesv6" type="hidden" value="">
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="50%" align="right">
<input class="saisie1 input" name="precedent" id="precedent" type="submit" value="Précédent" onClick="" tabindex="5">
</td>
<td align="left">
<input class="saisie1 input" name="suivantsteps" id="suivantsteps2" type="submit" value="Suivant" onClick="checketudesandformations()" tabindex="4">
</td>
</tr>
</td>
</tr>
</table>
I did not understand question properly, but u need to rectify your code first. Use single event handler for onclick event as below. If you need more help please create atleast minimum working fiddle of your code.
<script type="text/javascript">
function checketudesandformations() {
var x = document.getElementById("myTable").rows.length;
if (x < 3) {
alert("Please Select atleast 2 documents'");
document.location.reload(true);
} else {
jQuery("#candidaturetabform2").css("display", "none");
jQuery("#candidaturetabform3").css("page-break-before", "always");
jQuery("#candidaturetabform3").css("display", "block");
jQuery("#step03").addClass("active")
jQuery("#step02").removeClass("active")
}
</script>
In this Fiddle I have made script that should show the form if the checkbox is checked but I can't make it work. It says that the function is unknown variable.
Html
<input type="checkbox" id="_My.notFinal" onclick='toggleCheckbox();'>
<label>
<b>Buying for someone else.</b>
</label>
<span id="LicenseCustomer" style="display:none">/*some form*/</span>
And javascript
function toggleCheckbox() {
var lfckv = document.getElementById("_My.notFinal").checked;
if (lfckv) {
document.getElementById("LicenseCustomer").style.display = "block";
} else {
document.getElementById("LicenseCustomer").style.display = "none";
}
}
https://jsfiddle.net/00gckvxw/1/
Here it is the corrected version https://jsfiddle.net/00gckvxw/24/.
document.getElementById("_My.notFinal").onclick = toggleCheckbox;
It has to do with when the events are attached. check this out: testing a function in jsfiddle.
I also changed the span to div and class attribute to id. I wouldn't recommend using <tr> inside a <div> or <span>, better use id on <tr> directly or use <tbody> if you have multiple lines.
I think you missed out to include the Javascript file in your in html, because it is not able to find the function toggleCheckbox on click of checkbox. Also
Also span element has class = 'LicenseCustomer', change this to id='LicenseCustomer'
try including inline script
<script>
function toggleCheckbox() {
var lfckv = document.getElementById("_My.notFinal").checked;
console.log(lfckv);
if (lfckv) {
document.getElementById("LicenseCustomer").style.display = "block";
} else {
document.getElementById("LicenseCustomer").style.display = "none";
}
}
</script>
<input type="checkbox" id="_My.notFinal" onclick='toggleCheckbox();'>
<label><b>Buying for someone else.</b>
<label>
<span id="LicenseCustomer" style="display:none">
<tr valign=middle>
<td class="bodycopy" align=right width=160><b>License Contact:</b> </td>
<td class="smallcopy" nowrap><input name="_My.LicenseContact" type="text" class="inputBox" size="32" _label="<br>License Contact"></td>
</tr>
<tr valign=middle>
<td class="bodycopy" align=right><b> License E-mail Address:</b> </td>
<td class="smallcopy" nowrap><input name="_My.LicenseEmail" type="text" class="inputBox" size="32" _label="<br> License E-mail Address"></td>
</tr>
<tr valign=middle>
<td class="bodycopy" align=right><b> License Phone:</b> </td>
<td class="smallcopy" nowrap><input name="_My.LicensePhone" type="text" class="inputBox" size="32" _label="<br> License Phone"></td>
</tr>
</span>
corrected version:
http://pastebin.com/RrMD78AG
Few mistakes i want to tell you:-
first you are using class="LicenseCustomer" and you are using document.getElementById selector (it cannot get element with class name).
second you are using onclick="toggleCheckbox();", when you calling function you does not have to use 'semicolon' at the end of a function name (its an incorrect syntax) - onclick="toggleCheckbox()" (no semicolon).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="checkbox" id="_My.notFinal" class='checkbox'>
<label><b>Buying for someone else.</b>
</label>
<span class="LicenseCustomer" style="display:none">
<tr valign=middle>
<td class="bodycopy" align=right width=160><b>License Contact:</b> </td>
<td class="smallcopy" nowrap><input name="_My.LicenseContact" type="text" class="inputBox" size="32" _label="<br>License Contact"></td>
</tr>
<tr valign=middle>
<td class="bodycopy" align=right><b> License E-mail Address:</b> </td>
<td class="smallcopy" nowrap><input name="_My.LicenseEmail" type="text" class="inputBox" size="32" _label="<br> License E-mail Address"></td>
</tr>
<tr valign=middle>
<td class="bodycopy" align=right><b> License Phone:</b> </td>
<td class="smallcopy" nowrap><input name="_My.LicensePhone" type="text" class="inputBox" size="32" _label="<br> License Phone"></td>
</tr>
</span>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</body>
</html>
Below is the Javascript
$(document).ready(function()
{
$(".checkbox").change(function() {
if(this.checked)
{
$(".LicenseCustomer").css('display','block');
}
else
{
$(".LicenseCustomer").css('display','none');
}
})
});
Demo : https://jsbin.com/bowicivupa/edit?html,js,console,output
Try to something like this.
function toggleCheckbox(){
var lfckv = document.getElementById('myCheck').checked;
if(lfckv){
document.getElementsByTagName("span")[0].setAttribute("style", "display:none");
} else {
document.getElementsByTagName("span")[0].setAttribute("style", "display:block");
}
}
Is it possible to stop one javascript file from executing from a different javascript file?
Eg.
HTML
<!doctype html>
<html>
<head>
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<!-- Javascript -->
<script src="checkout.js"></script>
<script src="dummy.js"></script>
</head>
<body>
Pickup Date: <input type="text" maxlength="10" name="Orders.Custom_Field_PickupDate" value="">
<br />
Return Date: <input type="text" maxlength="10" name="Orders.Custom_Field_ReturnDate" value="">
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#EEEEEE" id="table_checkout_cart0">
<tr>
<td align="left">
<br>
</td>
</tr>
<tr>
<td> <span id="span_Shopping_Cart_UnEditable">
<table border="0" cellpadding="10" cellspacing="1" id="v65-onepage-CartSummary">
<tr>
<td>
<table id="v65-onepage-ordersummary-items" border=0 cellpadding=2 cellspacing=1 width="580"><tr id="v65-onepage-ordersummary-header-row">
<td class="v65-onepage-ordersummary-itemcode v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Code
</td>
<td class="v65-onepage-ordersummary-itemname v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Name
</td>
<td class="v65-onepage-ordersummary-itemprice v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Price
</td>
<td class="v65-onepage-ordersummary-itemqty v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Qty
</td>
<td class="v65-onepage-ordersummary-itemtotal v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Total
</td>
</tr>
<tr>
<td class="v65-onepage-ordersummary-itemcode" style="color:#666666">
K10306
</td>
<td class="v65-onepage-ordersummary-itemname" style="color:#666666">
MYT Works 4ft Large Slider Kit
</td><td class="v65-onepage-ordersummary-itemprice" style="color:#666666">
$160.00
<br />
exc Tax
</td>
<td class="v65-onepage-ordersummary-itemqty" style="color:#666666">
1
</td>
<td class="v65-onepage-ordersummary-itemtotal" style="color:#666666">
$160.00
<br />10% Tax = $16.00
</td>
</tr>
<tr>
<td class="v65-onepage-ordersummary-itemcode" style="color:#666666">
C10881
</td>
<td class="v65-onepage-ordersummary-itemname" style="color:#666666">
Apurture V-Control USB Remote Focus
</td>
<td class="v65-onepage-ordersummary-itemprice" style="color:#666666">
$18.00
<br />
exc Tax
</td>
<td class="v65-onepage-ordersummary-itemqty" style="color:#666666">
1
</td>
<td class="v65-onepage-ordersummary-itemtotal" style="color:#666666">
$18.00
<br />
10% Tax = $1.80
</td>
</tr>
</table>
<div id="IncompletePickupDate-Dialog" title="Incomplete Pickup Date">Please enter pickup date.</div>
<div id="IncompleteReturnDate-Dialog" title="Incomplete Return Date">Please enter return date.</div>
<br />
<input type="button" value="Place Order" id="btnSubmitOrder">
<br />
</body>
</html>
JS 01 - checkout.js
function checkItems() {
var returnValue = 0;
$('#v65-onepage-ordersummary-items tr').each(function() {
$this = $(this);
var code = $.trim($this.find(".v65-onepage-ordersummary-itemcode").html());
if ( code.charAt(0) == 'K' ) {
returnValue = 1;
return false;
}
});
return returnValue;
}
$(function() {
$('input[name="Orders.Custom_Field_PickupDate"]').datepicker({
dateFormat:'dd/mm/yy', showButtonPanel: true
});
$('input[name="Orders.Custom_Field_ReturnDate"]').datepicker({
dateFormat:'dd/mm/yy', showButtonPanel: true
});
$( "#IncompletePickupDate-Dialog").dialog({
autoOpen: false,
});
$( "#IncompleteReturnDate-Dialog").dialog({
autoOpen: false,
});
$( "#btnSubmitOrder" ).click(function(e) {
var pickupDate = $('input[name="Orders.Custom_Field_PickupDate"]').val().length;
var returnDate = $('input[name="Orders.Custom_Field_ReturnDate"]').val().length;
if (checkItems()) {
if (pickupDate == 0) {
e.preventDefault();
$( "#IncompletePickupDate-Dialog" ).dialog( "open" );
}
else if (returnDate == 0) {
e.preventDefault();
$( "#IncompleteReturnDate-Dialog" ).dialog( "open" );
}
}
if ((pickupDate !=0 && returnDate != 0) || checkItems() == 0) {
// TODO: Direct to Complete.html which displays just text saying Done.
}
console.log(checkItems());
});
});
JS 02 - dummy.js
$(function() {
$( "#btnSubmitOrder" ).click(function(e) {
window.location.replace("http://www.google.com");
});
});
What I want to do is, if pickupDate or returnDate is equal to zero (code in checkout.js), I want to stop all javascript files from running, and I don't want dummy.js to execute. If pickupDate and returnDate are not equal to 0, then I want to continue with the execution.
I am trying to help a friend during my uni break on his website. I can't combine the two files because the software is proprietary software, and there are a lot of limitations. I can't edit their code because it is hard coded, but I can upload html, css, javascript or jQuery files.
On his website he sells and rents products - all rental products start with the letter "K", and all sale products start with something else. On his checkout page he currently has to enter a pickup date and return date for sale and rental products, but he only wants users to enter pickup or return date for rental products.
The code I wrote above only executes when the "btnSubmitOrder" is clicked, and currently there is default functionality for this button, which I do not have access to.
So to achieve this, I thought about putting a javascript file above the default functionality, and attempt what I want to do.
Note: Files above are just some testing I'm doing locally, the real files are too large to paste here.
If this does not make sense, or more info is required please let me know.
Thanks in advance.
I am trying to create a dynamic form where you can order something.
In basic form, we have one row, but if you want to order more things we can dynamically without reloading the page, add the new row. So far everything is working properly for me, but in this form we have two dropdown ("input select") lists. These drop-down lists are dependent on each other and do not know how to load them the relationship between them and the option of choice. I have tried many different examples from the internet, but always work correctly only the first default row. Dynamically created rows are no longer dependent on one another.
If I am doing something wrong, and you know a better way, please show me this way.
I ask you for help, because I really depend on that. Thank you in advance. ;)
Update
Hmm .. Now I understand, but I do not know much how to use it in my web page code. Will show you the web page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br>
<html><br>
<head><br>
<title>Dynamic forms</title><br>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/jquery.validate.js"></script><br>
<script language="javascript" src="chainedselects.js"></script><br>
<script language="javascript" src="exampleconfig2.js"></script><br>
</head>
<body onload="initListGroup('vehicles', document.formm.elements['group[]'], document.formm.elements['product[]'], 'cs')">
<script type="text/javascript">
$(document).ready(function(){
var i = 2;
var templateRow = jQuery.format($("#template").val());
function addRow() {
var ii = i++;
$(templateRow(ii)).appendTo("#listProducts tbody");
$("#removeProduct_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
$("#addProduct").click(addRow);
});
</script>
<!-- Template row in the table -->
<textarea id="template" style="display:none;" cols="1" rows="1">
<tr id="row_{0}" valign="top">
<td>{0}.</td>
<td><select name="group[]" style="width: 100%;"></select></td>
<td><select name="product[]" style="width: 100%;"></select></td>
<td><input type="text" name="price[]" style="width: 100px;"></td>
<td><input type="text" name="quantity[]" style="width: 97%;"></td>
<td><img src="remove.png" id="removeProduct_{0}" alt="remove"></td>
</tr>
</textarea>
<!-- This summary table -->
<form name="formm" action="parser.php" method="post">
<table id="listProducts" name="list">
<thead>
<tr>
<th>Nr</th>
<th>Group</th>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>+/-</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3" align="left">
<input type="submit" name="send" value="Send" style="width: 100px;">
</th>
</tr>
</tfoot>
<tbody>
<tr valign="top">
<td>1.</td>
<td><select name="group[]" style="width: 100%;"></select></td>
<td><select name="product[]" style="width: 100%;"></select></td>
<td><input type="text" name="price[]" style="width: 100px;"></td>
<td><input type="text" name="quantity[]" style="width: 97%;"></td>
<td><img src="add.png" id="addProduct" alt="add"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
This is a parser.php:
<?php
$data = array();
$data['Groups'] = $_POST['group'];
$data['Products'] = $_POST['product'];
$data['Prices'] = $_POST['price'];
$data['Quantity'] = $_POST['quantity'];
$result = print_r($data,true);
echo "<pre>$result</pre>";
?>
Here is link to all code.
The click events are not attached to the newly created rows, so you need to make sure that any new rows, after they are created have click events attached to them.
function dependantFunction() {
/* code */
}
function addNewRow() {
var a=document.createElement("div");
var b=document.createElement("img");
b.src="images/add.png";
b.addEventListener("click", dependantFunction, false);
a.appendChild(b);
document.getElementById("rowholder").append(a);
}
Then all new rows should have all the necessary events attached to them.
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.