Forum

Thread tagged as: Question, Forms

Perch form in modal window - Success message

I have a perch form in a css-only (checkbox hack) modal window and it's working OK as expected. It seems that when the Submit button is clicked the page reloads in order to display the Success message, so the modal window loses its css 'checked' status and the message is hidden unless you click again on the button to display the form.

A possible way round this might be to have the Success text returned to a place outside of the divs that contain the modal and the form - would that be possible?

Also, tips for any other method welcome.
Peter Hammarling

Peter Hammarling 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

You could use JavaScript to submit the form and then update the content of the modal with the response from the JavaScript.
Peter Hammarling

Peter Hammarling 0 points

4 years ago

OK, I'll google this - I'm not good with js but I'll give it a go. But, just to be sure I understand: do you mean that I continue to use the Perch Forms form for the data, as it is now, but with js only for the Submit function (and to return some new text to the window with causing the page to reload) ?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

without causing the page to reload, yes.
Peter Hammarling

Peter Hammarling 0 points

4 years ago

woops, yes 'without'. I've seen that there's lots of stuff out there about submitting without page refresh.

Thanks for the pointer.
Peter Hammarling

Peter Hammarling 0 points

4 years ago

In case it's useful to anyone I'll post my own solution - there's an important snafu relevant to Perch users. Used some jQuery after the form and so after Submit the modal stays open, but hides the original form content and shows the success message:

<script>
$("#form1_contact-form").submit(function(e){
    e.preventDefault();
    $.ajax({
        type : 'POST',
        data: $("#form1_contact-form").serialize(),
        success : function(){
            $(".form-field, p.form-notes, p.success-message").toggleClass("hide-show 200");
        }
    });
    return false;
});
</script>

The ajax prevents the form from dismissing and prevents page reload after Submit and the css class '.hide-show' has display:none; as its only value.

'p.success-message' has '.hide-show' applied in page's initial state. So all default form content (divs with class .form-field and p.form-notes) are hidden after Submit and p.success-message is unhidden (this is not the message generated by perch: success).

The code wouldn't work for me until I noticed that Perch outputs a prefix on the form id (form1_), so the id in the original code was not the same as in the output page and the script was not targetting the correct id, so one must allow for that in the script.

I'm not a js coder and don't really understand what ajax is doing here, but it works. If there's a drawback to this method or a better way, please improve this.