Send input value to php using ajax with result printed to div

Question

I'm trying to send an input value to a php script and have the returned value posted to a div, using ajax, but I can't seem to get this right. Any help/suggestions would be appreciated. Thanks!!

This is what I have by now, but console says: "Failed to load resource: the server responded with a status of 404 (Not Found)".

test1.php:

<script>
$.ajax({
        type: 'POST', 
        url: 'test2.php',      
        data: {url: $('#id1').val()},         
        success: function (data)
        {
           $(document).ready(function(){$("#content").load("test2.php");});
        }
    });   
</script>

<form name="input">
<input type="text" id="id1">
<input type="submit">
</form>

<div id="content"></div>

test2.php:

<?php
$string=$_POST['id1'];
require_once('connect.php');
$inf = "SELECT * FROM `comments` WHERE date='$string'";
$info = mysql_query($inf);
while($info2 = mysql_fetch_object($info)) {echo $info2->username.$info2->date;}
?>

Are you sure that test2.php is in destined url?? Your error should probably be related to file misplacement. check it — Ganesh Babu
– Ganesh Babu, Commented Sep 3, 2013 at 13:07
Also check your test1.php file. It has no meaning. When will you be calling ajax function?? — Ganesh Babu
– Ganesh Babu, Commented Sep 3, 2013 at 13:10

Ben Fortune · Accepted Answer · 2013-09-03 13:16:30Z

3

<script>
    $(document).ready(function() {
        $('#submit').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'test2.php',
                data: {id1: $('#id1').val()},
                success: function(data)
                {
                    $("#content").html(data);
                }
            });
        });
    });
</script>

<form name="input">
    <input type="text" id="id1">
    <input type="submit" id="submit">
</form>

<div id="content"></div>

When you submit the ajax request, you're already submitting your content to test2.php, so you don't need to load it again. In the success function, you can append the result to the div from the callback.

edited Sep 3, 2013 at 13:16

answered Sep 3, 2013 at 13:04

Ben Fortune

32.2k10 gold badges82 silver badges82 bronze badges

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

4 Comments

user2743057 Over a year ago

Thanks for the reply. It still doesn't do anything when I press the submit button, which I believe to be the problem here.. I'm just not sure if I should add a post action pointing to test2 on it.

Novocaine Over a year ago

Add a DOM ready function around the jquery, and this is the right answer

Ben Fortune Over a year ago

Edited, the data: should contain your POST parameters.

Ganesh Babu Over a year ago

@user2743057 This script is correct. Check whether you have loaded jquery file. Also you have mentioned in your question that file is not found, which directly means, you have not placed your file in right location, or you have not given your url right. Check that..

Bhadra · Accepted Answer · 2013-09-03 13:12:07Z

0

    $(document).on('click','#submit',function(e) {
        e.preventDefault();
        $.post('test2.php',{url: $('#id1').val()},function(data){
            $("#content").html(data);
        }
       });
    });

answered Sep 3, 2013 at 13:12

Bhadra

2,1041 gold badge13 silver badges19 bronze badges

Comments

Michel Ayres · Accepted Answer · 2014-05-19 19:38:21Z

0

404 (Not Found) Error is for page not found. Please make sure that file test2.php is exist in same folder. Check url.

Also you can copy the URL from console and paste it in the browser URL to check the url correct or incorrect.

jQuery

<script>
    $(document).ready(function() {
        $('#submit').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'test2.php',
                data: {id1: $('#id1').val()},
                success: function(data)
                {
                    $("#content").html(data);
                }
            });
        });
    });
</script>

HTML

<form name="input">
    <input type="text" id="id1">
    <input type="submit" id="submit">
</form>

edited May 19, 2014 at 19:38

Michel Ayres

6,02511 gold badges67 silver badges97 bronze badges

answered Sep 3, 2013 at 13:21

Sujit Patil

1834 bronze badges

Comments

Michel Ayres · Accepted Answer · 2014-05-19 19:41:43Z

0

You could try this:

<script>
    $('#submitBtn').on('click',function(){
        $.ajax({
            type: 'POST', 
            url: 'test2.php',      
            data: {url: $('#id1').val()},         
            success: function (data)
            {
               $("#content").html(data);
            }
        });   
        return false;
    });
</script>

<form name="input">
    <input type="text" id="id1">
    <input id="submitBtn" type="submit">
</form>

<div id="content"></div>

edited May 19, 2014 at 19:41

Michel Ayres

6,02511 gold badges67 silver badges97 bronze badges

answered Sep 3, 2013 at 13:10

Liam Allan

1,1151 gold badge8 silver badges13 bronze badges

Collectives™ on Stack Overflow

Send input value to php using ajax with result printed to div

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related