[Resolved] Submit Button Stopped Working

[Author]

Posts

[aaronM-9]

A simple form I recently created to add new posts has suddenly stopped working. The submit button cannot be clicked on. The form is called "Household-Term-Add" and can be found in the layout "Template-Households" under the third tab. Any reason why a form would suddenly stop working ? I will provide access to the site so you can take a closer look. Thanks.

- Aaron

[Luo Yang]

Dear Aaron,

The problem you mentioned above is abnormal, and I have tested it in your website:
hidden link

There should be some JS codes which is adding attribute "disable" attribute to the submit button, you can check it by view source code of the page:
view-source:hidden link
line 687:

<input type="submit" id="cred_form_198_1-submit-1-1521432597" name="form_submit_1" value="Submit" class="btn btn-primary btn-lg wpt-form-submit form-submit submit" />

But in my Chrome debug console, I can see the disable attribute in the submit button:

<input type="submit" id="cred_form_198_1-submit-1-1521432789" name="form_submit_1" value="Submit" class="waves-button-input" disabled="disabled" style="background-color:rgba(0,0,0,0);">

So it should JS problem, please try these:
1) deactivate other plugins and switch to wordpress default theme, and test again
2) If the problem is fixed, then activate other plugins one by one, try to locate the problem plugin/theme

[aaronM-9]

Thanks. Got it on the first try. I deactivated WpDataTables and the button started working right away. When I reactivated that plugin it was disabled again. That's a major bummer because I really wanted to use WpDataTables in my website (I don't think the Toolset suite has any way of doing in-line editing of data on the front-end. Do you have any suggestions on how to get this to work?

- Aaron

[aaronM-9]

PS - What's also strange is that the same exact form, but for editing (not adding), works just fine. In fact, to create the form I actually cloned it and then just changed it from Add Post to Edit Post. That form is "Household-Term-Edit".

[Luo Yang]

As you can see, it is a compatibility problem with the WpDataTables plugin, please provide a copy of your website, I need to duplicate same problem and debug it in my localhost, thanks

https://toolset.com/faq/provide-supporters-copy-site/

[Luo Yang]

Thanks for the details, I am downloading the files from your website, will feedback if there is anything found

[Luo Yang]

You can use custom JS codes to remove the attribute "disabled" of submit button, for example, edit the CRED form "Household-Term-Add", in section "Content", click "JS editor", add below JS codes:

jQuery(document).ready(function($){
    $('input.wpt-form-submit').removeAttr('disabled');
}); 

And test again.

More help:
hidden link

[aaronM-9]

Thanks - that's great. Before I implement, can you tell me what the repercussions would be, if any? I'm assuming that disable attribute is in there for a reason. Is there some functionality I might lose within Toolset by removing that attribute?

- Aaron

[Luo Yang]

It is WpDataTables plugin added the attribute "disabled", you can ask help from the plugin author of "WpDataTables", why it will take effect on other plugin(CRED form)

For the new question: Is there some functionality I might lose within Toolset by removing that attribute?
No, there isn't any function will lose

[aaronM-9]

I can confirm this corrected the problem and the submit button now works. The only weird thing still lingering is that the actual button itself is larger than normal. I noticed that on other forms and also when I disable wpDataTables that the button shrinks back to its normal size. Is it possible there is also a CSS conflict on the button size? This is not as big a deal for me but it would be nice to have everything consistent. Thanks again.

- Aaron

[Luo Yang]

For the new question:
Is it possible there is also a CSS conflict on the button size?
I think so, there are some CSS codes from wpDataTables which are taking effect on CRED submit button, same as above, you can setup some CSS code to override those settings, for example
CSS width property
hidden link
CSS height Property
hidden link

If you still need assistance for it, please create new thread for the new question, that will help other users to find the answers.

[aaronM-9]

Okay, thanks. I do see them as the same issue because the core of the problem is a conflict between Toolset and wpDataTables related to the form submit button, but I will keep tinkering with it and possibly open up a new thread if I can't figure it out. If I open a new thread, I will include a link to this one so other users can find their way to this as well.