I am trying to:
Hey there i want to trigger a Form Submit button, when another button is clicked. But i doesn´t get it to work.
the Cred Form Button has this id via the Chrome inspector: cred_form_82_2-submit-1-1567846056
my other button has this id: custom-submit
and my js code looks like this:
var customSubmit = document.getElementById("custom-submit");
var realSubmit = document.getElementById("cred_form_82_2-submit-1-1567844359");
//Function Button Click
customSubmit.addEventListener("click", function() {
realSubmit.click();
});
but this do not work. i console logged it an there is an error:
Uncaught TypeError: Cannot read property 'click' of null
you can see in the screenshot that the problem is the cred form button id.
hope you can help me out here.
thanks
Unfortunately, this falls under Custom Coding, something that I cannot support in the Forum, according to the Support guidelines (https://toolset.com/toolset-support-policy/).
I can, however, help you analyze the code and point to the directions to take.
For full customized code support, we can suggest contacting a Contractor, from https://toolset.com/contractors/
Related to the issue you report, "Cannot read property 'click' of null" means that the var realSubmit = document.getElementById("cred_form_82_2-submit-1-1567844359");
on which you measure the click event is not there (null)
As you surely noticed, the ID of the Button you use is dynamic.
There might be many forms on this page, this is why.
The Id's will change each time you load the form/page.
You'd need to get the button ID with some wildcards, https://stackoverflow.com/questions/1938294/select-div-using-wildcard-id, passing only a part of the ID (the post-form ID and "submit" part never changes).
At this point, you should then receive the expected data from the Button with the (dynamic) ID of cred_form_82_2-submit-1-DYNAMIC
Please let me know if this helps to resolve the problem.
Hey Beda thanks for your fast reply.
ok, but can i give the submit button a unique id by myself. I also tried the code to do this over the classname. but this doesn´t work, too.
cheers
No, the ID of the Forms Submit Button cannot be altered in the editor
As mentioned it depends on logics that make it dynamic because there may be many forms, even re-submitted forms.
You can though easily avoid troubles by using wildcards as above mentioned.
I am not saying that the code depends upon that ID, but that is surely the point to start, because that ID is dynamic, and you cannot receive anything from it, if not matching precisely.
The first step in resolving this is to match that ID.
I suggest starting with a simple console.log() of the data you want until you receive what you want.
Then, you can work on code that (maybe) alters the data, or interacts with it.
Only if the code getting data by ID is looking for possibly existing IDs you can expect any response from it, and given it's dynamic it requires some wildcards when listened (or addressed)
allright, i will take a look at this. but could you tell me please why i cannot work instead with the class here?
e.g. var x = document.getElementsByClassName("example");
Well, that code won't "not work".
It will, no matter what, return an HTMLCollection
See hidden link
A call to the right class (for example var x = document.getElementsByClassName("form-submit"); console.log(x);) will show the entire HTMLCollection for the elements with that class.
You can easily confirm that with the above code.
However, to click on a certain button with JS, when clicking on another button, related to Toolset Forms, I would do this below.
Assumed is a Form with ID 11, its submit button's HTML ID part cred_form_11_1-submit-1
var buttonToClick = jQuery("[id^=cred_form_11_1-submit-1-]");
//Whenever you require
buttonToClick.click();
So a completely working sample can be having a button like:
<button type="button" id="myTrigger">Click Me!</button>
And in a Toolset Form with ID 11 the following JS:
jQuery(document).on('cred_form_ready', function(){
var buttonToClick = jQuery("[id^=cred_form_11_1-submit-1-]");
//console.log(buttonToClick);
var buttonClicked = document.getElementById("myTrigger");
buttonClicked.onclick = function() {
buttonToClick.click();
};
});
Hey beda,
thanks for your help. This get me deeper in js and i do learn a lot out of it.
Unfortunately the code does not work it supposed to. Sometimes it works for the first try but then never again.
So i check the dynamic id of the toolset button again.
i saw that the id is till here static: <bold>cred_form_11_</bold> after that it changes everytime between 1 & 2.
the end again static <bold>-submit-1-</bold>
I know that ^ checks the beginning - * is looking after containing and $ searches the end.
So i tried instead
var buttonToClick = jQuery("[id*=-submit-1-]");
but this acts like your code
Can we try to combine the two?
This is what i have tried with no luck:
var buttonToClick = jQuery("[id^=cred_form_11_][id*=-submit-1-]");
cheers
id^
does check the beginning.
You can read up the different cards usage here: hidden link
This code works fine on a clean WordPress install, even if it is not a native feature of Toolset Forms.
I tried it several times locally.
It is however not subject to support, as we can only fully support native things in Toolset.
If the ID requires one less match than I provided, you can simply remove the trailing parts.
var buttonToClick = jQuery("[id^=cred_form_11_1-submit-]") will target any ID with that ID - there are many in a form, starting with it, but the root never changes.
On my local this root is the static one, it may be different on your install as you have another form, and maybe even more than one form or re-submitted it.
The code I provided will succesfully submit a vanilla Toolset Form on a vanilla WordPress install, it will hower eventually need customization and adapting to your current site.
Please let me know if you need further help with this.
My issue is resolved now. Thank you!
