CODEWITHSUNDEEP
javascriptphpjqueryajax
Jeff
Jeff

Reputation: 11

Need to pass form var's from a php form to a html page. Ajax, Json, Jquery

I have a simple form ...

<form method="post" action="sendmail.php">

<input type="text" class="text" name="name" placeholder="Name" /></div>
<input type="text" class="text" name="email" placeholder="Email/></div>
<textarea name="message" placeholder="Message"></textarea>
<a href="#" class="button submit">Send Message</a>

Upon clicking the submit button, i need to send the 3 values to a HTML page. It must be a HTML page. Something like this...

<p>Name: {%name%}</p> //The  {% is just for illustration.
<p>EMail: {%email%}<p>
<p>Message: {%msg%}</p>

I don't care what technologies are needed to accomplish this, Ajax, Jquery, Json, etc. Please be very detailed in your response, especially if you are going to talk about array's, as I am just learning.

Thank you very much in advance.

I've been doing the research and believe that the below is the way too go, but I can't figure out how to make the values go to a different file. It works returning the values to its own page. I need them to go to a file "contents.html preferably, or contents.php.

    <html>
<head>
<script language="JavaScript" type="text/javascript">
function ajax_post(){
    // Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    var url = "contents.php";
    var fn = document.getElementById("name").value;
    var ln = document.getElementById("email").value;
    var mn = document.getElementById("message").value;
    var vars = "name="+fn+"&email="+ln+"&message="+mn;
    hr.open("POST", url, true);
    // Set content type header information for sending url encoded variables in 
    the   request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function() {
   if(hr.readyState == 4 && hr.status == 200) {
   var return_data = hr.responseText;
   document.getElementById("status").innerHTML = return_data;
   }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(vars); // Actually execute the request
    document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>

<h2>Ajax Post to PHP and Get Return Data</h2>
Your Name: <input id="name" name="name" type="text" /> 
<br /><br />
Your Email: <input id="email" name="email" type="text" />
<br /><br />
<textarea name="message" id="message" placeholder="Message"></textarea>
<br /><br />
<input name="myBtn" type="submit" value="Submit Data"onClick="javascript:ajax_post();">
<br /><br />
<div id="status"></div>
</body>
</html>

I get this in contents.php...

Values go here
[          ]
[          ]
[Submit Data]

Upvotes: 0

Views: 128

Answers (1)

Sivaguru
Sivaguru

Reputation: 57

Simply you can done this using PHP.

Already you mentioned sendmail.php in form action attribute. So just create one file named sendmail.php

In this file put below code

<p>Name: <?php echo $_POST['name']; ?></p> 
<p>EMail: <?php echo $_POST['email']; ?><p>
<p>Message: <?php echo $_POST['message']; ?></p>

And you need to change your send message button like this 

<button type="submit" class="button">Send Message</button>

Upvotes: 1

Related Questions