Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

SkyLight's avatar

Single Input View Form - PHP & JS

Hello: I am new here, also new coding with PHP & js. I have almost finished a "single input view form" but when the form is submitted the success message is showing on another page (a blank page). I would like that the messages will show on the same page where the form is. I hope you can help me....Let me explain in detail:

HTML:

Submit Request Continue

stepsForm.js:

var theForm = document.getElementById( 'sc_contact_simform' ); new stepsForm( sc_contact_simform, { onSubmit : function( form ) { // hide form classie.addClass( theForm.querySelector( '.simform-inner' ), 'hide' );

                form.submit()
            
            }
        } );

include/contact-form.php:

0 likes
6 replies
SkyLight's avatar

Thank you for the response, but Sorry, this video has nothing to do with my question...

Please, somebody can help me? I had to deliver this project last week and I am serious behind...

InaniELHoussain's avatar

@SkyLight you have to use AJAX's calls. why I sent you the video? it shows how to handle the request and make a single page submit.

SkyLight's avatar

Thank you for the video, but the page where this code goes is pretty large and have a lot of more features, like sliders, carousels, etc.

at this point, I can not create a single page only for this.

I am new and I have no idea how to make AJAX's calls, Can you point me in the right direction?

SkyLight's avatar

Thank you, but I can't make it work.

How to make these lines works?

document.theForm.action="/include/request-form.php";

document.theForm.submit();

See the script below:

var theForm = document.getElementById( 'sc_contact_simform' );

        new stepsForm( sc_contact_simform, {

            onSubmit : function( form ) {

                // hide form

                classie.addClass( theForm.querySelector( '.simform-inner' ), 'hide' );      

                var messageEl = theForm.querySelector( '.final-message' );

                messageEl.innerHTML = 'Your request was successfully sent, Thanks!. We will contact you soon.';

                classie.addClass( messageEl, 'show' );  
    
                ***** everything above works fine *****

                document.theForm.action="/include/request-form.php";

                    document.theForm.submit();

                
            }
        } );

I really appreciate any help!

Please or to participate in this conversation.