CodingForums.com - trouble with addEventListener

CodingForums.com (http://www.codingforums.com/index.php)

- Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)

- - trouble with addEventListener (http://www.codingforums.com/showthread.php?t=272618)

Red Dragon

09-09-2012 02:45 AM

trouble with addEventListener

I'm trying to gets this code to work so that when you click submit it will send whats in the textbox to the php script but its not sending the post request.

Code:

    <!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" />

                            <script type="text/javascript" src="test2.js"></script>

                            <link rel="stylesheet" type="text/css" href="test4.css" id="linkPage" />

                            <title>

                                    test site

                            </title>

           

                    </head>

                    <body>

            <div id="yourdivname">

            </div>

            <form action="" method="post">

                    <input type="text" id="mytextbox" />

                    <input type="submit" id="submit1" value="Send" />

            </form>

            <SCRIPT>

        var submit1 = document.getElementById('submit1');

                submit1.addEventListener("submit",function sendmessage (e) {

                var message = form.mytextbox.value;

                xhr.open("POST", "send.php");

                xhr.send(JSON.stringify(message));

                e.preventDefault()

                    },false);

            </SCRIPT>

     

    </html>

sunfighter

09-09-2012 06:05 PM

Try working with this:

Code:

<form action="" method="post" id="myform">  Add this ID

        <input type="text" id="mytextbox" />

        <input type="submit" id="submit1" value="Send" />

</form>





<script type="text/javascript">

var submit1 = document.getElementById('myform');  Change this !!!

Red Dragon

09-11-2012 01:04 AM

ok I got it to send the post request but the php script doesn't see the request. the dump from the $_POST is array(0) { }
here is the updated code

Code:

<!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" />

                        <script type="text/javascript" src="test2.js"></script>

                        <link rel="stylesheet" type="text/css" href="test4.css" id="linkPage" />

                        <title>

                                test site

                        </title>

        

                </head>

                <body>

        <div id="yourdivname">

        </div>

        <form action="" method="post" id="myform">

                <input type="text" id="mytextbox" />

                <input type="submit" id="submit1" value="Send" />

        </form>

        <script type="text/javascript">

var submit1 = document.getElementById('myform');

            submit1.addEventListener("submit",function sendmessage (e) {

            var xhr = new XMLHttpRequest

            xhr.open("POST", "send.php");

            xhr.send(new FormData(myform));

            submit1.reset();

            e.preventDefault()

                },false);

        </SCRIPT>



</html>

DaveyErwin

09-12-2012 01:45 PM

a few changes ....
(doesNot work with IE9 and below)

Code:

<!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" />

                        <script type="text/javascript" src="test2.js"></script>

                        <link rel="stylesheet" type="text/css" href="test4.css" id="linkPage" />

                        <title>

                                test site

                        </title>

        

                </head>

                <body>

        <div id="yourdivname">

        </div>

        <form action="" method="post" id="myform">

                <input type="text" name="mytextbox" />

                <input type="submit" id="submit1" value="Send" />

        </form>

        <script type="text/javascript">

var xhr = new XMLHttpRequest

var submit1 = document.getElementById('myform');

            submit1.addEventListener("submit",function sendmessage (e) {            

            xhr.open("POST", "send.php",false);

            xhr.send(new FormData(submit1));

            submit1.reset();

            e.preventDefault()

                alert(xhr.responseText)

},false);

        

        </SCRIPT>



</html>

send.php

PHP Code:


		
			
<?PHP

echo $_POST["mytextbox"]

?>

Red Dragon

09-12-2012 07:52 PM

I got it to work what one of the problems was that new FormData wasn't working so i use myFormData.append("message", message);

Code:

<!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" />

                        <script type="text/javascript" src="test2.js"></script>

                        <link rel="stylesheet" type="text/css" href="test4.css" id="linkPage" />

                        <title>

                                test site

                        </title>

        

                </head>

                <body>

        <div id="yourdivname">

        </div>

        <form action="" method="post" id="myform">

                <input type="text" id="mytextbox" />

                <input type="submit" id="submit1" value="Send" />

        </form>

        <script type="text/javascript">

var submit1 = document.getElementById('myform');

            submit1.addEventListener("submit",function sendmessage (e) {

            var message = myform.mytextbox.value;

            var myFormData = new FormData();

            myFormData.append("message", message);

            var xhr = new XMLHttpRequest

            xhr.open("POST", "send.php");

            xhr.send(myFormData);

            submit1.reset();

            e.preventDefault()

                },false);

        </SCRIPT>



</html>

DaveyErwin

09-12-2012 07:58 PM

here is why it doesn't work for you
but it does for me
<input type="text" id="mytextbox" />
should be
<input type="text" name="mytextbox" />

All times are GMT +1. The time now is 01:28 AM.