javascripthtml

How do I change the value of text field in wordpress contact form 7 using javascript

I'm trying to change/input the value of in wordpress contact form 7 using javascript. I found that the form id can be identified in 3 ways

<label> [text your-name id:poo] </label>

<label id="poo"> [text your-name] </label>

<label> [text your-name html_id:poo] </label>

In all three ways, i tried the javascript method

document.getElementById("poo").value = "Jonny"

but the javascript code doesn't seem to have any effect on the form when displayed on the webpage. Any idea on how i can go about this?

I also did place the code in the form editor field, if that is a wrong section to write the code which may be the cause of it not being executed, please specify. Thank you

Solution

  • I've been able to figure out a way to resolve it and i guessed posting it here might help.

    I checked the source code (ctrl + u) of the page where the contact form tag is located and I noticed that each tag is converted to an HTML language. E.g

    <label> <[text your_name id:poo ""] </label>

    this will be converted in the page and display in the source code as

    <input type="text" name="your_name" value="" id="poo" />

    So the javascript code does not have to be placed on the contact form editor. Rather, it should be place on the page where the contact form short code is located: below is an example of the short code

    [contact-form-7 id="289" title="Your contact form"]

    So in the page where the short code is located, you can now use;

    document.getElementById("poo").value = "jonny"

    This will alter the value of the text field within the label tag.