How to access form data from 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.

Post full code.. Only javascript doesn't say anything.. + only use preventDefault, if it needs to be, so first check if checks fail, then prevent, else just pass.. — Naruto
– Naruto, Commented Mar 23, 2015 at 9:44
@Naruto I have edited the code to add in the forms :) hopefully that helps. I dont fully understand what check is being done. I have an IF around the document.get..etc just to see if thats done otherwise return false — DetectiveClarke
– DetectiveClarke, Commented Mar 23, 2015 at 9:49
your question is vague though there are couple of way to do ... 1. you can send data by form like normally we do , 2. send data by Ajax 3. make a link with parameter and get data by $_GET in php — Mayank K. Swami
– Mayank K. Swami, Commented Mar 23, 2015 at 9:50
@NullPoiиteя Im trying to do it using a form as I have no experience with ajax. would ajax be a better solution? — DetectiveClarke
– DetectiveClarke, Commented Mar 23, 2015 at 9:53
well it depends, if you want to send data without reloading the page than ajax is way to go .. and if you want to redirect after getting value that you can use form — Mayank K. Swami
– Mayank K. Swami, Commented Mar 23, 2015 at 9:53

Community · Accepted Answer · 2017-05-23 10:10:04Z

2

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

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)

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

FormData Objects
Ajax : MDN its really good source

edited May 23, 2017 at 10:10

CommunityBot

11 silver badge

answered Mar 23, 2015 at 10:03

Mayank K. Swami

57.3k23 gold badges130 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dwza Over a year ago

Additional information you might add to your answere: Op should always trie to denie mixing server side languages with client side languages. This makes the source more readable and structured!

DetectiveClarke Over a year ago

im trying to use forms that send data to their current page. Sadly I dont fully understand jQuery either so I think I will try the ajax solution. So how do I incorporate those lines of ajax code in my javascript function? here is a link to a code share : codeshare.io/PETYl

Dwza Over a year ago

jquery is very easy! just bind the file into your source with <scritp src="myjquery.js"></script> than start your "javascript" (whats actually contains jquery) with $(document).ready(function(){ ... }); everything you call at ... will be fired after page is completely load. Using jquery makes your life easyer. Sending post in jquery is $.post("myFile.php",{data: formDataAsAnArray}).done(function(response){ console.log(response)});

Mayank K. Swami Over a year ago

come on PHP and JavaScript are tow different things and work on different places you can not do the things of PHP by JavaScript( except you use node.js) .. JavaScript run on web browser and PHP runs of server like Apache or nginx (say wamp , lamp , mamp )

Mayank K. Swami Over a year ago

i would suggest you to read JavaScript and Ajax first before going further because submitting form with ajax is most simple thing to do ...

Collectives™ on Stack Overflow

How to access form data from javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related