Home/ Questions/Q 3331204
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T23:33:45+00:00

Edit: Originally I had a simple form Ajax script that wasn’t working, turns out

  • 0

Edit: Originally I had a simple form Ajax script that wasn’t working, turns out it was an extra bracket somewhere.

I have changed my question to the following:

1.)What I’d like to know is that how can I create an extra div to appear every time a value is sent? Of course, without changing the whole content inside the container and also preserving previous divs that were already created by the same mechanism.

2.)I’m going to cleanse input on the server. What would I echo server-side? Just the sanitized data or the sanitized data inside a div aka <div>$sanitizeddata</div>?

Scroll to see the html visual of what I mean.

Note: I didn’t want to start another question with the same code so I just edited my question accordingly after figuring out what was wrong with it. (My apologies to the previous repliers, but no one seemed to have caught the error! :P)

<script type="text/javascript">

$(document).ready(function()
{
    $("#testform").submit(function(e)
        {
            $.post("1.php", $(this).serialize(),function(data)
            {
             $('.result').html(data);});
              e.preventDefault();
                });
}); 
</script>

<div id="container" class="result">

<div><p>Some content 1</p></div>

<div><p>Some content 2</p></div>

<div><p>Some content 3</p></div>

//A new DIV is created with callback data (sanitized input) every time something is submitted
by the form.
<div></div>

//A new DIV is created with callback data (sanitized input) every time something is
submitted by the form while preserving previous DIVs already created by Javascript.
<div></div>

<div>
<form id="testform" action="1.php" method="post"> 
Number: <input type="text" name="num" /> 
<input type="submit" value="Submit Comment" /> 
</form>
</div>

</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So it seems you want the page to work in either js enable or not.

    Try this.

    If I was you, I would rethink my design I would break the code up into separate files. This is really a spaghetti design.

    <?php
if (array_key_exists('js', $_POST)) {
    $js = $_POST['js'];

    if (array_key_exists('num', $_POST)) {
        $num = $_POST['num'];
        echo "<div>$num</div>";
        exit();
    }
}
?>
<!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>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <!--    <script type="text/javascript" src="./jquery.form.js"></script>-->
    <script type="text/javascript">
        $(document).ready(function() {
            $("#testform").submit(function() {
                var serialized = $(this).serialize() + '&js=1';

                $.post("1.php", serialized, function(data) {
                    $('.result').append(data);
                });

                $('#number_input').val('');

                return false;
            });
        });
    </script>
</head>

<body>
<div class="result">
    <?php
    session_start();
    if (array_key_exists('num', $_POST)) {
        $numbers = array();
        if(array_key_exists('numbers', $_SESSION)) {
            $numbers = $_SESSION['numbers'];
        }
        $numbers[] = $_POST['num'];

        foreach($numbers as $num) {
            echo "<div>$num</div>";
        }

        $_SESSION['numbers'] = $numbers;
    }
    else {
        $_SESSION['numbers'] = array();
    }
    ?>
</div>
<div>
    <form id="testform" action="1.php" method="post">
        <label for="number_input">Number: </label><input id="number_input" type="text" name="num"/>
        <input type="submit" value="Submit Comment"/>
    </form>
</div>
</body>
</html>
    • 0