Getting the error ',' expected in JQuery click Function? - javascript

I am trying to write a jquery function on button click nut it's showing an error ',' expected.
------Code-------
$("#submit").click(funtion(){
if ($("#totalizerform").valid())
{
return true;
}
else
{
return false;
}
});

please give this a go:
$("#submit").on("click", function() {
if ($("#totalizerform").valid()) {
return true;
} else {
return false;
}
});

Related

HTML Function Edit

The function I have only responded to a button click but not the image click. Can anyone tell me what would I need to modify in the function so that it responds to both button & image clicks?
function clickMe(a,b) {
$("#q"+b+" input[type='button']").click(function(event) {
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
if(b !== $(".qc").length) {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250);
});
} else {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250, function() {
loading(0);
});
});
}
});
}
You are probably expecting this $("#q"+b+" input[type='button'], #q"+b+" input[type='image']")
function clickMe(a,b) {
$("#q"+b+" input[type='button'], #q"+b+" input[type='image']").click(function(event) {
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
if(b !== $(".qc").length) {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250);
});
} else {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250, function() {
loading(0);
});
});
}
});
}
I hope this solves your problem. If not then no worries :) just update/add your html in the test case bellow:
https://codebrace.com/editor/b02f036fa

jQuery callback not working properly

I have the following code and the callback doesn't seem to work properly. My understanding is that if the username is undefined or blank then the #username-error div should show and the error class should be added to the get added to the username input. Only once all of that is done should the alert get fired. However, when I look in my browser, the error div does not show, and the alert gets triggered. So clearly the class 'error' is getting added, and therefore it's reasonable to suggest that the #username-error div is having the .show() function called upon it but it sure does't look like it. Any help you can give me getting the alert to fire only once the #username-error div has appeared would be greatly appreciated.
<script type="text/javascript">
$(document).ready(function() {
$("input[name='username']").bind("blur", function() {
validateUsername(myFunction);
});
$("input[type='submit']").bind("click", function() {
validateUsername(myFunction);
});
$("#username-error").hide();
$("#username-success").hide();
});
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
}
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
callback();
}
}
</script>
You need to add a return the button click
$("input[type='submit']").bind("click", function() {
return validateUsername(myFunction);
});
and you should return true
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
return true;
}
and add return in the validate method
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
return callback();
}
}
but the use of the callback in this really does not make much sense.

Checking if an image is present within <ul> tag

I am checking on clicking a button that image is present within an <ul> tag or not. For that I am using this function :
function check_image_exists(){
$('ul#show_uploaded_images').each(function() {
if ($(this).find('img').length) {
return true;
}else{
return false;
}
});
}
Now if I put this thing within the clicking function it is working...
function insert_product(){
$('ul#show_uploaded_images').each(function() {
if ($(this).find('img').length) {
alert("Image found");
}else{
alert("Not found");
}
});
}
But if I separate the two and try to use only the return value to decide my condition then it is not working. :
function check_image_exists(){
$('ul#show_uploaded_images').each(function() {
if ($(this).find('img').length) {
return true;
}else{
return false;
}
});
}
function insert_product(){
var image_exist = check_image_exists();
if(image_exist == false){
alert("not found")
}else{
do the rest.....
}
}
The problem is that you are trying to return a value in an each callback, but that doesn't have any meaning, so the return value just gets swallowed.
There's a much simpler way to do this. Just check whether .find() returns any elements:
var thereAreImages = $('ul#show_uploaded_images').find('img').length !== 0;
Or to package it up in functions:
function check_image_exists() {
return $('ul#show_uploaded_images').find('img').length !== 0;
}
function insert_product() {
if (check_image_exists()) {
// do the rest...
} else {
console.log('not found');
}
}
NOTE: based on you asking 2 function ,
function insert_product() {
var image_exist = check_image_exists();
if (image_exist) {
alert("here")
} else {
alert("not found")
}
}
function check_image_exists() {
return $('ul#show_uploaded_images').has("img").length;
}
insert_product();
NOTE: You can check direcly $('ul#show_uploaded_images').has("img").length

Can't return form submit to false

So I have a form, and if the input is invalid, I won't let the form pass like so
$(".main-form").submit(function(e){
return false;
});
This won't let the form pass. When the user complete everything correctly I try to do this
$(".main-form").submit(function(e){
return true;
});
But for some reason it stays false all the way though. Any workarounds?
You should use a single submit handler:
$(".main-form").submit() {
if (...) {
return true;
} else {
return false;
}
}
where ... contains your validation checks. The actual code might be somewhat more complex, e.g.
if (field1 is invalid) {
return false;
} else if (field2 is invalid) {
return false;
}
...
} else {
return true;
}
You have to clear the old handler, so you'd initialize it like this:
$(".main-form").on('submit', function(e){
return false;
});
Then to change the handler:
$(".main-form").off('submit');
$(".main-form").on('submit', function(e){
return true;
});

js/jquery - event.preventdefault doesn't seem to work in firefox

I have some code which was written by someone else, which is supposed to open a popup if a zipcode is not in the correct format and stop the page from being submitted. It works correctly in IE and chrome. But in firefox i get the popup, click ok, and then the page submits. Can someone look over the code and let me know what's being done incorrectly? Code pasted at the end of this message.
Thank you
<script type="text/javascript">
$(init);
function init() {
$('form').validate({
error_messages: {
},
failure: function (errors) {
//alert(errors);
$(".errMsg").show();
return false;
},
success: function () {
//alert('passed');
//return true;
}
});
$('#<%= btnAdd.ClientID %>').click(function (event) {
if (beginZipValidation()) {
//event.preventDefault();
return;
}
});
}
function clearText(mybox, mymsg) {
if (document.forms['form1'].elements[mybox].value == mymsg) {
document.forms['form1'].elements[mybox].value = '';
document.forms['form1'].elements[mybox].style.color = '#000000';
}
}
function resetText(mybox, mymsg) {
if (document.forms['form1'].elements[mybox].value == '') {
document.forms['form1'].elements[mybox].value = mymsg;
document.forms['form1'].elements[mybox].style.color = '#C0C0C0';
}
}
function beginZipValidation() {
//alert('begin validation');
var zip = $('#<%= Zip.ClientID %>').val().replace(/ /g, '').toUpperCase();
var cID = $("#<%= ddlCountry.ClientID %> option:selected").val();
if (!zipCodeValidation(true, cID, zip)) {
return false;
}
//alert('true');
return true;
}
function zipCodeValidation(shouldValidateEmpty, countryID, zc) {
//alert('zipCodeValidation');
if (zc == '' || zc == 'POSTALCODE') {
if (!shouldValidateEmpty) {
return true;
}
}
else {
switch (countryID) {
case '226':
if (/^\d{5}(-\d{4})?$/.test(zc))
return true;
break;
case '38':
if (/^([ABCEGHJKLMNPRSTVXY][0-9][ABCEGHJKLMNPRSTVWXYZ])\ ?([0-9][ABCEGHJKLMNPRSTVWXYZ][0-9])$/.test(zc))
return true;
break;
case '225':
if (/^(GIR 0AA|[A-PR-UWYZ]([0-9][0-9A-HJKPS-UW]?|[A-HK-Y][0-9][0-9ABEHMNPRV-Y]?)[0-9][ABD-HJLNP-UW-Z]{2})$/.test(zc))
return true;
break;
case '13':
if (/^(((2|8|9)\d{2})|((02|08|09)\d{2})|([1-9]\d{3}))$/.test(zc))
return true;
break;
}
}
alert('The postal code provided does not fit the format for the selected country. Please adjust and try again.');
if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
event.preventDefault();
return false;
}
It might be as simple as the selector being wrong:
Try changing this:
$('#<%= btnAdd.ClientID %>').click(function (event) {
if (beginZipValidation()) {
//event.preventDefault();
return;
}
});
Instead be a bit more verbose like:
var myButtonId = "<%= btnAdd.ClientID %>"; // Now you know what this evaluates to client-side
var btnSelector = "#" + myButtonId;
$(btnSelector).click(function (event) {
if (beginZipValidation()) {
//event.preventDefault();
return;
}
});
Are you using the standard tools like Firebug or Chrome Developer tools to debug? If so, throw a few console.log("myButtonId: " + myButtonId); statements in there!

Categories