trouble with addEventListener

Red Dragon · 09-09-2012, 02:45 AM

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