Question

44

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

rated 0 times [ 45] [ 1] / answers: 1 / hits: 22383 / 11 Years ago, tue, september 3, 2013, 12:00:00

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

?>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ansleyk

Add To Favorites

Follow

Total Points: 42

Total Questions: 100

Total Answers: 83

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

ansleyk questions

1 How do I get uploaded image in next js and save it?

Fri, Jun 17, 22, 00:00, 2 Years ago

1 How can I send secure API requests from SvelteKit app, without showing API keys on the client side?

Mon, May 17, 21, 00:00, 3 Years ago

1 MUI Select component with custom children item

Sun, Apr 4, 21, 00:00, 3 Years ago

1 How to remove border of Material UI's DatePicker?

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Qr & Barcode Reader javascript documentation for html5

Wed, Dec 16, 20, 00:00, 4 Years ago

View All

answered 11 Years ago denis · Accepted Answer

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