How to set a variable js with input (form) tag html / PhP

Question

I want to know if i can set a variable when the player finish the him form. Eg:

 <form> First name:<br> <input type="text" name="firstname" value="Pedro"> <br> Last name:<br> <input type="text" name="lastname" value="Pinto"> <br><br> <input type="submit" value="Submit"> </form>

And when he submit, execute a function on JS, what saves the firstname and lastname to a variable.

And i want know in PhP, if it's possible too thanks.

Answer 1

var username = $("input[name=firstname]").val();
var lastname = $("input[name=lastname]").val();

This is how you get the value of both input field with Jquery. The first part gets your input by it's name, .val() gets the value from that input.

Answer 2

JS solution: In this solution, the data is processed client side. Be careful though if you are saving any of this to your server since users can use their browser to manipulate the data in unintended ways.

HTML:

<form>
  First name:<br>
  <input type="text" id="firstname" value="Pedro">
  <br>
  Last name:<br>
  <input type="text" id="lastname" value="Pinto">
  <br><br>
  <input type="submit" value="Submit" onclick="myFunction()">
</form> 

JS:

function myFunction() {
  var firstname = document.getElementById('firstname').value;
  var lastname = document.getElementById('lastname').value;
}

PHP solution: In this solution, the data is processed server side. Here, you will clear out any JS variables because this causes a new page to load when you do this. So, generally, do not do this if you need to continue working on page after saving your variables. Also, note that the HTML forms use "name" instead of "id" when passing a post.

HTML:

<form action="MYPAGE.php" method="post">
  First name:<br>
  <input type="text" name="firstname" value="Pedro">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Pinto">
  <br><br>
  <input type="submit" value="Submit">
</form> 

PHP:

<?php
  $firstname = $_POST["firstname"];
  $lastname = $_POST["lastname"];
?>

AJAX Solution: The third way to do it which is sort of a hybrid is to use AJAX. In this solution you use JavaScript to collect the variables, then you POST the data to another .php file without navigating away. This way you don't clear out any of your JavaScript variables, and you can write the data to the server. Then whatever content is generated by your targeted PHP page can be loaded into the page you are already on by inserting it into the element you target with your result.

NOTE: This sample code uses jQuery.

HTML:

<form>
  First name:<br>
  <input type="text" id="firstname" value="Pedro">
  <br>
  Last name:<br>
  <input type="text" id="lastname" value="Pinto">
  <br><br>
  <input type="submit" value="Submit" onclick="myFunction()">
</form> 
<div id="MYTARGETELEMENT"></div>

JS:

function myFunction() {
  var firstname = document.getElementById('firstname').value;
  var lastname = document.getElementById('lastname').value;
  $.ajax({
    type:"POST",
    url: "MYPAGE.php", 
    data: {
      firstname:firstname,
      lastname:lastname 
    },
    success: function(result){
      $("#MYTARGETELEMENT").html(result);
    }
  });
}

PHP:

<?php
  $firstname = $_POST["firstname"];
  $lastname = $_POST["lastname"];
  echo("Post Received By Server"); 
?>

Answer 3

How to get it in PHP:

Add a name to the submit button:

<input type="submit" name="submit" value="Submit">

Then use this code:

<?php
if(isset($_POST['submit'])) {
   $firstname = $_POST['firstname'];
   $lastname = $_POST['lastname'];
}
?>