How can I assign these functions submit() and click() to a variable. So that I can use them in an if statement like this:
function sendToCheckout() {
$(document).ajaxComplete(function(){
if($("form[action='/cart']").length == 1){
var x = submit();
}
else {
var x = click();
}
$("form[action='/cart']").off().x(function(event){
event.preventDefault(event);
var amountToSend = sessionStorage.getItem('amountToSend');
if(amountToSend != null && amountToSend != "0"){
sendData();
}
else{
window.location.href = shopAddress + "/checkout";
}
});
});
}
With the above code I got the error Uncaught ReferenceError: submit is not defined
These functions are also the names of events, so you can work with them that way.
Assign the event name as a string, then use .on(), which takes the event name as a parameter.
You also shouldn't have multiple var x declarations. Declare it before the if, then assign it in it.
function sendToCheckout() {
$(document).ajaxComplete(function() {
var x;
if ($("form[action='/cart']").length == 1) {
x = "submit";
} else {
x = "click";
}
$("form[action='/cart']").off().on(x, function(event) {
event.preventDefault(event);
var amountToSend = sessionStorage.getItem('amountToSend');
if (amountToSend != null && amountToSend != "0") {
sendData();
} else {
window.location.href = shopAddress + "/checkout";
}
});
});
}
Related
I want to call a function only when the form is valid. Validation works correctly, but I can not correctly call the addUser () function. The test worked, but it's looped, the next time it's called, the test is done twice, the next 5 times. There can be several telephones.
// code
if (lastName.value.match(letters)) {
for(var i = 0; i < phones.length; i++){
if (!phones[i].value.match(digts)) {
//checking
if(phones[phones.length - 1].value != '') {
addUser();
};
error.innerHTML = 'Only digits';
frm.insertBefore(error, phones[i]);
break;
}
}
} else {
if(user.value == ''){
//code
}
errorMessage = "false";
}
if (errorMessage !== "") {
event.preventDefault();
}
}
----------
function addUser(){
$('#registration').submit(function(event) {
alert(12);
//code
event.preventDefault();
var data = 'phones=' + JSON.stringify(arrUserInfo);
$.ajax({
//code
});
});
}
You can add validations in another function and return true or false depending on validation result,and call that function on form submit.
function validations()
{
....
for(var i = 0; i < phones.length; i++){
if (!phones[i].value.match(digts)) {
// set error message
return false;
}
}
if(user.value == ''){
// set error message
return false;
}
return true;
}
$('#registration').submit(function(event) {
if(validations())
{
$.ajax({
// code
});
}
else
{
return false;
}
});
I know there is a much cleanlier way to write this than multiple if statements but when I try to combine them my validation stops working! This isn't good practice right? Or in this case is two different if statements okay?
My code:
function validateForm() {
var success = true;
var x = document.forms["contestForm"]["firstName"].value;
if (x == null || x == "") {
addClass($('#firstNamespan'), 'formError');
removeClass($('.validationError'), 'is-hidden');
success = false;
} else {
removeClass($('#firstNamespan'), 'formError');
addClass($('.validationError'), 'is-hidden');
}
var x = document.forms["contestForm"]["lastName"].value;
if (x == null || x == "") {
addClass($('#lastNamespan'), 'formError');
removeClass($('.validationError'), 'is-hidden');
success = false;
} else {
removeClass($('#lastNamespan'), 'formError');
}
return success;
}
My attempt to combine:
function validateForm() {
var success = true;
var x = document.forms["contestForm"]["firstName", "lastName"].value;
if (x == null || x == "") {
addClass($('#firstNamespan', '#lastNamespan'), 'formError');
removeClass($('.validationError'), 'is-hidden');
success = false;
} else {
removeClass($('#firstNamespan', '#lastNamespan'), 'formError');
}
return success;
}
So what am I doing wrong? I also will need to add a birthday and e-mail validation but I wanted to get this cleaned up first before it became a monster of if else statements! Sorry for the extra non-helpful information its making me write more because I have to much code. Please feel free to edit and delete this once its posted.
Combine them by functional programming:
function validateForm() {
var x = document.forms["contestForm"]["firstName"].value;
//calls the function checkObject with the object x and the id
var success1 = checkObject(x, '#firstNamespan');
//the result of success1 is either true or false.
var x = document.forms["contestForm"]["lastName"].value;
//calls the function checkObject with the object x and the id
var success2 = checkObject(x, '#lastNamespan');
//the result of success2 is either true or false.
//returns true if both success1 and success2 are true, otherwise returns false.
return success1 && success2;
}
function checkObject(x, id)
{
if (x == null || x == "") {
addClass($(id), 'formError');
removeClass($('.validationError'), 'is-hidden');
return false;
} else {
removeClass($(id), 'formError');
return true;
}
}
Which could then be condensed into
function validateForm() {
return checkObject($('form[name="frmSave"] #firstName').val(), '#firstNamespan') && checkObject($('form[name="frmSave"] #lastName').val(), '#lastNamespan');
}
function checkObject(x, id)
{
if (x == null || x == "") {
addClass($(id), 'formError');
removeClass($('.validationError'), 'is-hidden');
return false;
} else {
removeClass($(id), 'formError');
return true;
}
}
Answer for N number of fields with your pattern of naming
function validateForm() {
var itemsToValidate = ["#firstName", "#lastName", "#birthday", "#email"];
var results = [];
$.map( itemsToValidate, function( val, i ) {
results.push(checkObject($('form[name="frmSave"] ' + val).val(), val + 'span'));
});
for(var i=0; i<results.length; i++)
{
if(results[i] == false)
return false;
}
return true;
}
function checkObject(x, id)
{
if (x == null || x == "") {
addClass($(id), 'formError');
removeClass($('.validationError'), 'is-hidden');
return false;
} else {
removeClass($(id), 'formError');
return true;
}
}
Note: I didn't validate any of the JavaScript above please call me out if i made a mistake. I just typed this up in notepad as i'm out the door at work
Break things up into functions and utilize an array to loop through the fields to validate.
function isValidField(fieldName) {
var value = document.forms["contestForm"][fieldName].value;
return !(value == null || value == "");
}
function displayFieldError(fieldName) {
addClass($('#' + fieldName + 'span'), 'formError');
removeClass($('.validationError'), 'is-hidden');
}
var fields = ['firstName', 'lastName'];
var isValidForm = true;
fields.map(function(fieldName) {
if (!isValidField(fieldName)) {
displayFieldError(fieldName);
isValidForm = false;
}
});
if (isValidForm) {
// Form is correct, do something.
}
By giving them a seperate identifier like this
var x = document.forms["contestForm"]["firstName"].value;
var y = document.forms["contestForm"]["lastName"].value;
if ((x == null || x == "") && (y == null || y == "")) {
addClass($('#firstNamespan'), 'formError');
removeClass($('.validationError'), 'is-hidden');
addClass($('#lastNamespan'), 'formError');
removeClass($('.validationError'), 'is-hidden');
success = false;
} else {
removeClass($('#firstNamespan'), 'formError');
addClass($('.validationError'), 'is-hidden');
removeClass($('#lastNamespan'), 'formError');
}
But you need to be more precise about, what would you do with just addClass? That won't work. You need have a JS object before this method call.
I think, you want some element there before the addClass and removeClass. Or they need to be like this
$('#firstNamespan').removeClass('formError');
Like this, you need to change your code. So that the object comes first and then the method call.
Make it a function,
function validateForm(formName) {
var x = document.forms["contestForm"][formName].value;
if (x == null || x == "") {
addClass($('#' + formName + 'span'), 'formError');
removeClass($('.validationError'), 'is-hidden');
return false;
}
removeClass($('#' + formName + 'span'), 'formError');
addClass($('.validationError'), 'is-hidden');
return true;
}
then you can call it twice,
function validateForm() {
var success = validateForm('firstName');
if (success) {
success = validateForm('lastName');
}
return success;
}
The two ifs are checking two different form elements, and showing and hiding two different validation error elements.
Combining them will not be just a code refactor but also change functionality.
The only thing they have in common are that they both use the same variable 'x'.
i am getting a strange error
Error: TypeError: Value not an object.
Source File: /Scripts/jquery-1.8.3.js
Line: 4
while i am trying to do a .split() with javascript.
Following is the snippet :
$("#item_qty_1").on("keydown", function (event) {
if (event.which == 13) {
var weight_code = $("#weight_code").val();
var qty = Number($(this).val());
if((weight_code == "2" || weight_code == "3") && qty <= 50)
{
var qty_sub_val = document.getElementById('item_qty_sub').value;
var qty_sub = "";
console.log(typeof qty_sub_val);
if(qty_sub_val != "" && qty_sub_val !== null)
{
qty_sub = qty_sub_val.split(',');
}
$("#test").html(qty_sub);
for(var i=1; i<=50; i++)
{
if(i>qty)
{
$("#qty_" + i).attr("tabindex","-1").attr("readonly","readonly").removeAttr("last").css("background","#e6e6e6");
}
else
{
if(qty_sub_val != "")
{
$("#qty_" + i).attr("tabindex",i).removeAttr("readonly").removeAttr("last").css("background","white").val(qty_sub[i-1]);
}
else
{
$("#qty_" + i).attr("tabindex",i).removeAttr("readonly").removeAttr("last").css("background","white");
}
}
}
$("#qty_" + qty).attr("last","0");
$("#unit1_list").modal();
}
event.preventDefault();
return false;
}
});
it is giving error only when qty_sub_val != ""; i.e. when .split(',') is called.
Please check what $("#item_qty_sub") returns. I think it is not returning the right value.
At the url http://www.candyundies.com/template_non_product.php, I am using an autocomplete script on the search box for suggestions. I have tested and is working in current versions of Chrome, Safari, Opera, Firefox and IE 8. However, I noticed in IE 8, it is throwing an Object expected error after the first letter is typed in the search box but the script continues to work flawlessly. I'm sure it is a syntax error or something small I have overlooked but I cannot seem to find the problem. Any help would be much appreciated.
Contents of autocomplete.js:
// global variables
var acListTotal = 0;
var acListCurrent = -1;
var acDelay = 100;
var acURL = null;
var acSearchId = null;
var acResultsId = null;
var acSearchField = null;
var acResultsDiv = null;
function setAutoComplete(field_id, results_id, get_url) {
// initialize vars
acSearchId = "#" + field_id;
acResultsId = "#" + results_id;
acURL = get_url;
// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');
// register mostly used vars
acSearchField = $(acSearchId);
acResultsDiv = $(acResultsId);
// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 100) });
// on key up listener
acSearchField.keyup(function (e) {
// get keyCode (window.event is for IE)
var keyCode = e.keyCode || window.event.keyCode;
var lastVal = acSearchField.val();
// check an treat up and down arrows
if(updownArrow(keyCode)){
return;
}
// check for an ENTER or ESC
if(keyCode == 13 || keyCode == 27){
clearAutoComplete();
return;
}
// if is text, call with delay
setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}
// treat the auto-complete action (delayed function)
function autoComplete(lastValue) {
// get the field value
var part = acSearchField.val();
// if it's empty clear the resuts box and return
if(part == ''){
clearAutoComplete();
return;
}
// if it's equal the value from the time of the call, allow
if(lastValue != part){
return;
}
// get remote data as JSON
$.getJSON(acURL + part, function(json){
// get the total of results
var ansLength = acListTotal = json.length;
// if there are results populate the results div
if(ansLength > 0){
var newData = '';
// create a div for each result
for(i=0; i < ansLength; i++) {
newData += '<div class="unselected">' + json[i] + '</div>';
}
// update the results div
acResultsDiv.html(newData);
acResultsDiv.css("display","block");
// for all divs in results
var divs = $(acResultsId + " > div");
// on mouse over clean previous selected and set a new one
divs.mouseover( function() {
divs.each(function(){ this.className = "unselected"; });
this.className = "selected";
});
// on click copy the result text to the search field and hide
divs.click( function() {
acSearchField.val(this.childNodes[0].nodeValue);
clearAutoComplete();
});
} else {
clearAutoComplete();
}
});
}
// clear auto complete box
function clearAutoComplete() {
acResultsDiv.html('');
acResultsDiv.css("display","none");
}
// treat up and down key strokes defining the next selected element
function updownArrow(keyCode) {
if(keyCode == 40 || keyCode == 38){
if(keyCode == 38){ // keyUp
if(acListCurrent == 0 || acListCurrent == -1){
acListCurrent = acListTotal-1;
}else{
acListCurrent--;
}
} else { // keyDown
if(acListCurrent == acListTotal-1){
acListCurrent = 0;
}else {
acListCurrent++;
}
}
// loop through each result div applying the correct style
acResultsDiv.children().each(function(i){
if(i == acListCurrent){
acSearchField.val(this.childNodes[0].nodeValue);
this.className = "selected";
} else {
this.className = "unselected";
}
});
return true;
} else {
// reset
acListCurrent = -1;
return false;
}
}
Issue resolved. See comment by ocanal.
I got my keyboard working in a simple way:
rightPressed = false;
onKeyDown = function(pressEvent) {
if (pressEvent.keyCode == 39) rightPressed = true;
}
onKeyUp = function(pressEvent) {
if (pressEvent.keyCode == 39) rightPressed = false;
}
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);
And it worked. Then i tried to put it all in a class:
function Tkeyboard(){
this.rightPressed = false;
this.onKeyDown = function(pressEvent) {
if (pressEvent.keyCode == 39) { this.rightPressed = true; alert("boom!"); }
}
this.onKeyUp = function(pressEvent) {
if (pressEvent.keyCode == 39) { this.rightPressed = false; }
}
$(document).keydown(this.onKeyDown);
$(document).keyup(this.onKeyUp);
}
In initialization I created an object:
keys = new Tkeyboard;
In main loop i put action:
if ( keys.rightPressed ) { rx+=1;}
And now it fails. The interesting part of the problem is that alert("boom!") is called, so variable should get modified too...
I would be grateful for any ideas.
The keydown/up callback loses its original scope when the it is actually run. You'll need to bind the callback to this. In the Prototype Framework, you would do this:
function Tkeyboard() {
this.rightPressed = false;
$(document).keydown(this.onKeyDown.bind(this));
$(document).keyup(this.onKeyUp.bind(this));
}
Tkeyboard.prototype.onKeyDown = function(pressEvent) {
if (pressEvent.keyCode == 39) { this.rightPressed = true; alert("boom!"); }
};
Tkeyboard.prototype.onKeyUp = function(pressEvent) {
if (pressEvent.keyCode == 39) { this.rightPressed = false; }
};
It should be similar in jQuery.
If you need an idea of how to build a full fledged keyboard class, check out the one I wrote.
In an event handler in jQuery (and in DOM events), this refers to the element the event is subscribed on (document in the sample). Use a closure if you want to refer to the original object.
function Tkeyboard(){
var self = this;
this.rightPressed = false;
this.onKeyDown = function(pressEvent) {
if (pressEvent.keyCode == 39) { self.rightPressed = true; alert("boom!"); }
}
this.onKeyUp = function(pressEvent) {
if (pressEvent.keyCode == 39) { self.rightPressed = false; }
}
$(document).keydown(this.onKeyDown);
$(document).keyup(this.onKeyUp);
}
this is set to the DOM element (in this case document) from which the event handler is called. In general, this is not bound to the object in javascript:
var a = {
f: function () {}
};
var b = { f: a.f};
var f = a.f;
a.f(); // this === a
b.f(); // this === b
f(); // this === window
One commonly used workaround is to bind this to a wrapper function:
function bind(func, that) {
return function() {
func.apply(that, arguments);
}
}
//...
$(document).keydown(bind(this.onKeyDown, this));
Or you could use closures:
function Tkeyboard() {
var that = this;
// use 'that' from here on
you can initiate new function it will work
function Tkeyboard() {
this.rightPressed = false;
this.onKeyDown = function (pressEvent) {
if (pressEvent.keyCode == 39) {
this.rightPressed = true;
console.log(this.rightPressed )
alert('boom')
}
}
this.onKeyUp = function (pressEvent) {
if (pressEvent.keyCode == 39) {
this.rightPressed = false;
console.log(this.rightPressed )
}
}
this.events = function(){
document.addEventListener('keydown', this.onKeyDown);
document.addEventListener('keyup', this.onKeyUp);
}
}
const keys = new Tkeyboard;
keys.events();