We Keep Coding

How made my function affect the DOM Jquery?

Hi, I have written a webSite on Shopify and I want to disable my button and add some customs CSS class to my input if the input is not filled on my 4steps form.
I've written a piece of code with what I remember from Jquery it's been a long time since I've used this language.
This is the jQuery funct:
$(document).ready(function () {
$("#submitButton, #btn0, #btn1, #btn2").click(function () {
ValidateForm();
});
function ValidateForm() {
var invalidForm = false;
var index = 0;
var button = document.querySelector("#submitButton, #btn0, #btn1, #btn2");
$("#form__form--stepForm-" + index + "input.form__form--input").each(function () {
if ($(this).val() < 1) {
invalidForm = true;
}
});
if (invalidForm === true) {
button.disabled = true;
$("input.form__form--input").removeClass(".form__form--validation").addClass(".form__form--validationInvalid");
} else if (invalidForm === false) {
button.disabled = false;
$("input.form__form--input").removeClass(".form__form--validation").addClass(".form__form--validationValid");
index++;
}
}
});
I made all my inputs like this one:
<div class="3/3 3/3--thumb 3/3--pocket grid__cell--center">
<input type="text" id="form__form--lastnameInput" name="contact[lastname]"
class="form__form--input form__form--validation" placeholder="Nom *" value required>
<div class="form__form--invalidFeedback">Veuillez saisir votre nom.</div>
</div>
And the button like this:
<button id="btn0" type="button" class="button button--primary form__form--button"
aria-label="SUIVANT" title="SUIVANT">
{% include 'icon-arrow-slider' %}
SUIVANT
</button>
As you can see it's a very basic function for the jquery and a classic HTML input but it doesn't block the button and doesn't make the CSS work either. I'd like to understand why and how to make it work for this site and the following thanks for your time and help, take care of yourself!

Your value checking is always false, consider using length function instead:
if ($(this).val().length < 1) {
invalidForm = true;
}
You may also need to prevent default behavior of your form. Instead of listening to the click, listen the submit event:
$("#form__form--contactWrapper").on('submit',function (e) {
e.preventDefault(); //the form is not sent yet
ValidateForm();
});
Then at the end of your function ValidateForm you can send it when you have all your needed validations done, like this:
$("#form__form--contactWrapper").submit();

I have get rid of all error by doing a big refacto of my code i share you my code
$(document).ready(function () {
$('[to-step]').on('click', function () {
var to_step = $(this).attr("to-step");
var current_step = $(this).closest('[stepform]').attr("stepform");
var form_error = false;
if (!($(this).hasClass("previous-btn"))) {
$('[stepform="' + current_step + '"] .form__form--input').each(function () {
if ($(this).val().length == 0) {
$(this).addClass("input--error");
form_error = true;
} else {
$(this).removeClass("input--error");
}
});
}
if (!form_error) {
if (current_step < 4 || $(this).hasClass("previous-btn")) {
$('[stepform').hide();
$('[stepform="' + to_step + '"]').fadeIn();
}
}
});
$("#submitButton").on("click", function (event) {
event.preventDefault();
if ($("#form__form--radioRgpd:checked").length == 1) {
$("#contact_form").submit();
} else {
$(".form__form--radioRgpdLabel").addClass("label--error");
}
});
});
this piece of code gonna check at what step i am in my 4 'pages' form and add the proper css class if the form is bad filled or not filled.

If an input contains custom word, hide the button

I have an input[type=text] area and i'll paste/type a URL in it.
If pasted/typed url contains http, i want to hide $('#button') element.
If its not, keep showing the button also.
Thanks for any help.
Here is my demo code so far:
$('#pasteUrl').on('input', function () {
var str = $('#pasteUrl').val();
if (str.indexOf("http") !== -1) {
$('#button').hide();
}
});

Edit: Added "propertychange" to events as suggested by OP in the comments.
$('#pasteUrl').on('input propertychange', function (ev) {
var str = $(ev.currentTarget).val();
if (str.indexOf("http") != -1) {
$('#button').hide();
} else {
$('#button').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pasteUrl" />
<button id="button">Go</button>

This is likely what you want - using toggle:
$('#pasteUrl').on('input propertychange', function() {
var str = $(this).val();
$('#button').toggle(str.indexOf("http") == -1);
});

jquery form check before submit with select name array

I'm having a hard time with this quick validation i want in place...but i think it's not validating properly because of my select name arrays and i'm not sure how to go about this.
How it should work:
- If stat holiday box is checked for that day && if any Lieu hours are selected for that day give alert error and stop form submission.
My jsfiddle: http://jsfiddle.net/4bgYj/3/
my jquery:
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
var lieuhrs = $(".lieutimehours").val();
$('.lieutimehours').each(function(i, obj) {
if ($("#statholidaycheck").is(":checked") && lieuhrs > 0) {
alert("cannot process: " + lieuhrs);
return false;
}
}
});
});

Let me give you a more user-friendly approach for your problem:
If stat is selected simply disable the form input for lieu hours.
With this you won't have to check anything before submitting the form and the user can't accidentally select a value in lieu hours.
It still needs to be updated to your markup, but the idea is basically:
var stat = $('.stat');
stat.change(function() {
var e = $(this);
var f = e.parent().find('.lieu');
if (e.is(':checked')) {
f.prop('disabled', true);
} else {
f.prop('disabled', false);
}
});
Demo
Try before buy

First, you're missing a );...
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
var lieuhrs = $(".lieutimehours").val();
$('.lieutimehours').each(function(i, obj) {
if ($("#statholidaycheck").is(":checked") && lieuhrs > 0) {
alert("cannot process: " + lieuhrs);
return false;
}
}); // missing ); here. <--------------
});
});
Try it after adding that and you'll find it works for the first checkbox. But select a different checkbox and it will fail. In HTML, you will want to use unique ids to reference an element. What I would do is change your HTML to put a css class on the TR tag, and then look at the contained elements.
<tr class='line'>
<td> <input type='checkbox' class='isHoliday'/> </td>
<td> <select class='lieuHours'>options...</select> </td>
</tr>
and in your script...
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
$('.lines').each(function(i, obj) {
var lieuHours = $(this).find(".lieuHours").val();
if ($(this).find(".isHoliday:checked") && lieuHours > 0) {
alert("cannot process: " + lieuhrs);
return false;
}
}); // missing ); here. <--------------
});
});

You didn't approach the issue properly, the selectors should not be global but specific to the loop you are doing:
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
$('.lieutimehours').each(function(i, obj) {
var lieuhrs = $(this).val();
if ($(this).closest('tr').find('#statholidaycheck').is(":checked") && parseFloat(lieuhrs) > 0) {
alert('works');
return false;
}else{
alert('fail')
}
});
});
});

jQuery issue with conditions

I have two anchor links One is Like and Second is Favorite Now I am trying get alert when user click to specific option.
If user click to Like option alert('Like Clicked');
or
If user click to Favorite option alert('Favorite Clicked');
but something is wrong and getting multiple alerts with Like and Favorite.
Whats wrong with my code I can't understated.
MY JS WORK:
$(window).load(function(){
$('.ovrly a').click( function () {
var getImageID = $(this).attr("id"); //class name with id
if($(".like").children("."+getImageID)) {
alert('Like Clicked');
}
if($(".fav").children("."+getImageID)) {
alert('Favourite Clicked');
}
});
});
MY HTML WORK:
<div class="ovrly">
<span class="like">
<a class="like_32" id="like_32" href="javascript:void(0);">Like</a>
<p class="likeCount_32">
15
</p>
</span>
<span class="fav">
<a class="favourite_32" id="favourite_32" href="javascript:void(0);">Favourite</a>
<p class="favouriteCount_32">
09
</p>
</span>
</div>
My Sample JS FIDDLE
My Sample Code With Ajax Code:
<script type="text/javascript">
// like and favourite ajax script
$(function () {
$('.load_more_ctnt .ovrly a').live("click", function () {
var getImageID = $(this).attr("id"); //class name with id
var getID = getImageID.replace(/[^0-9]+/g, ""); //only id
var getOptionName = getImageID.replace(/[^A-Za-z]+/g, ""); //only id
//alert(getImageID);
$(document).ajaxStart(function() {
if($(".like").children("."+getImageID).length > 0) {
alert('Like Clicked');
}
if($(".fav").children("."+getImageID).length > 0) {
alert('Favourite Clicked');
}
}).ajaxStop(function() {
if($(".like").children("."+getImageID).length > 0) {
alert('Like Clicked');
}
if($(".fav").children("."+getImageID).length > 0) {
alert('Favourite Clicked');
}
});
if (getImageID) {
$.ajax({
type: "POST",
url: "<?php echo URL; ?>home/passImageID",
data: "getImageID=" + getImageID,
success: function (html) {
$("#" + getImageID).removeAttr("id");
if(html == 'like'){
$("." + getImageID).addClass( "iplike" );
var incrementBy1 = $(".likeCount_" + getID).text();
var tempLikeNewValue = +incrementBy1+1;
$(".likeCount_" + getID).text("");
$(".likeCount_" + getID).text(tempLikeNewValue);
}else{
$("." + getImageID).addClass( "ipfav" );
var incrementBy1 = $(".favouriteCount_" + getID).text();
var tempFavNewValue = +incrementBy1+1;
$(".favouriteCount_" + getID).text("");
$(".favouriteCount_" + getID).text(tempFavNewValue);
}
}
});
} else {
//$(".more_tab").html('The End');
}
return false;
});
});
</script>

I think you need .is().
Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
Code
$('.ovrly a').click(function () {
if ($(this).is(".like_32")) {
alert('Like Clicked');
}
if ($(this).is(".favourite_32")) {
alert('Favorite Clicked');
}
});
DEMO

reference hasClass()
$('.ovrly').on('click','a',function () {
if ($(this).hasClass("like_32")) {
alert('Like Clicked');
}
if ($(this).hasClass("favourite_32")) {
alert('Favorite Clicked');
}
});
DEMO

$(".like").children("."+getImageID) the code provide you children element selector object, for the exist check, you can use langth.
if($(".like").children("."+getImageID).length > 0) {
alert('Like Clicked');
}

Your problem is that both conditions are always true!
$(".like").children("." + getImageID)
$(".fav").children("." + getImageID)
You are not comparing anything. Both statements return true since both elements exists in your page.

use length in jquery
if ($(".like").children("." + getImageID).length > 0) {
alert('Like Clicked');
}
if ($(".fav").children("." + getImageID).length > 0) {
alert('Favorite Clicked');
}
Fiddle

Another option...
$('#favourite_32').click(function () {
alert('Favorite Clicked');
});
$('#like_32').click(function () {
alert('Like Clicked');
});

your approach is correct, but you have little bit diverted from basic concept.
$(".like").children("."+getImageID) and $(".fav").children("."+getImageID) both are returning object.
In case, when you click on like then
$(".like").children("."+getImageID) return a object of array that have element.
$(".feb").children("."+getImageID) return a object of array that are empty.
but in both case there is object of array and for a object of array if condition is always true.
try to execute on js console :
if([]){
console.log("it will print that condition is true")
}
then you alwaye find:
it will print that condition is true
You would have use for correct working.
if($(".like").children("."+getImageID).length>0){
}
and
if($(".like").children("."+getImageID).length > 0){
}

jQuery Arguments Not Working

Having trouble with 2 things. Both of these arguments are ONLY working for the first box area generated on page load. But any subsequent ones created after aren't affected by these options. What am I doing wrong, and how can I fix it?
//CHECK IF TYPE/PAGE(S) IS SELECTED OR NOT
$(".dropdown").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty").children('.placeholder').remove();
});
//CHECKS TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
var $onlyOne = $('.onlyOne');
$onlyOne.click(function () {
$onlyOne.filter(':checked').not(this).removeAttr('checked');
});
The entire code for my JS is:
$(function () {
var i = 1;
//ADD ROW
$('body').on('click', '.addPTbutton', function () {
var box = '<table class="manage-pt" id="' + i + '"><tr class="pt-entry"><td class="pt-toggle-group"><input class="pt-button togPTbutton" id="0" type="button" value="▾"><input class="pt-button addPTbutton" id="0" type="button" value="+"><input class="pt-button delPTbutton" id="' + i + '" type="button" value="-"></td><td class="pt-values"><div><input class="vendor grayout" placeholder="*Vendor Name" type="text"><select class="move-me-right-10 dropdown"><option value="0" class="placeholder" selected="selected">*Select Type</option><option value="analytics">Analytics</option><option value="chat">Chat</option><option value="remarketing">Remarketing</option><option value="other">HTML/CSS/JS</option></select><i class="icon-sort"></i><i class="icon-lock"></i></div><div><textarea class="ptCode" name="ptCode" placeholder="*Pixel Tag Code"></textarea></div><div class="page-select"><select class="dropdown"><option value="0" class="placeholder" selected="selected">*Select Page(s)</option><option value="AllPages">All Pages</option><option value="HomePage">HomePage</option><option value="VehicleDetailsPage">VehicleDetailsPage</option><option value="VehicleSearchResults">VehicleSearchResults</option><option value="ContactUsForm">ContactUsForm </option></select></div><div class="area-checkboxes"><p class="wheretosave">*Where?</p><input name="head" type="checkbox"><label for="head">Head</label><input name="body" type="checkbox"><label for="body">Body</label></div><hr/></td></tr></table>';
i++;
$("#p_scents").append(box);
return false;
});
//DELETE ROW
$('body').on('click', '.delPTbutton', function () {
var boxnum = $(".manage-pt").length;
if (boxnum <= '1') {
alert('Cannot Delete Last Remaining Row');
} else {
$(this).parents().eq(3).remove();
}
return false;
});
//TOGGLE BUTTON
$('body').on('click', '.togPTbutton', function () {
var hiddenarea = $(this).parent().next().children().next();
if ($(hiddenarea).is(':hidden')) {
//PT-VALUES OPENED
$(this).val('▾');
$(this).parent().next().children(0).children(0).attr('readonly', false);
//$(this).parent().next().children(0).children(1).prop('disabled', false);
} else {
//PT-VALUES HIDDEN
$(this).val('▸');
$(this).parent().next().children(0).children(0).attr('readonly', true);
//$(this).parent().next().children(0).children(1).prop('disabled', 'disabled');
}
//TOGGLE VISIBILITY OF HIDDEN AREA
hiddenarea.toggle();
});
//CHECK IF TYPE/PAGE(S) IS SELECTED OR NOT
$(".dropdown").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty").children('.placeholder').remove();
});
$(".dropdown").change();
//CHECKS FOR MORE THAN ONE 1 MANAGE-PT BEFORE ENABLES SORTABLE
$('body').on('mouseenter', '.icon-sort', function () {
if ($(".manage-pt").size() > 1) {
$('#p_scents').sortable({
disabled: false,
placeHolder: '.placeHolderHighlight',
handle: '.icon-sort',
});
} else $('#p_scents').sortable({
disabled: true,
});
});
//CHECKS TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
var $onlyOne = $('.onlyOne');
$onlyOne.click(function () {
$onlyOne.filter(':checked').not(this).removeAttr('checked');
});
//LOCK BUTTON ON/OFF LOCKS FORM
$('body').on('click', '.icon-lock', function () {
$(this).toggleClass('locked');
var lockedarea = $(this).parents(0).eq(2);
$(lockedarea).find('input[type=text],input[type=checkbox],textarea,select').prop('disabled', function (_, val) {
return !val;
});
});
});

I assume you're using AJAX. You should be handling event delegation differently for dynamically generated DOM elements.
Ideally, you shouldn't be using body or document. Try using the nearest parent selector which is present all the time(non AJAX).
//CHECK IF TYPE/PAGE(S) IS SELECTED OR NOT
$("body").on("change", ".dropdown", function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty").children('.placeholder').remove();
});
//CHECKS TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
$("body").on("click",'.onlyOne', function () {
$onlyOne.filter(':checked').not(this).removeAttr('checked');
});