I have to file main.html(main file) and login.html(contetns only form without html document means body and html tags) and use the .load() method of jquery to load the form from login.html to the main.html and submit to the login.php. And when i try to fetch the value of the input field in php it just give a empty string or say nothing. I don't want to use this method only. So is it wrong or not possible or is there any other php method which is able to fetch these fields.
main.html
<html>
<head>
<title>My Media</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--script src="https://code.jquery.com/jquery-1.11.1.min.js"> </script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0 /additional-methods.min.js"></script-->
<script src="jquery.js"></script>
<script src="javascript.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="nav-placeholder" name="nav-placeholder"></div>
<div id="body" name="body">
</div>
</body>
</html>
login.html
<div id="loginPage">
<br><h1>My Media</h1><br><br><br>
<form id="form1" name="form1" method="post" onsubmit="return validate()" action="login.php">
UserId:<br><input id="userid" name="userid" type="text" required><br>
Password:<br><input id="password" name="password" type="password" required><br>
<input id="Login" name="Login" type="submit" value="login">
</form>
</div>
jquery.js
$(function(){
var page="home";
$("#nav-placeholder").load("menu.html");
$("#body").load("home.html")
$("body").on("click","#home",function(){
if(page!="home"){
$("#body").empty();//after("<h3><u>Some appended text.</u></h3>");
$("#body").load("home.html");
page="home";}
});
$("body").on("click","#help",function(){
if(page!="help"){
$("#body").empty();//after("<h3><u>Some appended text.</u></h3>");
$("#body").load("help.html");
page="help";}
});
$("body").on("click","#login",function(){
if(page!="login"){
$("#body").empty();//after("<h3><u>Some appended text.</u></h3>");
$("#body").load("login.html");
page="login";}
});
$("body").on("click","#register",function(){
if(page!="register"){
$("#body").empty();//after("<h3><u>Some appended text.</u></h3>");
$("#body").load("register.html");
login="register";}
});
$("body").on("click","#about",function(){
if(page!="home"){
$("#body").empty();//after("<h3><u>Some appended text.</u></h3>");
$("#body").load("about.html");
page="about";}
});
$("body").on("click","#bottom",function(){
if(page!="home"){
$("#body").empty();//after("<h3><u>Some appended text.</u></h3>");
$("#body").focus("#contacts");
page="about";}
});
});
login.php
<?php
$usrname = $_POST["userid"];
$pass = $_POST["password"];
echo $usrname."--".$pass;
?>
what should a use?