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>
Related
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 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'm trying to work this form so when the first radio button is selected, run a certain validation. When the second radio button is selected, run a different validation, etc. Currently using Alerts to check the functionality, but whichever radio button I choose I do not receive any feedback.
javascript function
<script type="text/javascript">
function validateDays() {
if (document.form1.radio1[0].checked == true) {
alert("You have selected Option 1");
}
else if (document.form1.radio1[1].checked == true) {
alert("You have selected Option 2");
}
else if (document.form1.radio1[2].checked == true) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
}
</script>
html input code
<input name="radio1" type="radio" value="option1" id="option1" onClick="validateDays();">
<input name="radio1" type="radio" value="option2" id="option2" onClick="validateDays();">
<input name="radio1" type="radio" value="option3" id="option3" onClick="validateDays();">
How do I get a different alert depending on which radio button is checked?
Eventually, each radio button will limit the number of checkboxes further down the form the user is able to select - which is why I cannot work this validation purely in to the onClick()
MORE FULL CODE - ON REQUEST
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery('#3daypass').click(function mattcode() {
jQuery('#other_2 , #other_3 , #other_4').prop('checked', true);
});
jQuery('#2daypass , #1daypass').click(function mattcode() {
jQuery('#other_2 , #other_3 , #other_4').prop('checked', false);
});
});
</script>
<script type="text/javascript">
function validateDays() {
if (document.getElementById('3daypass').checked) {
alert("You have selected Option 1");
}
else if (document.getElementById('2daypass').checked) {
alert("You have selected Option 2");
}
else if (document.getElementById('1daypass').checked) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
}
</script>
<tr>
<td colspan="5" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="65%" valign="top"><table width="100%" height="100%" border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td height="18" colspan="2" align="left" bgcolor="#000000"><span class="boxheader"><strong> Conference Pass</strong></span> <span class="bodycopyWhite"> - (Please select a day pass below)</span></td>
</tr>
<tr valign="middle">
<td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
</tr>
<tr bgcolor="#EBEBEB">
<td align="center" valign="top" bgcolor="#EBEBEB"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="7%"><input name="other_1" type="radio" value="3daypass" id="3daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td width="93%" class="bodyNormal"><strong>Three-day</strong> open delegate pass</td>
</tr>
<tr>
<td><input name="other_1" type="radio" value="2daypass" id="2daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td class="bodyNormal"><strong>Two-day</strong> open delegate pass</td>
</tr>
<tr>
<td><input name="other_1" type="radio" value="1daypass" id="1daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td class="bodyNormal"><strong>One-day</strong> open delegate pass</td>
</tr>
</table></td>
</tr>
<tr valign="middle">
<td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
</tr>
</table>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" colspan="2" bgcolor="#000000" class="boxheader"><strong> Please select the days you will be attending</strong></td>
</tr>
<tr>
<td width="9%" bgcolor="#EBEBEB"><input name="other_2" type="checkbox" id="other_2" value="Tues 5 Feb"></td>
<td width="91%" bgcolor="#EBEBEB" class="bodycopy">Tuesday 5 February 2013 </td>
</tr>
<tr>
<td bgcolor="#EBEBEB"><input name="other_3" type="checkbox" id="other_3" value="Wed 6 Feb"></td>
<td bgcolor="#EBEBEB" class="bodycopy">Wednesday 6 February 2013 </td>
</tr>
<tr>
<td bgcolor="#EBEBEB"><input name="other_4" type="checkbox" id="other_4" value="Thurs 7 Feb"></td>
<td bgcolor="#EBEBEB" class="bodycopy">Thursday 7 February 2013 </td>
</tr>
Apologies for the messy code - This was written in 2005 by someone else (with an apparent phobia of CSS) - see what I have to work with?!
function validateDays() {
if (document.getElementById("option1").checked == true) {
alert("You have selected Option 1");
}
else if (document.getElementById("option2").checked == true) {
alert("You have selected Option 2");
}
else if (document.getElementById("option3").checked == true) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
You need to use == or === for comparison. = assigns a new value.
Besides that, using == is pointless when dealing with booleans only. Just use if(foo) instead of if(foo == true).
You must use the equals operator not the assignment like
if(document.form1.radio1[0].checked == true) {
alert("You have selected Option 1");
}
Full validation example with javascript:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio button: full validation example with javascript</title>
<script>
function send() {
var genders = document.getElementsByName("gender");
if (genders[0].checked == true) {
alert("Your gender is male");
} else if (genders[1].checked == true) {
alert("Your gender is female");
} else {
// no checked
var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
document.getElementById('msg').innerHTML = msg;
return false;
}
return true;
}
function reset_msg() {
document.getElementById('msg').innerHTML = '';
}
</script>
</head>
<body>
<form action="" method="POST">
<label>Gender:</label>
<br />
<input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
<br />
<input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
<br />
<div id="msg"></div>
<input type="submit" value="send>>" onclick="return send();" />
</form>
</body>
</html>
Regards,
Fernando
I have a sign up form on my site which works OK in IE but does not work in Firefox or Chrome. I have tried looking through other forum posts here with similar problems but still can't get my head round this silly problem. (I am not a code writer).
Here is the code
<script type="text/JavaScript">
function validate_form(){
{validation_text}
else{
return true;
}
}
var str_vars = '';
function all_fields(){
str_vars = '';
el = document.form1;
for (var i = 0; i < el.elements.length; i++) {
if (el.elements[i].value != '')
str_vars += el.elements[i].name+'='+el.elements[i].value+'&';
}
str_vars = str_vars.substr(0,str_vars.length-15);;
}
</script>
<div id="div_form" name="div_form">
<form id="form1" name="formx" method="{send_method}" action="{form_switch}">
<p> </p>
<table border="0" width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
{error}
{signup_list}
<tr>
<td align="right">{description_country} </td>
<td>{shiping_country_list}{required_country}</td>
</tr>
<tr><td align="right"> {promo}</td></tr>
{code_signup}
<tr>
<td colspan="2"><div align="center">
<input name="terms" id="terms" value="1" type="checkbox">
<label for="terms">I accept the terms & conditions</label>
</div></td>
</tr>
<tr>
<td colspan="2"><div align="center">
{captcha}</td>
</tr>
{arp_fields}
<tr>
<td><div align="right">*</div><br></td>
<td width="332">Denotes required</td>
</tr>
<tr>
<td>
<div align="right">
<input name="Submit" value="Submit" type="button" onclick="{request}{request_email}{form2items}">
</div></td>
<td> <br></td>
</tr>
</table>
</form>
</div>
</div>
Any help would be appreciated.
Maybe instead of
el = document.form1;
try
el = document.getElementById('form1');
I can't see all the JS so it is hard to guess, but one other thing to try is to change the name of the submit button from name="Submit" to something else like name="submitForm". If form.submit() is getting called somewhere in the script this can cause problems.
Your validate function should look something like this:
function validate_form(){
var form = document.getElementById('form1');
err = 'The following fields are not correct filled:\n';
if (form.first_name.value == ''){
err += 'No First Name.\n';
}
if (emailCheck(form.email.value) == false){
err += 'No Valid email.\n';
}
if (form.terms.checked != true){
err += 'You did not agree with the terms.\n';
}
if (err != 'The following fields are not correct filled:\n'){
alert (err);
return false;
}
else{
return true;
}
}
Lastly, change your submit button to this:
<input name="Submit" value="Submit" type="button" onclick="if (validate_form()) document.getElementById('form1').submit();">
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.