Utilizing JQuery for Redirection

I need help with a specific issue on my website.

Visit this link

On the webpage, there is a button labeled "get a quote". When users click on this button, I want them to be redirected to google.com.

I attempted to achieve this using the following JavaScript code:

jQuery(function($) {
    $(".wpcf7-form-control.wpcf7-submit").click(function() {
        window.location = "www.google.com/index.php?id=";
    });
});

However, after clicking the button, the generated link looks like this:

http://dgprint.dg-site.com/www.google.com/?id=

I am using Wordpress plugin "Contact form 7" and cannot figure out why it's not working as expected. Any advice would be greatly appreciated!

Thank you in advance for your assistance.

EDIT:

<div class="contact-frm">
        <div class="right">
            <?php echo do_shortcode('[contact-form-7 id="9" title="get a quote"]'); ?>
        </div>
    </div>

EDIT2:

<p><input type="submit" value="get a quote" class="wpcf7-form-control wpcf7-submit"><img class="ajax-loader" src="http://dgprint.dg-site.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." draggable="false" style="visibility: hidden;"></p>

Answer №1

Here is a recommended approach:

When utilizing jQuery, begin by invoking the document.ready() function, passing in the $ symbol as an argument. This ensures that the DOM is fully loaded before executing any script. Next, target the submit button within a form with the classes 'wpcf7-form-control' and 'wpcf7-submit', using the .click() method to define a click event handler. Within the handler function, set the window.location property to redirect to a specific URL, appending the Id of the clicked element using the $(this).attr("id") method.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The presence of concealed cells within an HTML table is leading to an increase in the

I am currently working on an HTML Table that serves as a summary table for displaying a list of items. The table has 4 visible columns out of approximately 20, with the remaining columns set to display: none;. However, the hidden cells are causing the rows ...

Responsive timeline displaying issue on the left column

After tackling some challenges in previous forums to fix my responsive timeline, I resorted to copying code from codepen.io due to my laziness to create one from scratch. The complexity of creating a timeline also played a role in my decision. My current ...

Insert between the top navigation bar and the sidebar menu

I am currently in the process of designing my very first website and I have encountered a bit of trouble. I would like to add a page between a navbar and a vertical bar, and I want this page to be displayed when a button on the vertical bar is clicked. You ...

Flexbox element in React not resizing to fit width

I've been working on a slide carousel and it's almost complete, but I'm facing an issue with adjusting the arrows to the images. When testing the website for responsiveness, I noticed that the div inside the flexbox stops shrinking and rema ...

Having difficulty retrieving the Area and Range information in ChartJS

I am new to working with HTML5 and ChartJS. I have noticed two different types of declarations when attaching JS Chart Versions 1.0.1 and 2.1.1. Can you please provide some insight into this? Additionally, I am facing an issue where the stripes behind the ...

Increasing the margin-left automatically in Bootstrap 3.0.0

I am looking to automatically generate margin-left in the ".card" class "style" element every time a post is entered on a page. My jQuery version is 1.12.4 This is my idea: If the .card CSS style has a margin-left of 0 and width of 479px, set position to ...

Creating a dynamic CSS height for a div in Angular CLI V12 with variables

Exploring Angular development is a new venture for me, and I could use some guidance on how to achieve a variable CSS height in Angular CLI V12. Let me simplify my query by presenting it as follows: I have three boxes displayed below. Visual representatio ...

Looking to style a <p> element with CSS?

In the div class index, there are two additional divs without any class or id names, along with two <p> tags. My goal is to style these two <p> tags. <div class="doubt"> <div> <p>Hello world</p> <div> ...

Tips for disabling autofocus on textarea when it is initially created in Internet Explorer browser

By clicking a button, I can generate a new <textarea></textarea>. However, in Internet Explorer, the cursor automatically moves to the newly created text area. Is there a way to prevent this from happening? ...

`Overlapping navigation against a backdrop of backstretch image`

Is there a way to make the navigation display in front of the background image? Currently, the navigation becomes un-clickable and is hidden behind the image once it loads. ...

How can you continuously calculate and show the total quantity of items in a list?

Currently, I have lists set up in my sidebar and I'm looking to include a label displaying the number of items within each list. To provide a better understanding of what I'm aiming for, I've put together a JSFiddle demonstration at the fol ...

Tailwind CSS experiencing issues with custom color options and dark mode functionality

For my personal project, I am utilizing tailwind CSS and I would like to incorporate custom colors. Currently, I am using the hover:text-[#007560] trick, but I believe it would be more convenient if I could have my entire color palette defined in the tailw ...

How do I link data from a boostrap modal in vue.js?

To display a bootstrap modal, we can utilize the data-toggle attribute. For instance: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#msg">Open Modal</button> I want to show the modal by using a boolean var ...

Is it possible to retrieve the pixel color of a mesh by clicking on it in JavaScript?

On the current page, we have a mesh loaded with TreeJS and displayed in a canvas: https://i.sstatic.net/j8Ztj.png Is there a way to retrieve the color of the point where a click occurs? I attempted a method suggested in this thread: Getting the color val ...

Ways to eliminate excess space at the top of a page while utilizing float elements

After doing some research online, I've come across advice on how to remove the space at the top of a web page which usually involves setting the margin and padding of the body element to 0: body { margin: 0; padding: 0; } You can find more i ...

What is the best way to trigger a function exclusively upon clicking a particular element?

My goal is to enable the user to interact with the model by positioning cubes in space upon clicking the "Cubes Mode" button. I currently have a script from the three.js website that achieves this, but I want it to only run when the mentioned button is cli ...

Struggling with creating an html file that is responsive on mobile devices

I am currently utilizing bootstrap 4 for the construction of a website. I have encountered an issue where my homepage does not display properly on handheld devices when using Google Chrome's device toggle toolbar. The homepage requires scrolling to vi ...

"Apply a class to a span element using the onClick event handler in JavaScript

After tirelessly searching for a solution, I came across some answers that didn't quite fit my needs. I have multiple <span id="same-id-for-all-spans"></span> elements, each containing an <img> element. Now, I want to create a print ...

Stylesheets are being requested over the network, however, they are not being applied to the HTML

https://i.sstatic.net/GGYxm.png The screenshot above shows the initial setup in Firefox's developer tools. There is a <link rel="stylesheet"> in the header, but no styles are applied to the <body> element in the lower viewport. The second ...

Divide the screen evenly with a split, where one side is filled with an image

As a newcomer, I'm curious about how to split the screen in half with a form on the left and an image taking up the full height on the right. Is there a simple way to achieve this? For reference, here is a link showing exactly how I envision it: Exam ...