Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>
    Last edited by Red Dragon; 09-09-2012 at 05:25 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,347
    Thanks
    23
    Thanked 618 Times in 617 Posts
    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 !!!

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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"]
    ?>

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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" />


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •