[Resolved] How to add cred form submit button using Javascript?

[Author]

Posts

[puneetS-3]

I had a requirement where I had to create a multi-step from for post form. I used JQuery(hidden link) to create that and I was successful in doing that. Now, I have to add the submit button which right now is here hidden link to here hidden link.

So I used the event provided by Jquery like this:

var shortCode = "<?php do_shortcode('[cred_field field=form_submit output=bootstrap value=Submit class=btn-lg]'); ?>";
$("#example-vertical").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical",
    enableFinishButton: false,
    enableAllSteps: true,
    onStepChanged: function (event, currentIndex, priorIndex) {
      if(currentIndex == 3){
        var list = document.querySelector("#example-vertical > div.actions.clearfix > ul");
       
        var entry = document.createElement('li');
		var g = document.createElement('div');

        entry.appendChild(g);
        g.id = 'someId';

        list.appendChild(entry);
        
        document.getElementById("someId").innerHTML = shortCode; 
        
      }
   } 
});

Everything works perfectly fine here. But when the element is rendered on the frontend it is converted into a comment. Look:

<li>
<div id="someId">
Add Shotcode
 <!--?php do_shortcode('[cred_field field=form_submit output=bootstrap value=Submit class=btn-lg]');?-->
</div>
</li>

How can I make it render to a button. Also If I just use this

var shortCode = "[cred_field field=form_submit output=bootstrap value=Submit class=btn-lg]" 

It is renders as it is, like a text.

I expect it to change into submit button.

[Beda]

Toolset Forms does not support MultiStep forms.
You would have to ask for it and add your voice to the request here https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Your approach to solving the challenge is new to me. Usually, we suggest solutions like these:
https://toolset.com/forums/topic/cred-with-multi-process-forms-and-more/#post-335164 https://toolset.com/forums/topic/user-multi-part-form/#post-337000
https://toolset.com/forums/topic/userpostmultiple-forms-on-the-same-page-conditional-display-of-user-fields/#post-402497

Other users also use this, hidden link

Now, I am a bit lost on the error you report, I have never in my life seen PHP or any code adding comments tags to code if there are none there in the source.
Usually, unless there is specific code adding it, well, the bits and bytes cannot just deliberately be added or removed by the code.

What also won't work is outputting the Forms ShortCode with attributes using do_shortcode, because of the repeated apostrophizing.
You may use https://toolset.com/forums/topic/cred-form-and-do_shortcode/page/2/#post-35181 (cred_form() method) directly.

But all this cannot be the cause for comment tags being added.
When you run into problems like this one, a good idea is to check your browser for JavaScript errors. Different browsers have different ways of showing this but look for a javascript console or something like that. Also, check the source of your page as viewed by the browser.
Any errors?

It is in any case, not a supported way of displaying forms and not an issue of Toolset, it's an issue of the code as if you'd replace the [cred_field field=form_submit output=bootstrap value=Submit class=btn-lg] in your code with [any-custom-shortcode] you'd have the same issue, is that correct?
I can in those cases only be of very limited assistance as it relates to custom code.

If possible, use any of the suggested methods, and request a MultiStep form feature from the Product Management as mentioned above.

Note, of course, if you do not open PHP comment and do not do_shortcode in the JS variable, how would the JS execute the PHP Code?
Note that this way of using PHP requires experience in coding, I would not suggest doing this, generally even.
Better is, to use JS as JS and PHP as PHP, not to mix the scripts so to say, or use localized functions, is another method.

Please let me know if all above the issue persists, and if you can find an error in the console.