How to take data from a form from another page

Question

Hello guys I am with the following doubt I have a web application I want when logging in the home page "index.html" take the 'name' and 'email' and put with jquery in another page with php, ajax and jquery 'paginaprincipal.html' .

example: index.html

<form name="form-login" id="MyForm">
        <input id="email" type="text" name="email" required>
        <input id="senha" type="password" name="senha" required>

        <button type="submit" id="btnLogin">Acessar</button>
   </form>

paginaprincipal.html

<div id="pega">
      Nome: <p id="nome"></p>
      Email: <p id="nome"></p>
</div>

note: before the main page I still have two more previous pages

Example: I have an index with login that is working with ajax and php:

a page between index and main

and finally I have my paginaprincipal.html where I want to go back to the login data of index.html

I hope I’ve been clear thank you for anyone who can help...

my login php code:

<?php

require './connection.php';

$email = $_POST['email'];
$senha = $_POST['senha'];

$stm = $pdo->prepare('SELECT * FROM usuario_app WHERE email = :email AND senha = :senha');
$stm->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
$stm->bindParam(':senha', $_POST['senha'], PDO::PARAM_STR);
$stm->execute();

if ($linha = $stm->fetch(PDO::FETCH_ASSOC)) {
    echo "Bem vindo {$linha['nome']}";
} else {
    echo 'Erro ao efetuar login!';
}

my login js:

    $('#btnLogin').click(function () {

    var url = "http://localhost:/projeto/login.php";

    $.post(url, $('#MyForm :input').serializeArray(), function (data) {
        navigator.notification.alert(data, null, "MSG", "OK");
            alert(data);
            window.location.href = 'pagina_principal.html';
        });
    });


$('#MyForm').submit(function () {//PARA PAGINA NÃO CARREGAR NOVAMENTE
    return false;
});

my ajax to pick up the data:

    var reculpera = $("#MyForm").serialize();//form login #MyForm
$.ajax({

    type: 'POST',
    url: "http://localhost:/projeto/login.php",
    data: reculpera

}).done(function (data) {
    localStorage.setItem('nome', data.nome);
    $("#pegaemail").text(localStorage.nome);
//    alert(data.nome);

}).fail(function () {
    alert("erro");
});

result of my ajax to play on that line

$("#pegaemail").text(localStorage.nome);

result #pegaemail is giving the message 'Undefined' error in ajax?

Answer 1

You have to send the data to the server, and then send that data back with your main page. To do this, it is not possible using pure html, you must use php or some other language on the server to process this information.

Answer 2

You need to use a BackEnd for this. I will give an example to be clearer.

EXEMPLO1 - PHP

<form id="form" method="POST" action="URL.PHP">
   <input type="text" name="email">
   <input type="password" name="senha">
</form>

<?php
   session_start();
   $email = $_POST['email'];
   $senha = $_POST['senha'];

   $sql = $pdo->prepare("SELECT * FROM usuarios WHERE email = ? AND senha = ?");
   $sql->execute(array($email, $senha));

   $ln = $sql->fetchObject();

   $_SESSION['nome'] = $ln->nome;
 ?>

Already on the homepage would be just like this...

<h1><?= $_SESSION['nome']; ?></h1>

However it is important that you study to understand. You can search about PHP + PDO.

Here are some links that might help you.

1. PDO
2. MYSQL
3. LOGIN WITH PHP AND PDO

I advise you to study one more language, it will help you a lot.

UPDATING:

<?php

require './connection.php';
$retorno = array();

$email = $_POST['email'];
$senha = $_POST['senha'];

$stm = $pdo->prepare('SELECT * FROM usuario_app WHERE email = :email AND senha = :senha');
$stm->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
$stm->bindParam(':senha', $_POST['senha'], PDO::PARAM_STR);
$stm->execute();

if ($linha = $stm->fetchObject()) {
    $retorno['erro'] = false;
    $retorno['nome'] = $linha->nome;
} else {
    $retorno['erro'] = true;
}


$('#btnLogin').click(function () {
    var url = "http://localhost:/projeto/login.php";
    $.ajax({
       type: 'POST',
       url: url,
       data: $('#MyForm').serialize(),
       dataType: 'json',
       success: function(data){
           var mensagem = data.erro ? 'NAO LOGADO' : 'LOGADO'

           if(data.erro){
               navigator.notification.alert(mensagem, null, "MSG", "OK");

           }else{
               navigator.notification.alert(mensagem, null, "MSG", "OK");
               localStorage.setItem('nome', data.nome)
           }

       }
    })
});

$('#MyForm').submit(function () {//PARA PAGINA NÃO CARREGAR NOVAMENTE
    return false;
});