CODEWITHSUNDEEP
phpjavascriptjqueryajax
user2743057
user2743057

Reputation: 169

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

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

Upvotes: 4

Views: 22907

Answers (4)

Liam Allan
Liam Allan

Reputation: 1115

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>

Upvotes: 0

Sujit Patil
Sujit Patil

Reputation: 183

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>

Upvotes: 0

Ben Fortune
Ben Fortune

Reputation: 32118

<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.

Upvotes: 3

Bhadra
Bhadra

Reputation: 2104

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

Upvotes: 0

Related Questions