[Resolved] cred_submit_complete to prevent bootstrap modal window from closing

[Author]

Posts

[dianaM-4]

I am trying to prevent my bootstrap modal window from closing after submitting a CRED-form. I'm showing a message after submitting the form, but this message is displaying in the modal window, where my form is in. And this modal window is closed after submitting. So my users can't see the success-message.

Is there a way to open the same modal window again, after submitting the form.?Perhaps via the "cred_submit_complete"-hook? Or to override the target-div-id for the message?

After submitting the form, I find this url-param:

?_tt=1461828724&_success_message=298_2&_target=463#cred_form_298_2

So there should be a way to override the target of the message, shouldn't it?

[Beda]

A modal by Bootstrap is loaded via JS, and reloading a page will close this, as the Modal is not triggered.

I rather suggest a much simpler approach, which is in my opinion also better so to avoid ID conflicts with different modals on the same page.

To achieve this, please code your CRED Form to provide the Modal, instead of inserting the Modal in a page/post and then the CRED Form IN the Modal content.

So at the end of this process, your CRED Form looks as this:

[credform class='cred-form cred-keep-original']
  [cred_field field='form_messages' value='']

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        //here all CRED Fields are inserted 
        [cred_field field='form_submit' value='Submit' urlparam='']
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
[/credform]

Mind the details.

I inserted the CRED Mandatory codes, such as

[credform class='cred-form cred-keep-original']
  [cred_field field='form_messages' value='']
[/credform]

OUTSIDE the modal, to ensure the message is also displayed OUTSIDE the modal.

the Submit Button could of course be placed at the native Bootstrap "Save changes" position.

This will allow the CRED to be edited in a Modal but display the success "on page"

Thank you

[dianaM-4]

Thank you so much, Beda!
That was exactly, what I needed! I was looking for a solution on my own for days now. You made me really happy on this busy sunday! 🙂

(By the way: I indeed have different modals on my page - many of them from the same cred-form producing children posts. But I'm rendering the id of the modal with "#mymodal[wpv-post-id]". So that still works great ...)

[dianaM-4]

Just for those, who are landing in this thread because of a similar problem: I found a way to display the modal with CREDs success-message, after loading the page, by placing this jQuery-code anywhere outside the CRED-form (for example in the content-template of the modal-window):

jQuery(document).ready(function ($) { 
  if(window.location.href.indexOf("793_1") > -1 ) {
      jQuery('#MYMODAL').modal();
  };
});

793_1 should be replaced with your CREDs-ID (as it is shown in the url-parameter after submitting the form) and #MYMODAL with the ID of your modal-window, which displays the success-message.

[stuart]

Awesome - this worked for me... 🙂 thanks