i want to submit my contact from without page refresh

Question

i have a contact form in my website which sends email. i want it not to refresh page when submitted but do send email and success message. my form is like

<form method="post" id="contactform" enctype="multipart/form-data">
<input class="contactusfeild" style="width:222px;" name="sendername"  type="text" placeholder="Your Name" required>
<input class="contactusfeild" name="senderemail" style="width:222px;"  type="email" placeholder="Your Email" required >
<textarea name="sendermessage" class="contactusfeild" type="text" placeholder="Your Message Here" style="width:220px; max-width:220px; height:100px; max-height:100px; padding-top:10px;" required ></textarea>
<input  class="button"  style="border:none;" type="reset"  value="Clear" /><input  name="contactcozmuler" class="button" style="border:none; margin " type="submit"  id="submit_btn" value="Send" />
</form>

you haven't searched on SO properly. anyway try this https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form/1960245#1960245 — anurupr, Feb 15 '14 at 09:00
possible duplicate of [Submit a form without submit button and without page refresh?](http://stackoverflow.com/questions/12386999/submit-a-form-without-submit-button-and-without-page-refresh) — Satish Sharma, Feb 15 '14 at 09:02
You're going to have to use AJAX. Specifically, you need to make a POST request. Take a look at this answer: http://stackoverflow.com/a/1200312/1487730 — krisk, Feb 15 '14 at 09:04

score 0 · Answer 1 · answered Feb 15 '14 at 09:01

0

Use ajax post. See an example and jQuery docs: .post() , .ajax()

answered Feb 15 '14 at 09:01

melvas

2,346
25
29

score 0 · Answer 2 · answered Feb 15 '14 at 09:20

First things first.

You can not upload a file with ajax but if you will use 3rd party scripts for that.

You can submit a form without refreshing page easily using jQuery.

I'm writing this example to be clear for who searches this question.

If you want to all forms will use ajax to submit then you can only define 'form' tag as jquery selector.

<script type="text/javascript">

//Call Document load
$(function(){

    // Find form elements to use ajax with
    $targetForms = $('form.ajax'); // In here, we are selecting forms that only has ajax class

    // By using submit function, you can use html5 required validation.
    // If you want to on click with buttons, html5 validation will not work.
    $targetForms.submit(function(){
        var $this = $(this); // This is now your form element.

        $.ajax({
            url: $this.attr("action"), //Where do you want to make request?
            type: $this.attr("method"), //Which method will use for request POST or GET?
            dataType: "html",
            data: $this.serialize(), // Collect all form data
            beforeSend: function(){
                // You can define what will happen just when before request.
            },
            success: function(response){,
                /* Lets think here what we can return and which type data will be. 
                   For example if you will return a string and then dataType must be choose HTML. 
                   If message successfully sent to email or recorded to db, you can send here a string like "sent". 
                   Or if error occures, you can send here a string like "error". We will use this strings in this example.
                */

                if(response == "sent") {
                    // Animate your form to height:0 and show a div that have message for visitor.

                } else if(response == "error")) {
                    alert("Hey! Something bad happened!");
                }
            },
            error: function(){

            }
        });

        return false;
    });
});
</script>

i want to submit my contact from without page refresh

2 Answers2