submitting html form via jquery ajax() and serialize()

Question

I want to submit this form via jquery ajax, this is what I have made and it is not working. i.e. Form is submitting with page refresh and I am not seeing the response i.e. printing array on the same page.

HTML

  <link rel='stylesheet' type='text/css' href='css/pepper-grinder/jquery-ui-1.10.4.custom.css' />
    <script  type='text/javascript' src='js/jquery-1.10.2.js' ></script>
    <script  type='text/javascript' src='js/jquery-ui-1.10.4.custom.min.js' ></script>
        <form  id="form1" method="get" action="submit.php   ">
            <label>Name of Organization</label>
            <input type="text" name="OrgName" id="OrgName" class="textfield">
            <label>Address of Organization</label>
            <input type="text" name="OrgAddress" id="OrgAddress" class="textfield">
            <input type="submit" value="Register Organization">
        </form>
        <div id="response">ads</div>

    <script>
    $document.ready(function(){
        $("#form1").click((function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });
    </script>

PHP (submit.php)

<?php
print_r($_GET);
?>

Try using .serializeArray() , https://api.jquery.com/serializeArray/ — Dimag Kharab, Apr 09 '14 at 11:51
Just a note: if you want to send the values of the form through an `ajax` request, you can remove the `action="submit.php"` property/value inside the element `form`. — dbf, Apr 09 '14 at 11:56
@Programer The answer given by CodingArt is not the correct answer, It doesn't even solve the problem you explain in the answer. A click event on `#form1` element doesn't do anything. — dbf, Apr 10 '14 at 09:06

score 14 · Accepted Answer · edited Feb 17 '17 at 20:52

14

Use this - there have been a few syntax errors and the event has to be submit

 $(function(){
        $("#form1").submit(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

edited Feb 17 '17 at 20:52

awenkhh

5,811
1
21
24

answered Apr 09 '14 at 11:57

Dimag Kharab

4,439
1
24
45

1

like **click((** <-- DOUBLE PARENTHESISC & **$document** – Dimag Kharab Apr 09 '14 at 11:59
1

Yea don't *comment* the _problems_ in the code, it belongs in the *answer* – dbf Apr 09 '14 at 12:01
@dbf SORRY MATE KINDA BUSY – Dimag Kharab Apr 09 '14 at 12:04

Tuhin · Answer 2 · 2014-04-09T12:05:08.433

3

 $document.ready(function(){

        $("#form1 input[type='submit']").click(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

I your code $("#form1").click(.... does not have any meaning here... You want the event handler when you press the submit button. So I think If you take appropriate the selector then It might work perfectly

edited Apr 09 '14 at 12:05

answered Apr 09 '14 at 11:59

Tuhin

3,335
2
16
27

Bingo, now a bit of explanation? :) (and edit the explanation in your answer, not as a comment) – dbf Apr 09 '14 at 12:00
yaa sure..$("#form1").click(.... does not have any meaning here... You want the event handler when you press the submit button. So I think If you take appropriate the selector then It might work perfectly – Tuhin Apr 09 '14 at 12:03
1

One small error still though, `$document.ready` should be `$(document).ready` or just replace `document.ready` with the jQuery shortcut `$`. – dbf Apr 10 '14 at 09:05

score 0 · Answer 3 · answered Apr 09 '14 at 11:53

0

$("#form1").click((function(event){

change to

$("#form1").submit((function(event){

answered Apr 09 '14 at 11:53

Romko

1,808
21
27

score 0 · Answer 4 · answered Apr 09 '14 at 11:53

0

Error in function $(document).ready(function()

Try this

$(document).ready(function(){
        $("#form1").submit(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

answered Apr 09 '14 at 11:53

Sridhar R

20,190
6
38
35

Tried $(document) also changed click() to submit() but still no avail – Muhammad Arslan Jamshaid Apr 09 '14 at 11:57
@Programer what problem now you have remove form action attribute in html form – Sridhar R Apr 09 '14 at 12:05
1

The response of @codingAnt works thats all i know :) – Muhammad Arslan Jamshaid Apr 09 '14 at 12:07

Archytas60 · Answer 5 · 2014-04-09T12:14:04.403

0

2 remarks :

the submit function needs to return false to stop the normal post you can use the onsubmit attribtue in form instead of ready etc, like this

<form onsubmit="$.ajax({url:'submit.php', type:'GET',data:$(this).serialize(), success:function(result){$("#response").text(result);});return false;" id="form1" method="get" action>

edited Apr 09 '14 at 12:14

answered Apr 09 '14 at 11:57

Archytas60

11
2

submitting html form via jquery ajax() and serialize()

5 Answers5

Linked