CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Muhammad Arslan Jamshaid
Muhammad Arslan Jamshaid

Reputation: 1197

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

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);
?>

Upvotes: 5

Views: 42881

Answers (5)

Dimag Kharab
Dimag Kharab

Reputation: 4519

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);

                    }

            });
        });
    });

Upvotes: 14

Archytas60
Archytas60

Reputation: 11

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>

Upvotes: 0

Tuhin
Tuhin

Reputation: 3373

 $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

Upvotes: 3

Sridhar R
Sridhar R

Reputation: 20418

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);

                    }

            });
        });
    });

Upvotes: 0

Romko
Romko

Reputation: 1798

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

change to

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

Upvotes: 0

Related Questions