When the form fields are inputted and submitted (#submit_btn) correctly my values disappear. When they are not valid this doesn't happen. I have tried fixing this with jQuery:
$('#submit_btn').click(function() {
if($("#register .wpcf7-mail-sent-ok") === true) {
$('#name-007').val('Full Name').show();
$('#email-007').val('Email').show();
$('#phone-007').val('Phone Number').show();
}
});
but it is not working.
Edit: #register is parent and .wpcf7-mail-sent-ok is child
Any ideas?
From what I understood this should work for you:
$('#submit_btn').click(function() {
if($("#register .wpcf7-mail-sent-ok")) {
$('#name-007').val('Full Name').show();
$('#email-007').val('Email').show();
$('#phone-007').val('Phone Number').show();
}
});
checking $("#register .wpcf7-mail-sent-ok") with true will not work as it is a dom object which is truth-sy but not strictly same as true
Try this:
$('#submit_btn').click(function() {
if($("#register .wpcf7-mail-sent-ok").length) {
$('#name-007').val('Full Name').show();
$('#email-007').val('Email').show();
$('#phone-007').val('Phone Number').show();
}
});
This is the "proper" way of checking if element exists.
No need for using " > 0" or "==="
$('#submit_btn').click(function() {
if($("#register").hasClass("wpcf7-mail-sent-ok") {
$('#name-007').show();
$('#email-007').show();
$('#phone-007').show();
}
});
Related
I am trying to apply starts with function on textarea, but obviously I am doing something wrong. I don't understand javascript, so I am sorry for obvious mistakes or problems. At least I tried what seemed logical to me... Fiddle here: http://jsfiddle.net/SVxbW/235/
HTML:
$("textarea").bind(function () {
if ($(this).startsWith("Hello") {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
.kuk {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea></textarea>
<button class="kuk">Clear</button>
And what if someone pastes the text "Hello" with right click of mouse? How to recognize that action too?
You need to get the val() then use startsWith(). Additionally you need to bind proper event handler. Here I have used keyup
$("textarea").on('keyup', function() {
if ($(this).val().startsWith("Hello")) {
$(".kuk").show();
} else {
$(".kuk").hide();
}
});
Updated Fiddle
Try this. You need to bind an event also you need to get val to check whether it startswith hello or not.
$("textarea").bind('keyup',function () {
if ($(this).val().startsWith("Hello")) {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
Here is jsfiddle
I made jsfiddle for those wondering which code I am using right now. I added few kinds of input options and now it works in chrome as well.
final fiddle
$("textarea").bind('change keyup paste blur input',function () {
if ($(this).val().startsWith("Hello") || $(this).val().startsWith("HELLO") || $(this).val().startsWith("hello")) {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
I have a checkbox and some <div>s that show/hides whenever a checkbox is checked. Now it all works great but it could be more efficient.
jQuery("#filtertype").change(function () {
if (jQuery("#posttype").is(":checked")) {
jQuery("#postblock").slideDown("slow");
} else {
jQuery("#postblock").slideUp("slow");
}
if (jQuery("#taxonomycat").is(":checked")) {
jQuery("#taxonomyblock").slideDown("slow");
} else {
jQuery("#taxonomyblock").slideUp("slow");
}
if (jQuery("#taxonomytag").is(":checked")) {
jQuery("#taxonomyblocktag").slideDown("slow");
} else {
jQuery("#taxonomyblocktag").slideUp("slow");
}
if (jQuery("#fieldjeskey").is(":checked")) {
jQuery("#fieldblock").slideDown("slow");
} else {
jQuery("#fieldblock").slideUp("slow");
}
if (jQuery("#sliderme").is(":checked")) {
jQuery("#sliderblock").slideDown("slow");
} else {
jQuery("#sliderblock").slideUp("slow");
}
});
This works like it should; it gets the ID of the checkbox <input> and for every <input> (#filtertype, #taxonomycat etc.) it will show or hide a <div> (#postblock, #taxonomyblock etc.)
It may be smarter to get the ID of every <input> and toggle the slideUp, slideDown function.
How can this be done?
Firstly, rather than have a list of id selectors, put a single class of each of those checkboxes, along with a data attribute to specify the relation. Something like this:
<input type="checkbox" name="posttype" class="filter-checkbox" data-rel="postblock" value="foobar" />
Then in javascript you can simplify all the code above to the following:
jQuery("#filtertype").change(function() {
$('.filter-checkbox').each(function() {
var func = this.checked ? 'slideDown' : 'slideUp';
$('#' + $(this).data('rel'))[func]('slow');
});
});
Example fiddle
It could be more efficient by not using jQuery.
Replace all of your jQuery("#someID").is(":checked") with
document.getElementById('someID').checked, and short of writing your own lightweight animation engine that's as good as you'll get.
Or you can go down the dark path of obscurity:
jQuery("#postblock")["slide"+(document.getElementById('posttype').checked ? "Down" : "Up")]("slow");
But that's probably not a good idea :p
Some generated output can be as follows:
<div class="fivecol"></div>
<div class="sevencol">content</div>
if the div.fivecol is empty, I want to remove it and change the div.sevencol to a div.twelvecol
$('.fivecol').each(function() {
if ($(this).html() ==''){
$(this).remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
}
});
doesn't do the trick. Any ideas?
$('.fivecol:empty + .sevencol').toggleClass('sevencol twelvecol')
.prev()
.remove();
DEMO: http://jsfiddle.net/JY9NN/
$('.fivecol').each(function(i, div) {
if (!div.html().trim()) {
div.remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
}
});
basically I just fixed some syntax errors, and changed the this reference to the proper argument call. Let me know how that works.
Best,
-Brian
Try this,
$(function () {
$('.fivecol').each(function() {
if ($(this).html() =='') {
$(this).remove();
$('.sevencol').each(function(){
$(this).attr('class','twelvecol');
});
}
});
});
We could use a couple fancy selector tricks:
$(".fivecol:empty + .sevencol").attr("class", function(){
return $(this).prev().remove(), "twelvecol";
});
As you can probably guess, .fivecol:empty attempts to find an empty element with the class fivecol. It then proceeds to grab the sibling element, using +, which has the class .sevencol.
Once we have our .sevencol element, we set out to change its class value to twelvecol. Since we're in this function, we know that .fivecol:empty was found, so we can safely remove it. Lastly, we simply return the new class value to be assigned in the place of sevencol.
Demo: http://jsfiddle.net/cLcVh/1/
I am trying to create a if statement that triggers a alert box if there is text in the div.
My Jsfiddle: http://jsfiddle.net/D7cPT/21/
My HTML:
<div id="post-preview">aasasdasd</div>
MY JQUERY:
$(document).ready(function() {
// Bind it to some action.
if{$('#post_body_html').html();) {
alert('asdasda');
}
});
OH DEAR GOD:
//why is there a bracket after the if and a semicolon in there?
if{$('#post_body_html').html();) {
How about:
//change if{ to if( and remove semicolon
if($('#post_body_html').html()) {
Also your selector doesn't match the ID of your element. Change #post_body_html to #post-preview
jsFiddle
Edit:
To those who land here later on, a better way to accomplish the same test is written:
if($('#post_body_html')[0].childNodes.length) {
instead.
Try this ->
$(document).ready(function() {
// Bind it to some action.
if($('#post-preview').html()) { // wrong ID and wrong syntax
alert('asdasda');
}
});
Working demo : http://jsfiddle.net/manseuk/D7cPT/25/
You have MANY problems:
It should be post-preview, not #post_body_html
You have if { instead of if (
You end your if statement with a semi-colon? Huh?
html() doesn't return a bool, it returns a string.
Try this:
$(document).ready(function() {
// Bind it to some action.
if ($('#post-preview').html().length > 0) {
alert('asdasda');
}
});
You should remove the ;
$(document).ready(function() {
// Bind it to some action.
if{$('#post_body_html').html()) { //line changed
alert('asdasda');
}
});
The esample is here: http://jsfiddle.net/SsPqS/
I have a div with class="record" I add a click function to every object with class"record". in the click function I have this:(simplified)
$(".record").click(function(e) {
if (!$(e.target).is(':button')) {
if ($.contains($(this).parents(".parentDiv"), $("#UserInformation"))) {
alert("true");
} else {
alert("false");
}
}
});
I keep getting the true alert, but i'm not sure why becaue #UserInformation is certinly not in the div with class "parrentDiv"
Am i using the contains function wrong?
Thanks!
$.contains() is intended to take DOM elements, like this:
if ($.contains($(this).closest(".parentDiv")[0], $("#UserInformation")[0])) {
You can test the updated demo here.
I think you should use the has() method
$(".record").click(function(e) {
if (!$(e.target).is(':button')) {
if ($(this).closest(".parentDiv").has("#UserInformation").length) {
alert("true");
}
else {
alert("false");
}
}
});
http://api.jquery.com/has-selector/
Description: Selects elements which contain at least one element that matches the specified selector.