0

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.

DetectiveClarke
  • 67
  • 7
  • 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 Mar 23 '15 at 09: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 Mar 23 '15 at 09: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 – NullPoiиteя Mar 23 '15 at 09: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 Mar 23 '15 at 09:53
  • 1
    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 – NullPoiиteя Mar 23 '15 at 09:53
  • @NullPoiиteя Id rather have it without reloading the page. Are there any examples of this kind of method? another question is my javascript function ok to be used with ajax? – DetectiveClarke Mar 23 '15 at 09:56
  • let me write answer for you just wait for some minutes – NullPoiиteя Mar 23 '15 at 09:59

1 Answers1

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

  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
Community
  • 1
  • 1
NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
  • 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! – Dwza Mar 23 '15 at 10:11
  • 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 : http://www.codeshare.io/PETYl – DetectiveClarke Mar 23 '15 at 10:11
  • jquery is very easy! just bind the file into your source with `` 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)});` – Dwza Mar 23 '15 at 10:14
  • 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 ) – NullPoiиteя Mar 23 '15 at 10:15
  • i would suggest you to read JavaScript and Ajax first before going further because submitting form with ajax is most simple thing to do ... – NullPoiиteя Mar 23 '15 at 10:20