Develop Reference

Submitting form on same loaded page if the page is loaded via ajax

So i have a PHP page that is loaded via AJAX using the .load method.
This is then displayed on my page, however i need to be able to submit the form that is located on my second page that im loading using .load, submit this form and process the data on the same page without it reloading.
I'm very new to javascript and AJAX so i've no idea if i'm evening doing this correct using .load()
Any help would be appreciated.
page 1 is the following:
<button onclick="Test()" type="button">Load Content</button>
<div class="box" id="box" name="box">
</div>
<script>
function Test(id) {
$( "#box" ).load( "test.php?id=" + id );
}
</script>
The second page which is test.php houses the following
<form id="enrolemployee" action="" method="post">
<div class="form-group">
<label>Test</label>
<input type="text" class="form-control" id="Test" name="Test" placeholder="Test">
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<button type="submit" class="btn btn-outline-custom">Submit</button>
</form>
Now to submit the form on test.php i use a custom token class to generate a random hash per form submit so i can validate the data on the same page and process it through my database.
is this possible to do? or do i need to have my form then post the data through a different page?
Basically i need the entire thing to stay on PAGE 1, process the form like it normally should whilst the persons page does not reload and is always static on page 1, this should never redirect to test.php
Thankyou.

You can do it like
index.php
<button onclick="Test('10')" type="button">Load Content</button>
<div class="box" id="box" name="box">
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
function Test(id) {
$("#box").load("test.php?id=" + id);
}
</script>
test.php
<form id="enrolemployee" action="" method="post">
<div class="form-group">
<label>Test</label>
<input type="text" class="form-control" id="Test" name="Test" placeholder="Test">
</div>
<input type="hidden" name="token" value="">
<button type="submit" class="btn btn-outline-custom">Submit</button>
</form>
<script>
$("#enrolemployee").on('click', e => {
// Avoid reloading page
e.preventDefault();
console.log(<?php echo $_GET['id']; ?>);
})
</script>

Validate form with ISSET when using js delay function

I am trying to validate if the correct form is being sent with isset(), but this validation is not TRUE when a javascript delay is being applied. How come? What is the best way to check if the correct form was submitted via the POST method? See my code below. Maybe a hidden field would do the trick, but I actually really would like to know why the below code is not going through.
<script type="text/javascript">
window.addEventListener('load', function onload(){
var ccform = document.getElementById('cc_form');
if(ccform){
ccform.addEventListener('submit', function before_submit(e){
setTimeout(function wait(){
// After waiting, submit the form.
ccform.submit();
}, 2000);
// Block the form from submitting.
e.preventDefault();
});
}
});
</script>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['cc_form_submit'])) {
//Send the form
//Not working
echo 'ready to send!';
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
//Send the form
//Working
echo 'ready to send without ISSET!';
}
?>
<form action="" method="post" class="cc_form" id="cc_form">
<button class="cc_form_submit" type="submit" name="cc_form_submit">Send!</button>
</form>

In your example, there are so many possible solutions:
Solution 1:
You can use a hidden value inside your form and then check this value in isset() method like:
<form method="post">
<input type="hidden" name="form1" />
<button>Submit</button>
</form>
<form method="post">
<input type="hidden" name="form2" />
<button>Submit</button>
</form>
<?php
if(isset($_POST['form1'])){
// do somthing
}
if(isset($_POST['form2'])){
// do somthing
}
?>
Solution 2:
You can use input type submit instead of <button> like:
<form method="post">
<input type="submit" name="form1">
</form>
<form method="post">
<input type="submit" name="form2">
</form>
<?php
if(isset($_POST['form1'])){
// do somthing
}
if(isset($_POST['form2'])){
// do somthing
}
?>
Solution 3:
You can use different action for multiple <form> like:
<form method="post" action="form1.php">
</form>
<form method="post" action="form2.php">
</form>
Edit:
As per your comment
don't know why if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['cc_form_submit'])) { is not working.
Its not working because, you are using name= attribute with <button>, in this case solution 2 will work for you.

How to submit form without submit button

I'm trying to submit form without submit button. I used this code to submit: document.forms['form_id'].submit(); but this code submitin over and over again. I want submit just one time
<form method="POST" id="form_id">
<input type="hidden" id="lan" value="" name="number">
</form>
<script type="text/javascript">
document.forms['form_id'].submit();
</script>

the form is submitting it self everytime the javascript is loaded, which is everytime you load the page. The default behavior of a form is to submit to the location you are currently at, if not defined, you are continously submitting the form to the page that has the form and that again submits the form.
If you want this submit only to happen once, when a visitor is (re)directed to this page for instance, you should submit to a different one by using the action attribute of your form.
If you want the submit to happen on te request of a user, wrap your submit in a function that is called by an onclick event on a button, or any other event.
<script>
function submittheform(){
document.forms['form_id'].submit();
}
</script>
<form method="POST" id="form_id" action="someHandlerUrl">
<input type="hidden" id="lan" value="" name="number"/>
<input type="button" onclick="submittheform()" value="submit the form"/>
</form>
you could use this script in the PHP building your page;
<?php
if(isset($_POST['number'])){
$number = $_POST['number'];
$out = '<h1>The form was submitted</h1>';
}else{
$out = '
<h1>The form needs to be submitted</h1>
<form method="POST" id="form_id">
<input type="hidden" id="lan" value="" name="number">
</form>
<script type="text/javascript">
document.forms[\'form_id\'].submit();
</script>
';
}
echo $out;
?>
When the form is submitted and the number value is present,
it shows a page without the script and form.

<form method="POST" action="" id="mailform">
<input type="email" name="mail" placeholder="EMAIL" id="mail">
<div id="sub" onclick="mailsubmit()">Click Me to Submit</div>
</form>
<script type="text/javascript">
function mailsubmit(){
document.getElementById("mailform").submit();
var mailid = document.getElementById("mail").value;
return mailid?alert(mailid):alert("You did not submit your Email");
}
</script>

Foundation alert show only when success

Hello so I have 2 php files
index.php
<form action="send.php" method="POST">
<div data-alert class="alert-box success radius">
Message sent.
×
</div>
<input type="text" name="txt_message">
<input type="submit" value="Send">
</form>
<script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
$(document).foundation();
$('.alert-box > a.close').click(function() { $(this).closest('[data-alert]').fadeOut(); });
</script>
send.php
if(!empty($_POST['txt_message'])) {
echo "<script>alert('Message will be sent shortly...').location.href='index.php';</script>";
} else {
echo "<script>alert('Message not sent').location.href='index.php';</script>";
}
What I want to do is to show only the success data-alert when message is sent.. Any thoughts? Thank you.

You must hide the data-alert on page loading $('.alert-box').hide(),
add an ID to your form <form id="form" action="send.php" method="POST">
and match the submit event $('#form').submit({$('.alert-box').show();});
On this event you can check the field validity before to show the alert box

Validating and linking to another page

I have created a login page.In whicn iam unable to link it with the next page after clicking submit button.I want to validate and redirect to the next page.ie home.php.Kindly help me find out what am i missing.
signin.php
<!DOCTYPE html>
<html>
<head>
<script>
function val()
{
var a=document.signin.user.value;
var b=document.signin.password.value;
if ( a == "admin" && b == "rec"){
alert ("Login success");
window.location = "home.php";
return false;
}
else{
alert("login failed")
}
}
</script>
<meta charset="UTF-8">
<title>LIBRARY </title>
</head>
<body>
<div class="body"></div>
<div class="grad"></div>
<div class="header">
<div>REC<span>LIBRARY</span></div>
</div>
<br>
<br>
<br>
<div class="login">
<form name="signin" method="post" onsubmit="val();">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" id="mybutton" value="login"></form>
</div>
</body>
</html>

The problem is the onsubmit event is not having false returned to it, so it posts the form normally, after your JavaScript has finished. Even in the case of successful login and the redirect is executed, the form will still submit and it will override the redirect.
Firstly, Move your return false; to the end of the function, so that it always executes.
Secondly, change your onsubmit="val();" to onsubmit="return val();". This means the onsubmit event will always be returned false and will not try to post the form.
Side note: this is by no means a secure system. Any visitor can simply observe the HTML source to find the password, or just navigate directly to home.php. For a secure system, you will need to do the authentication on the server side (in the PHP).

You could use preventDefault() Event method without using onsubmit=val() like below.
document.getElementById("signin").addEventListener("submit", function(e){
e.preventDefault()
// actual code to validate
});
or
can try some dirty work on server side directly to hide the validation part
<?php
ob_start();
session_start();
loginForm();
$userinfo = array(
'admin'=>'0b2c082c00e002a2f571cbe340644239'
);
if(isset($_POST['username'])){
if($userinfo[$_POST['username']] == md5($_POST['password'])){
$_SESSION['username'] = $_POST['username'];
header('Location: home.php');
exit();
}else{
?>
<script type="text/javascript">
alert("Oops.... User name or Pasword is worng, Please try again");
</script>
<?php
}
}
function loginForm()
{
?>
<form name="login" action="" method="post">
Username: <input type="text" name="username"> <br><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="login">
</form>
<?php
}
?>