Reputation: 23

How do I POST multiple form data to PHP

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>TEST</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)

I tried How to pass multiple values from ajax to php file But that did not help.

Upvotes: 0

Answers (3)

michalh

Reputation: 2997

I would suggest sending a JSON object extracted from your form to be accessed by the PHP script... In the PHP script create a PHP class instance or an indexed array from this JSON using this function http://php.net/manual/en/function.json-decode.php

To serialize form to a JSON in javascript client side you can use this http://api.jquery.com/serializearray/

And if I might give an advice, skip using xhr directly... use the jQuery ajax wrapper... it will ensure running on all major browsers the same way without hassle

Upvotes: 1

Krab

Reputation: 6756

You just need to format those data according to application/x-www-form-urlencoded.

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 ;

var data = ([data_first, data_last, data_email, data_company, data_phone, data_message]).join('&');

alert(data_first);

     xhr.open("POST", "mailer.php", true);
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xhr.setRequestHeader("Content-length", data.length);

     xhr.send(data);
}

Upvotes: 0

Jack

Reputation: 302

As easy as add a return false; to your gogosend function

( the form submission requires a return false; at the end to stay on the page, btw the data is allready submitted to mailer.php )

Voilà :)

Upvotes: 0

How do I POST multiple form data to PHP

Answers (3)

Related Questions