Simple jQuery Ajax form with div creation upon data sent

Question

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>

don't think you need `input type='submit'`, just make it a regular button, then wire up the click event, and submit the form using `$.post`. don't do `.submit`. — RPM1984, Nov 03 '10 at 05:58
There are forms with the `` and without the click event. Which is why I'm trying to find out how this way works. — Tek, Nov 03 '10 at 06:24
Use jquery and do it in 2 lines. I'd post it as an answer, but people don't like it:P — naugtur, Nov 03 '10 at 10:27
I am using jquery in (almost) two lines. :P Except now I have changed my question to something else. (Read above) — Tek, Nov 03 '10 at 10:30

score 0 · Answer 1 · answered Nov 03 '10 at 06:04

0

You could try putting return false at the end of the function.

answered Nov 03 '10 at 06:04

aligray

2,812
4
26
35

I forgot to put that in my original code. Return false still doesn't make it asynchronous. It still posts. – Tek Nov 03 '10 at 06:08
Thanks, but I've edited my post now. I hope you don't mind reading my second request. :) – Tek Nov 03 '10 at 09:08

score 0 · Answer 2 · answered Nov 03 '10 at 07:06

0

Please try with the code.
Make changes in your html of the button

<input type="button" value="Submit Comment" id="buttonID"/>

 <script type="text/javascript">
    $(document).ready(function() {
         $('#buttonID').click(function() {
          $.post('url.php?id=1', function(data) {
                                alert(data);//data will be your response from server.
                            });
        });

        });

    </script>

Here we are going POST Method using Jquery. You can also find $.ajax() etc from http://jquery.com/ The button must be type input so the action will be at background. Pls try this

answered Nov 03 '10 at 07:06

kbvishnu

14,760
19
71
101

I need a form that will work even with Javascript disabled in case a user doesn't have javascript enabled on their browser. – Tek Nov 03 '10 at 07:25
AJAX stands for Asynchrouns Javascript and XML.So if your are disabling javascript, the whatever you written in javascript[Jquery atc] won't works.So you cannot do asynchronous requests to server.If you want user to perform some methods it must be synchronous.The page will be refreshed. – kbvishnu Nov 03 '10 at 07:37
That's not what I meant. What I meant is that I wanted it to work with regular synchronous $_POST via a form in case Javascript was disabled. – Tek Nov 03 '10 at 09:08

score 0 · Answer 3 · answered Nov 03 '10 at 11:30

0

<script type="text/javascript">
    $(document).ready(function(){
        $("input:submit").click(function(){
            $.ajax({
                url :$("form").attr('action'),
                type: "POST",
                data:"id=1",
                success : function(response){
                        $("#container").append("<div>"+response+"</div>");
                    }
            })
            return false;
        })
    });
</script>

if u need to work it when javascript is disabled. then u need to save the divisions created on the fly in some backend.If the conent is too short then u can try it saving in cookie

gud luck

answered Nov 03 '10 at 11:30

RSK

17,210
13
54
74

check this too. it may help http://stackoverflow.com/questions/1867098/javascript-creating-div-on-the-fly – RSK Nov 03 '10 at 11:32
Thanks, and I appreciate your suggestion. Except if you read my edit that is not the issue anymore. Plus, the code works asynchronously when javascript is turned on and synchronously when javascript is not enabled. It was all a matter of getting the right jquery code. – Tek Nov 03 '10 at 11:38
jquery code to submit asynchronously?? if yes have you tried this code??? i don't think the submit will work fine for you. i have tried and to submit. but failed then i went up with this. if u succeed with submit. please share the code. – RSK Nov 03 '10 at 11:44
Here is the code so you can see what I'm talking about. This works asynchronously when javascript is enabled. When javascript is disabled it should work as a normal form and submit the data synchronously. No need for extra javascript events. http://pastie.org/1269206 – Tek Nov 03 '10 at 11:52

score 0 · Accepted Answer · answered Nov 03 '10 at 16:06

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>

Simple jQuery Ajax form with div creation upon data sent

4 Answers4