don't want to load the page on form submission

Question

I have simple question. I don't want to load the page on form submission. I just want to click on the button and It will display success text but without loading the page.

My Form Code:

     <form method="post" id="requestForm" action="#">
                    <div class="col-sm-2 form-title">
                        request a service
                    </div>
                    <div class="col-sm-8">
                        <div class="col-sm-4">
                            <input type="text" name="fname" placeholder="First Name *" required/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" name="lname" placeholder="Last Name *" required/>
                        </div>
                        <div class="col-sm-4">
                            <input type="email" name="email" placeholder="Your E-mail *" required/>
                        </div>
                        <div class="col-sm-4">
                            <input type="tel" name="phone" placeholder="Contact Number *" required/>
                        </div>
                        <div class="col-sm-8 problem">
                            <input type="text" name="problem" placeholder="Description *"  required/>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="submit" class="col-sm-11">request service</button>
                        <input type="hidden" name="task" value="consultation">
                        <input type="hidden" name="ref" value=""/>
                    </div>
                </form>

and My JQuery is:

<script type="text/javascript">
        $('#requestForm').submit(function () {
         sendContactForm();
         return false;
        });
    </script>

Help Me Thanks

It is likely that `sendContactForm()` is the one that's submitting the form, as its name suggests. You'll have to show that function if you want an answer. — JJJ, Jul 14 '15 at 21:53
So do you want it to load the sendcontactform method or do you want it to just alert the user of some text? — code, Jul 14 '15 at 21:53
Its not coded yet and the action="#" but how to I want to avoid the page reloading on submitting the form — qarar, Jul 14 '15 at 22:06
If you dont want the page to reload why not an ajax call to the server....It doesnt refresh the page and it will go to whatever controller you want — code, Jul 14 '15 at 22:12
lots of tutorials around on how to submit forms with ajax ... which is exactly what you are describing and what `sendContactForm()` needs to do — charlietfl, Jul 14 '15 at 22:26

score 0 · Answer 1 · answered Jul 14 '15 at 22:30

There are several problems with the code you provided. For one, you did not specify what the sendContactForm() function does. If it doesn't exist elsewhere, this won't do anything. I also don't see an element where you could place your message in a meaningful way. It's also better to specify the URL you want to POST your data to in the action attribute of the form, this way, if your users disabled JavaScript, the form will still work, and you can return the page from the server with the message in place. AJAX is nice, but it's horrible if things don't work.

Since you appear to be using jQuery, might I suggest you try this for your script block:

$("#requestForm").submit(function(e) {

    e.preventDefault();

    $.ajax({
           type: $('#requestForm').attr('method'),
           url: $('#requestForm').attr('action'),
           data: new FormData($('#requestForm').first()),
           success: function(data, textStatus, jqXHR)
           {
               alert(data); // show response
           },
           error: function(jqXHR, textStatus, errorThrown)
           {
               alert('The server returned an error: ' + textStatus + ' ' + errorThrown);
           }
         });

    return false;
});

Please be aware that the FormData() object may not be available in older browsers. https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility You may need to construct this manually, look into serializing to JSON (and deserialization on the server), or, for other solutions not as specific to your thing, try looking at this Question: jQuery AJAX submit form

score 0 · Answer 2 · answered Jul 14 '15 at 22:39

I assume you want to use sendContactForm for sending your form data to server, and its yet to be coded. You can write something similar for your sendContactForm()

function sendContactForm() {
    $.ajax({type:'POST', url: 'myserver.php', data:$('#requestForm').serialize(), success: function(response) {
        $('#requestForm').find('.form_result').html(response);
    }});

    return false;
}

http://www.jstiles.com/Blog/How-To-Submit-a-Form-with-jQuery-and-AJAX for more info.

don't want to load the page on form submission

2 Answers2