form fields not getting posted to php file when using jquery

Question

I have an HTML file that has a form with two fields. These fields' value should be posted to a PHP and this PHP should be fetched from the HTML using JQuery. This is what I implemented.

My HTML file:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
           $("button").click(function(){
                $("#first").load("result_jquery.php");
            });
        });     

    </script>
</head>
<body>
    <div id="first"></div>
    <div>
        <form method="POST" id="myForm">
        Name: <input type="text" name="name"/><br/>
        Number: <input type="text" name="number"/><br/>
        <button>submit</button>
        </form>
    </div>
</body>

This is my result_jquery.php

<?php
$n = $_POST["name"];
echo "hello ".$n;
?>

When I click the submit button, the hello is getting printed. But the name is not getting printed. Can you please help me with this. I don't know where I am going wrong.

Have you tried `<input type='submit'/> instead of button? It doesn't look like it is actually sending the POST request. — Tyson of the Northwest
– Tyson of the Northwest, Commented Mar 28, 2013 at 19:55
You load the page, but never post any information to it in your Jquery. Look in to the JQuery $.post method. ^^ — Jon
– Jon, Commented Mar 28, 2013 at 19:59
yes I tried the submit. Its still not working. Actually I observed that even by removing the <form> tag, the result is the same. — honey
– honey, Commented Mar 28, 2013 at 19:59
I added the following. But it didnt work. `<script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ type: "POST", data : $(this).serialize(), cache: false, url: "result_jquery.php", }); $("#first").load("result_jquery.php"); }); }); </script> — honey
– honey, Commented Mar 28, 2013 at 20:14
i am sorry about the code indentation. i dont know why the newlines were not printed. I am new to stack overflow — honey
– honey, Commented Mar 28, 2013 at 20:14

Last Breath · Accepted Answer · 2013-03-28 21:02:03Z

2

I think that the use of the button element is the worry and the code that i will put now it is working properly as you need so try this and tell me the result :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function(){
       $("#button").click(function(){
            var n = $('[name="namee"]').val();
            var nb = $('[name="number"]').val();
            $("#first").load("result_jquery.php",{'namee':n,'number':nb},function(data){});
        });
    });     

</script>
</head>
<body>
    <div id="first"></div>
    <div>
        <form method="POST" id="myForm">
            Name: <input type="text" name="namee"/><br/>
            Number: <input type="text" name="number"/><br/>
            <input type="button" value="Submit" id="button" />
        </form>
    </div>
</body>
</html>

answered Mar 28, 2013 at 21:02

Last Breath

5302 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Last Breath Over a year ago

Great ! And my really thanks is that my solution work perfectly and as you need :) If you need any additional help just i am here :)

coder_ck · Accepted Answer · 2013-03-28 21:15:33Z

1

copy this code:

<script type="text/javascript">
$(document).ready(function() {
    $("#send").click(function() {
        $.ajax({ 
            type: "POST", 
            data : "name="+$( '#name' ).val(),
            url: "result_jquery.php", 
            success: function(msg) {
                $('#first').html(msg);
            }
        }); 
    });
});
</script>

change this in form

<form method="POST" id="myForm">
    Name: <input type="text" id="name" name="name"/><br/>
    Number: <input type="text" id="number" name="number"/><br/>
    <input type="button" id="send" value="Submit">
</form>

edited Mar 28, 2013 at 21:15

answered Mar 28, 2013 at 20:43

coder_ck

862 bronze badges

2 Comments

honey Over a year ago

I did that. But when I click the submit button, nothing is happening other than refresh and the field values are dissappearing( because of the refresh)

coder_ck Over a year ago

change <button id="send">submit</button> to <input type="button" id="send" value="Submit">

Last Breath · Accepted Answer · 2013-03-28 20:27:20Z

0

just try that and tell me the result :)

var n = $('[name="name"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'name':n,'number':nb},function(data){});

Note try to change the element name for the name field from "name" to "namee" and apply changes as needed look like this :

var n = $('[name="namee"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'namee':n,'number':nb},function(data){});

and the result_jquery.php file :

<?php
$n = $_POST["name"];
echo "hello ".$n;
?>

answered Mar 28, 2013 at 20:27

Last Breath

5302 silver badges12 bronze badges

1 Comment

honey Over a year ago

When i am using <form> tag, the php file is not getting loaded when I call with jquery. When I delete the <form> tag, its getting loaded. But the form fields are not getting passed. Can the <form> tage be used when using jquery?

Jeff Lambert · Accepted Answer · 2013-04-27 14:45:23Z

0

From the jQuery documentation on load:

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data. This means that most uses of the method can be quite simple:

You are performing a HTTP GET with that method, and not a POST.

My suggestion would be if you want to send an AJAX request to your server with information in it, get used to using the long form jQuery AJAX:

$.ajax({
    data: 'url=encoded&query=string&of=data&or=object',
    url: 'path/to/server/script.php',
    success: function( output ) {
        // Handle response here
    }
});

For more info, see jQuery documentation: http://api.jquery.com/jQuery.ajax/

edited Apr 27, 2013 at 14:45

answered Mar 28, 2013 at 20:02

Jeff Lambert

24.7k4 gold badges72 silver badges98 bronze badges

5 Comments

Jon Over a year ago

They are preforming a GET, but they also don't do anything with the form data in that method, so changing the PHP to $_GET won't help at all.

honey Over a year ago

I added the following. But it didnt work.

<script>             $(document).ready(function(){                $("button").click(function(){                    $.ajax({                                type: "POST", //                            data : $(this).serialize(),                             data : "name",                             cache: false,                               url: "result_jquery.php",                                });                        $("#first").load("result_jquery.php");                 });             });                           </script>

honey Over a year ago

i am sorry about the code indentation. i dont know why the newlines were not printed. I am new to stack overflow

honey Over a year ago

When i am using <form> tag, the php file is not getting loaded when I called with jquery. When I delete the <form> tag, its getting loaded. But the form fields are not getting passed.

Jeff Lambert Over a year ago

Your 'data' needs to be either a JSON object with the values pulled from your form elements or a URL Encoded query string (also with the data that you want to POST to the server)

Collectives™ on Stack Overflow

form fields not getting posted to php file when using jquery

4 Answers 4

1 Comment

2 Comments

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related