Develop Reference

Change Background Of Div Once Contact Form 7 Is Submitted

So I'm trying to add a class to the container (.right-side-product-page) and the h2 on a contact 7 form. Here's a link:
https://nameplicity.com/domains/miningaid/
The goal is to change the class so the blue background and gray background become white, but only after an offer is submitted.
I've tried to add CSS and JavaScript, but can't seem to get anything working. Here is the code I've tried to use in the "Additional Settings" section under the Contact Form 7 plugin:
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '19533' == event.detail.contactFormId ) {
var theDropDown = document.querySelector(".right-side-product-page");
theDropDown.classList.add("MyClass");
}, false );
Could anyone provide direction as to what I'm doing wrong?

There's an error in your code: you're missing one curly bracket in there.
Try this:
<script>
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '19533' == event.detail.contactFormId ) {
var theDropDown = document.querySelector(".right-side-product-page");
theDropDown.classList.add("MyClass");
}
}, false );
</script>

Aside from the error which was mentioned above, you can further complete your solution based on the class added to the wpcp7-response-output block, upon successfully sending the message, the wpcf7-mail-sent-ok class is added. Knowing this, we can utilize these classes with a check, here's an example:
$( document ).ready(function() {
var outputBlock = $(".wpcf7-response-output");
var theDropDown = document.querySelector(".right-side-product-page");
$( ".wpcf7-submit" ).click(function() {
//Start an interval check after submit has been clicked
var intervalCheck = setInterval(function () {
if (outputBlock.hasClass("wpcf7-mail-sent-ok")) {
// The form has been submitted successfully, set the class to the block to change color
theDropDown.classList.add("MyClass");
// Stop running the interval checker after class has been added
clearInterval(intervalCheck);
}
},1000);
});
});

Try:
document.querySelector('.wpcf7-form').addEventListener('submit', function (ev) {
if(this['_wpcf7'].value == '19533') {
document.querySelector(".right-side-product-page").classList.add("MyClass");
}
});
or
document.querySelector('.wpcf7-form').addEventListener('wpcf7submit', function (ev) {
if(this['_wpcf7'].value == '19533') {
document.querySelector(".right-side-product-page").classList.add("MyClass");
}
}, false);
One of them should work. I believe the issue is that the event wpcf7submit you're listening to does not exist on document. It exists on document.querySelector('.wpcf7-form').

Got it!
Had to put it right under the submit button and encase it in tags. Thank you everyone for your help!!!

Ajax / Javascript - Remove Links After 1 Link Has Been Clicked

I have the following script which fetches data (branch names) asynchronously via database:
$(document).ready(function () {
$("#pickup").on('keyup',function () {
var key = $(this).val();
$.ajax({
url:'modal/fetch_branch.php',
type:'GET',
data:'keyword='+key,
beforeSend:function () {
$("#results").slideUp('fast');
},
success:function (data) {
$("#results").html(data);
$("#results").slideDown('fast');
// use `on` as elements are added dynamically
$( "#results" ).on("click", "a", function() {
// take `text` of a clicked element and set it as `#pickup` value
$( "#pickup" ).val( $( this ).text() );
// return false to prevent default action
return false;
});
}
});
});
});
HTML
<input type="text" class="form-control empty" name="keyword" id="pickup" placeholder=""/>
Everything is working perfectly, When user clicks link the data (branch name) gets added to the text input field, which is exactly what needs to happen, however...
My Problem
After user has clicked on desired link (branch name) I need the remaining links (data / branch names) to get removed...
As can be seen from above image Stellenbosch was selected, thus I need the other links to get removed...
Any advice how I can achieve the following greatly appreciated.
UPDATE
Here is the fetch_branch.php file as requested:
if(mysqli_num_rows($result) < 1 ) // so if we have 0 records acc. to keyword display no records found
{
echo '<div id="item">Ah snap...! No results found :/</div>';
} else {
while ($row = mysqli_fetch_array($result)) //outputs the records
{
$branch = $row['location'];
echo '<a style="cursor:pointer">'.$brach.'</a>';
echo'<br />';
}//while
}//else
}//if

I'm making a different assumption from the other answers here, because I can't understand why you'd want to remove the other links in the dropdown, after clicking one!
As can be seen from above image Stellenbosch was selected, thus I need the other links to get removed...
If that is indeed the case, you'll want to accept #acontell's answer.
However, if you'd like the clicked link to disappear from your list, you might try something like this in the click handler:
$("#results").on("click", "a", function() {
$this = $(this);
$("#pickup").val($this.text());
// Remove the linebreaks output by modal/fetch_branch.php
$this.next('br').remove();
// Remove the clicked <a> tag itself
$this.remove();
// return false to prevent default action
return false;
});
In case you'd like the whole dropdown to disappear when clicked, do this: (which, I think is common, no?)
$("#results").on("click", "a", function() {
$("#pickup").val($(this).text());
$("#results").slideUp();
return false;
});

try $(this).siblings().remove(); inside your click event. so your function should look like this,
$(document).ready(function () {
$("#pickup").on('keyup',function () {
var key = $(this).val();
$.ajax({
url:'modal/fetch_branch.php',
type:'GET',
data:'keyword='+key,
beforeSend:function () {
$("#results").slideUp('fast');
},
success:function (data) {
$("#results").html(data);
$("#results").slideDown('fast');
// use `on` as elements are added dynamically
$( "#results" ).on("click", "a", function() {
// take `text` of a clicked element and set it as `#pickup` value
$( "#pickup" ).val( $( this ).text() );
//------------------
//only this line is newly added
//------------------
$(this).siblings().remove();
//------------------
// return false to prevent default action
return false;
});
}
});
});
});

After selecting the item and setting the text to input add the following code snippet
$(this).siblings().remove();
This removes all the sibling li s of the selected item
or
$( "#results a" ).not(this).remove();

If I'm not mistaken, I think it could be done with a little modification to your code:
...
success:function (data) {
$("#results").html(data);
$("#results").slideDown('fast');
// use `on` as elements are added dynamically
$( "#results" ).on("click", "a", function() {
// take `text` of a clicked element and set it as `#pickup` value
$( "#pickup" ).val( $( this ).text() );
// --MODIFICATION-- Remove all elements except this.
$("#results").html(this);
// return false to prevent default action
return false;
});
}
...
The idea is to substitute the html of the link container (it contains all the links) with the HTML of the clicked link. In essence, it will remove all and leave only the clicked one.
Here's a fiddle (without AJAX) that represents the idea. Hope it helps.

Please check this link for a working demo. Click Here
I used dummy data and use changed keyup event to focus for testing you can modify it more (if this helps).
I hope this will help you.
Thanks,

I don't understand you. However, if you mean hide result after link clicked, you can use
$("#results").slideUp('fast');
within onclick event.
Also you can remove other links and live clicked.
$("#results").on("click", "a", function() {
$("#pickup" ).val($(this).text());
$(this).addClass('selected');
$("#results a:not(.selected)").remove();
$(this).removeClass('selected');
return false;
});

How to: jQuery/JS Dialog box with checkbox on a link with click event (to go to that link)

I've been asked for a simple solution to add to links on a blog that would pop-up a warning before going to that link. Only if you agree do you go on to that link. The first solution works fine (and I got it here):
<script type="text/javascript">
function confirm_alert(node) {
return confirm("some message here");
}
</script>
Click Me
However, now I've been asked to have a checkbox in the pop-up that says something like "I understand" and then a button to continue. If it isn't checked or if they click outside the box (or the X close button if there is one), then it just goes back to the page they were on. If it IS checked and they click continue it goes to the URL on the link (as above).
Along with this, I need to set a browser cookie ONLY if the dialog is checked and continue hit. I've set cookie's in browser with JS before, but not attached to to an event like this, so I'm not sure how to do that either.
I've done many searches here and on the net in general and can't seem to find any examples that do this. I have found that there's no way to do this with a standard confirm dialog and would need to use jQuery and that's fine, but I still can't find an example.
Any help is much appreciated.

I haven't tested this code (I just free typed it here).
In the HTML:
<div id="agreeModal">
<input id="agree" type="checkbox" />
<button id="btnCancel">Cancel</button>
<button id="btnContinue">Continue</button>
</div>
JavaScript (in another file or in a <script> tag) :
document.addEventListener('DOMContentLoaded', function() {
var agreeUrl = '';
// Get the links on the page
var links = document.querySelectorAll('a');
links.addEventListener('click', function( event ){
event.preventDefault(); //stop it from following link
agreeUrl = this.getAttribute('href'); // get the url
document.getElementById('agreeModal').style.display='block'; //show Modal
});
var btnContinue = document.getElementById('btnContinue');
btnContinue.addEventListener('click', function( event ) {
event.preventDefault();
var cb = document.getElementById('agree');
if (cb.checked) { //if checkbox is checked goto url
location.href= agreeUrl;
}
});
var btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function( event ) {
event.preventDefault();
//hide Modal
document.getElementById('agreeModal').style.display='';
});
});
Same code in jQuery:
(function( $ ){
$(function(){
var agreeUrl='';
$('a').on('click', function( event ){
event.preventDefault(); //stop it from following link
agreeUrl = $(this).attr('href'); // get the url
$('#agreeModal').show(); //show Modal
});
$('#btnContinue').on('click', function( event ) {
event.preventDefault();
if ($('#agree').prop('checked')) { //if checkbox is checked goto url
location.href= agreeUrl;
}
});
$('#btnCancel').on('click', function( event ) {
event.preventDefault();
//hide Modal
$('#agreeModal').hide();
});
});
})( jQuery);
Hope that helps!

Jquery get the value of the input when changing

I would like to get the value of an input and return it to a span. I would like to update the span each time the input is changing. The problem is that i will use it for a colorpicker so the user will not usualy write the color value(maybe paste it). So everytime the input textfield will be updated by the colorpicker js i want to update my own field.
I created a simple code to help you understand what i want to do.
Pressing the + you will change the value of the input field and i would like to get that value and print it in the span. Thank you.
HTML ::
<div>
<input type="text" class="mariinsky" /><button id="inside">+</button>
</div>
<button id="outside">Button</button><br />
input value = <span></span>
JS ::
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( '.mariinsky' ).change( function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
http://jsfiddle.net/existence17/9V8ZU/1/

Add .change() to the end of your '+' handler:
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i).change();
i++;
});
That will force the change event to fire and then your code will update the span.

For live DOM changes, use the jQuery on function - the following code would work in your case:
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( 'button#inside' ).on('click', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});

jQuery doesn't automatically trigger events through code. You need to do so manually using the .trigger() method.
Adding one line did it for me: jQuery('.mariinsky').trigger("change").
Here's a working example: http://jsfiddle.net/9V8ZU/2/
Also a useful question for reference: How to trigger jQuery change event in code

please use this :
$( '.mariinsky' ).on('keypress keyup keydown click copy cut paste', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
Fiddle example
all the rest of the provided answers aren't covering the entire options.

jQuery doesn't recognize a class change

Ok, I have a edit button, when I press on it, it changes to "done" button.
It's all done by jQuery.
$(".icon-pencil").click(function() {
var pencil = $(this);
var row = $(this).parent('td').parent('tr');
row.find('td').not(":nth-last-child(2)").not(":last-child").each(function() {
$(this).html("hi");
});
pencil.attr('class', 'icon-ok-sign');
});
// save item
$(".icon-ok-sign").click(function() {
alert("hey");
});
When I press on a "edit" (".icon-pencil") button, its classes change to .icon-ok-sign (I can see in chrome console),
but when I click on it, no alert shown.
When I create a <span class="icon-ok-sign">press</span> and press on it, a alert displays.
How to solve it?

Try using $( document ).on( "click", ".icon-ok-sign", function() {...

Thats because you can not register click-events for future elements, you have to do it like this:
$(document).on('click', '.icon-ok-sign', function() {
alert('hey');
});
This method provides a means to attach delegated event handlers to the
document element of a page, which simplifies the use of event handlers
when content is dynamically added to a page.

Use following script:
$(document).on('click','.icon-ok-sign',function(){
alert("hey");
});

Try this:
$(".icon-pencil").click(function() {
var pencil = $(this);
var row = $(this).parent('td').parent('tr');
row.find('td').not(":nth-last-child(2)").not(":last-child").each(function() {
$(this).html("hi");
});
pencil.removeAttr('class').addClass('icon-ok-sign');
});
// save item
$(".icon-ok-sign").click(function() {
alert("hey");
});