Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Send data using javascript into PHP

php javascript

Best Answer Alexander, 24 August 2014 - 02:42 PM

What you are doing, at the moment of hitting submit, is instructing your browser to break from the current page (and anything client-side) and send POST data to itself (as there is no action, and your method is already set up as POST)

 

This means that your browser will not wait for any Javascript to complete, as it is not blocking the browser from sending the requst and, and the server then spitting out a further page telling you what data was received with var_dump. Your mailer.php is never requested, nor is putting out any data to the screen, because the Javascript to call it never runs.

 

Try changing your button type to button instead of submit, so the page will not fail to send the data asynchronously while your browser makes a POST request to the current page.

 

You may as well get rid of action="POST", as this is information for the browser to use the form with the submit type button and has nothing to do with Javascript's request, which you define as using POST already within xhr.open("POST" [...]

 

Please let me know if I can clarify.

 

Alexander.

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
2 replies to this topic

#1 jeanna9b

jeanna9b

    CC Newcomer

  • Member
  • PipPip
  • 14 posts

Posted 24 August 2014 - 10:35 AM

I am trying to send data from a form into a php for it then to write it into a html, without loading into onto php file page. The var_dump shows the data is ready, it somehow just doesn't want to pass over to the php...

<!DOCTYPE html>

<html lang="en">

<head>

<title>TESTER</title>

<meta charset="UTF-8" content="bla bla bla">

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

<script type="text/javascript" language="javascript">$(function(){$('body').on('click', 'input.sumbit', function(){gogosend();});});</script>

</head>

<body>

    <form method="post">
            <ul class="form">               
                <li class="short">
                    <label>First Name<span class="required"></span></label>
                    <input type="text" name="first" id="first"/>
                </li>

                <li class="short">
                    <label>Last Name<span class="required"></span></label>
                    <input type="text" name="last" id="last" />
                </li>

                <li class="long">
                    <label>Email Address<span class="required"></span></label>                  
                    <input type="text" name="email" id="email"/>
                </li>

                <li class="short">
                    <label>Company Name</label>
                    <input type="text" name="company" id="company"/>
                </li>

                <li class="short">
                    <label>Telephone Number</label>
                    <input type="text" name="phone" id="phone" />
                </li>

                <li class="textarea">
                    <label>Message<span class="required"></span></label>
                    <textarea name="message" id="message" rows="20" cols="30"></textarea>
                </li>

                <li class="button">
                    <input class="sumbit" name="sumbit" id="sumbit" value="Submit" type="submit" />
                </li>
    </form>
    
    
<script>
function gogosend()

{
var dfirs = document.getElementById("first").value;
var dlast = document.getElementById("last").value;
var demai = document.getElementById("email").value;
var dcomp = document.getElementById("company").value;
var dphon = document.getElementById("phone").value;
var dmess = document.getElementById("message").value;

alert(dfirs);

var xhr;
 if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data_first = "first=" +dfirs ;
var data_last = "last=" +dlast ;
var data_email = "email=" +demai ;
var data_company = "company=" +dcomp ;
var data_phone = "phone=" +dphon ;
var data_message = "message=" +dmess ;

alert(data_first);

     xhr.open("POST", "mailer.php", true);
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
     xhr.send(data_first);
     xhr.send(data_last);
     xhr.send(data_email);
     xhr.send(data_company);
     xhr.send(data_phone);
     xhr.send(data_message);
}
</script>

<?php
var_dump($_POST);
echo "</br>";
?>

</body>
</html>

And here is the php file code :

<?php
$first = $_POST["first"];
$last = $_POST["last"];
$email = $_POST["email"];
$company = $_POST["company"];
$phone = $_POST["phone"];
$message = $_POST["message"];
$text = "NAME: $first    $last <br>
 EMAIL: $email<br>
 COMPANY: $company<br>
 TELEPHONE NUMBER: $phone<br>    
 MESSAGE: $message<br><hr><br><br><br>";
 $file = fopen("contactrequests.html","a+");
 fwrite($file, $text);
 fclose($file);
?>

How do I rewrite the above for it to work ? For example now it gives me the var_dump for random data that I entered :

array (size=7)
  'first' => string '24' (length=2)
  'last' => string '225' (length=3)
  'email' => string '25g2' (length=4)
  'company' => string '2d5' (length=3)
  'phone' => string '2d5' (length=3)
  'message' => string '2d5' (length=3)
  'sumbit' => string 'Submit' (length=6)



 


Edited by jeanna9b, 24 August 2014 - 10:37 AM.


#2 Alexander

Alexander

    YOL9

  • Moderator
  • 3963 posts

Posted 24 August 2014 - 02:42 PM   Best Answer

What you are doing, at the moment of hitting submit, is instructing your browser to break from the current page (and anything client-side) and send POST data to itself (as there is no action, and your method is already set up as POST)

 

This means that your browser will not wait for any Javascript to complete, as it is not blocking the browser from sending the requst and, and the server then spitting out a further page telling you what data was received with var_dump. Your mailer.php is never requested, nor is putting out any data to the screen, because the Javascript to call it never runs.

 

Try changing your button type to button instead of submit, so the page will not fail to send the data asynchronously while your browser makes a POST request to the current page.

 

You may as well get rid of action="POST", as this is information for the browser to use the form with the submit type button and has nothing to do with Javascript's request, which you define as using POST already within xhr.open("POST" [...]

 

Please let me know if I can clarify.

 

Alexander.


Edited by Alexander, 24 August 2014 - 02:44 PM.

All new problems require investigation, and so if errors are problems, try to learn as much as you can and report back.


#3 jeanna9b

jeanna9b

    CC Newcomer

  • Member
  • PipPip
  • 14 posts

Posted 24 August 2014 - 03:15 PM

@Alexander : That worked perfecly, many thanks ! I also understand what you meant, thanks for explaining.






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download