CODEWITHSUNDEEP
jqueryformswordpress
CaitlinHavener
CaitlinHavener

Reputation: 1418

attribute to change in a hidden input field jquery

I'm having trouble getting the value attribute to change in a hidden input field. I have a form with the following HTML:

<input type="hidden" name="caitlinisdabomb" id="caitlinisdabomb" value="no" />

and when I right click > view source the value has not changed. When the form is sent, the incorrect value is sent in the headers as well. console.log("im human " + document.getElementById("caitlinisdabomb").value) logs as "im human yes" as it should. What gives? Is it because of the dynamically generated form? All files here: alluringassets.com/slick-contact-forms.rar

console.log("I work");
            function markAsHuman() 
            {
                $('#caitlinisdabomb').val('yes');
                //document.getElementById("caitlinisdabomb").value = 1;
                console.log("im human " + document.getElementById("caitlinisdabomb").value);
            }


            $(".slick-form").on("focus", function()  {
                markAsHuman();
            });

            $(".slick-form").on("click", function()  {
                markAsHuman();
                console.log("you clicked");
            });

Upvotes: 0

Views: 133

Answers (1)

Pricey
Pricey

Reputation: 5929

When is the .slick-form element present? do you load it with the page or are you loading it asynchronously?

i.e. your example, doesn't wait for the DOM to be ready i.e. $(document).ready(function() { //look for elements in the dom structure });

so doing $(".slick-form") as soon as possible is probably too early... and you won't see a problem with that unless you stick a break point on that line in a debugger.

If your doing it async then you will need to apply the click event on the successful callback of that ajax function possibly..

Usually like this sort of thing:

$.ajax({
    type: "GET",
    url: '/blah',
    data: formData,
    success: function (data) {
        // the callback, add click event now that form will exist in DOM
    }
});

or think about other ways to achieve it such as this example:

jquery functions dont work on dom elements loaded asynchromously

Upvotes: 1

Related Questions