如何从javascript访问表单数据

Question

I am a javascript newb so any help on this matter would be appreciated!

I am trying to get the user submitted data back after submission. I have a javascript function that replaces one form with another. A kind stackoverflow user helped me create this function.

function Vanish(event) {

event.preventDefault();

// Specify the id of the form.
var IDofForm = "quest";

// Specify the id of the div containing the form.
var IDofDivWithForm = "question";

// Specify the id of the div with the content to replace the form with.
var IDforReplacement = "entryform";

if(document.getElementById(IDofDivWithForm).innerHTML = document.getElementById(IDforReplacement).innerHTML){
 return true;
 }
 else{
 return false;
 }
 }

Then I have my forms :

<div id="question">
<form action="" method="POST" name="quest" id="quest" onsubmit="Vanish(event)">
<textarea name="question" class="question-field" placeholder="Ask your question..."></textarea><br><br>
<input type="submit" name="qsubmit" onclick=" Change();">
<!-- Change() only swaps images on the screen-->
</form>

</div>

<!-- Vanishing Form -->
<div id="entryform" style="display:none;">
<form action="" method="POST" id="email">
<input type="text" name="fName" placeholder="First Name" class="forms" value="<?echo $_POST['question'];?>">
</br>
<input type="text" name="sName" placeholder="Second Name" class="forms">
</br>
<input type="text" name="email" placeholder="Email" class="forms">
</br>
<input type="image" src="images/submit.png" name="esubmit" onclick="submitForm()">
</br>
</div>

As you can see from above I have two forms. the entry form replaces the question form after it has been submitted. My question today is how do I get the entered data? I prefer php as I understand it more so if there was a php method to this that would be great however all solutions will be helpful!.

For PHP I have tried using the $_REQUEST and $_POST methods to try and get back the data but it does not work. My forms all submit to the page they are on.

Answer 1

First of all JavaScript is client side programming language so to get data to server you need to make a http/https request to server and send/receive data

Good read What is the difference between client-side and server-side programming?

and to do that you can either use html Form or ajax

1. Form

In form you simply send data to url in action ( if no url specified it will make request to current page else specified action url)

1. Ajax

you can send data using ajax for that you just need to make ajax request like below (i highly recommended to use JavaScript ( but if you are good at JavaScript that you can use Jquery framework too )

var yourFormId = document.getElementById("email");

email.onsumbit = function(e){

   e.preventDefault();

   var formData = new FormData(yourFormId );
   var request = new XMLHttpRequest();
   request.open("POST", "your-url");
   request.send(formData);
}

// here by formData object you can get all data in single code of line

and to do with jquery see this post it has very simple example jQuery Ajax POST example with PHP

---

Now couple of good Reads

1. FormData Objects
2. Ajax : MDN its really good source