Displaying values in form fields when a specific class is present

Question

Displaying values in form fields when a specific class is present

Whenever I input and submit the form fields correctly using #submit_btn, my values disappear. However, when they are not valid, this issue does not occur. I attempted to address this problem 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();
    }
});

Unfortunately, the solution did not work as expected.

Update: #register serves as the parent element while .wpcf7-mail-sent-ok acts as its child.

Any suggestions or insights on how to resolve this issue?

javascript jquery html css wordpress

Answer 1

Answer №1

It seems like this solution will meet your needs:

$('#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();
    }
});

However, be cautious when using

$("#register .wpcf7-mail-sent-ok")

in conjunction with true since a DOM object is truthy but not strictly equal to true.

Answer 2

It seems like this solution will meet your needs:

$('#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();
    }
});

However, be cautious when using

$("#register .wpcf7-mail-sent-ok")

in conjunction with true since a DOM object is truthy but not strictly equal to true.

Answer 3

Answer №2

Give this a try:

$('#submit_btn').on('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 method is considered the correct way to check for the existence of an element, without the need for using " > 0" or "===".

Answer 4

Give this a try:

$('#submit_btn').on('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 method is considered the correct way to check for the existence of an element, without the need for using " > 0" or "===".

Answer 5

Answer №3

$('#submit_btn').click(function() {
    if($("#register").hasClass("wpcf7-mail-sent-ok") {
        $('#name-007').show();
        $('#email-007').show();
        $('#phone-007').show();
    }
});

Answer 6

$('#submit_btn').click(function() {
    if($("#register").hasClass("wpcf7-mail-sent-ok") {
        $('#name-007').show();
        $('#email-007').show();
        $('#phone-007').show();
    }
});

Displaying values in form fields when a specific class is present

Answer №1

Answer №2

Answer №3

Similar questions

Guide to sending checkbox data using jQuery AJAX

Tips for configuring identical libraries under different names

"Apple TV now features an iOS app that allows users to watch YouTube videos

Leveraging webpack2 for code splitting with the CommonsChunkPlugin

Using post to list Django form fields

Using update_user_meta() to delete a post - A step-by-step guide

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

A guide to configuring a non-linear step in the yAxis of Highcharts

Conflicting jQuery in Magento

Adjusting the space between div elements when resizing the window

Personalize your jQuery stack chart

Execute the onclick function of an element using JQuery in an ASP.NET application

What if there was a magical jQuery method that could automatically trigger a callback function? What could it possibly be named?

Struggling with implementing responsive mobile buttons that stack in a column? Here's the solution

Creating an HTML form that spans across multiple pages: Tips and tricks

Placing a FontAwesome icon alongside the navigation bar on the same line

Discovering the position of digits within a string using Javascript

sending a JSON array output to every individual <li> tag

Authentication using SPA RSA 2048 encryption technology

The function window.open has been disabled on codepen.io site