Showing a message in the same page after submitting a form - javascript

I have a simple HTML form with a name & email address field and a submit button.
After filling in the form and submitting it, I want a message such as "Thank you for your response" to appear on the same page.
I'm looking for a easy clean PHP fix for this. I want all the code to stay on one page (Not separate it into two different files).
I've been searching on Google, but they have much more complex situations.
Your help is greatly appreciated. Thanks.
EDIT: I want the form to disappear after pressing submit and just show the "Thank you for your response" message. I forgot to mention that. Sorry.
<form>
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>

Would something like the following help? Essentially, when you hit submit, some special variables are set in the $_POST array, and you can access those. If those variables are set when we're building the page in PHP, then we can do some processing/send an email/show a different response page.
<?php
if (array_key_exists($_POST['your_email'])) /* and other validation */ {
?>
<p>Thanks!</p>
<?php } else { ?>
<form action="POST">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>
<?php } ?>

please try below code.
<?php
if($_POST) {
echo "Thank you for your response";
}
?>
<form name="test" action="" method="post">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>

in you form validate page
header('location: ../page.php?case=Thank you for your response');
in your page
<?php print $_GET['case']; ?>

Related

Stop the page to refresh after the form button is clicked and error is shown

I have seen other questions too but i want to stop my page from refreshing after signup form is filled and with validation from php it shows an error in a span. or not refreshing the form data or not clearing the form data will also work. I just want the form data to be exact as it is but the error to be shown. please find the code
<form action="signup.php" id="form" method="POST" onsubmit="">
<a style="text-decoration:none ;" href="index.php"><h1 >Mero <span>Notes</span></h1></a>
<h3>Register Your Account</h3>
<?php
echo '<p style="margin-top:10px;color:red;">'.$message.'</p>';
?>
<p id="validationSpan"></p>
<input placeholder="Full Name" type="text" required="required" name="fullName" value=""/>
<input placeholder="Email" type="text" required="required" name="email" />
<input placeholder="Password" type="password" name="password" required="required" id="id_password" minlength="8" onkeyup="passValidation();"/>
<input placeholder="Confirm Password" type="password" name="conPassword" required="required" id="id_conPassword" onkeyup="passValidation();"/>
<input placeholder="Contact" type="number" required="required" name="contactNum" />
<button type="submit" class="regButton" type="submit" value="Sign Up" id="regBtn" onclick="return passValidationAlert()">SignUp </button>
<h4 style="text-align: right; color:black;font-size:12px;">
Already Have an Account ?
<a class="buttomLogin" href="index.php">Login here</a>
</h4>
</form>
The php code looks like this
if(mysqli_num_rows($result)>0){
$_SESSION['error']=true;
$message='The Entered Email is Already Taken';
}
elseif($password!=$confirmPassword){
$message='Password did not match';
}
{
$epassword=password_hash($password,PASSWORD_BCRYPT);
$sql = "INSERT INTO signupdatabasemn (fullName, email, password, phoneNumber)
VALUES ( '$fullName', '$email', '$epassword', $phoneNumber) ";
$result2= mysqli_query($conn, $sql);
if ($result2>0) {
header('Location: /demosite3fnl/index.php');
} else {
}
}
?>
The simplest solution would be to put the post data in the input value so that when page get refreshed, it stays where it should be. In example:
<input placeholder="Email" type="text" required="required" name="email" value="<?= $_POST['email'] ?>"/>
Updated. Just seen your updated code. Looks like form is sending request to different php file. In this case, try return posted data using get. See more here

PHP Form not posting all fields data

I have a form I am trying to submit. For the life of me, I can't figure out why none of the data from the fields is posting. Here is the form.
I've tried to change different input types and the name's but nothing is working.
UPDATE:
I was able to fix the problem. 3rd party script was preventing posting of all data
Your code is confusing. you have id attributes o the submit button in two places. you also have id set to myform at form parameter. Which Id are you using to send the form. In your absence of your javascript and php backend. you can try the code below and see if it helps
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$('#myForm').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"submit.php",
method:"POST",
data:$(this).serialize(),
dataType:"html",
beforeSend:function(){
alert('am about to submit');
},
success:function(data){
$('#myresult').fadeIn('slow').prepend(data);
}
})
});
});
</script>
// display ajax result in div below...
<div id="myresult"></div>
<form id="myForm" class="form" method="post">
<input type="text" class="form-control center-block" id="fname" placeholder="First Name" name="fname" required>
<input type="text" class="form-control center-block" id="lname" placeholder="Last Name" name="lname" required>
<input type="email" class="form-control center-block" id="email" placeholder="Email Address" name="email" required>
<input type="text" class="form-control center-block" id="location" value="modal" placeholder="location" name="location" hidden>
<input type="button" class="btn-success btn-lg" name="submit" id="submit" value="Submit!"/>
</form>
submit.php
<?php
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$location = $_POST['location'];
//If everything were okay echo success
echo "success. myname is: $fname $lname and my email is: $email";
?>
You have actually two ids in the submit button:
<input type="button"
id="submitFormData"
onclick="SubmitFormData();"
class="btn-success btn-lg"
name="submit"
id="submit"
value="Submit!"
/>
id="submitFormData" AND id="submit"
Also you have a JS function called when onclick event SubmitFormData()
These things are pretty suspicious...

Use JavaScript to sign into a form

I'm new to JavaScript and I want to log in to a webpage. This code will take me to the web page but won't sign in. I know it knows the values of username/password because if I do alert(loginForm.elements["username"].value) it displays "someUsername".
I'm not sure how to get these values to be entered into the boxes and hit submit. Any advice helps, thanks!
<script>
function login() {
document.loginForm.action = "http://websiteToLoginTo.com";
document.loginForm.submit();
}
</script>
<body onLoad="login()">
<form name="loginForm" method="post">
<input type="hidden" name="username" value="someUsername">
<input type="hidden" name="password" value="somePassword">
</form>
</body>
The website I'm trying to connect to has this:
<form action="/Authn/UserPassword" method="post" name="loginForm">
<input id="username" name="t_username">
<input id="password" name="t_password">
<input type="submit" name="login" value="Login" class="submit">
</form>

Filling a hidden field in a html form through javascript

I am trying to send someone an email through a form on my website. I want to include a part of my webpage into the email.
To do this I use a hidden field, which I try to fill using a piece of javascript. However due to my lack of knowledge the code doesn't seem to be triggered.
<form action="Emailverstuurd.php" method="POST">
<input id="ExcelForm" type="hidden" name="ExcelForm"/>
<input name="email">
<textarea name="body" rows="10" cols="60"> </textarea>
<script type="text/javascript">
$("#send").submit(function() {
$("#ExcelForm").val($("#myExcelDiv").html());
}
</script>
<input type="submit" name="send" id="send" value="Send Your Message"/>
</p>
</form>
How can I get my javascript code to run?
You can do it like this:
<form action="Emailverstuurd.php" method="POST" onsubmit="submitUpdate()">
<input id="ExcelForm" type="hidden" name="ExcelForm"/>
<input name="email">
<textarea name="body" rows="10" cols="60"> </textarea>
<script type="text/javascript">
function submitUpdate()
{
$("#ExcelForm").val($("#myExcelDiv").html());
}
</script>
<input type="submit" name="send" id="send" value="Send Your Message"/>
</p>
</form>
Just add an onsubmit handler to your form field give it a function and just put you value update in that function...I don't see #myExcelDiv I'm assuming that is defined somewhere else in your code?

How to assign GET parameter to Value attribute of HTML Input Text?

I have following HTML form in which I am getting name from get parameter. I am unable to assign the value of get parameter to the value attribute of form. In the text field "$_GET['name']" gets printed instead of its value. What I am doing wrong here in this code?
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Name: <input type="text" name="name" value=$_GET['name']><br>
Sex : <input type="text" name="sex" value="M"><br>
<input type="submit" value="Submit form">
</form>
</body>
</html>
Your code should be this:
Name: <input type="text" name="name" value="<?php echo $_GET['name'];?>"/>
^^^ you need to echo it
thats because u have not specified php tags and the browser wont be able to fetch your result.
if you are using asp than please use asp tags instead of php tags.
<form action="demo_form.asp">
Name: <input type="text" name="name" value="<?php echo $_GET['name'] ?>"><br>
Sex : <input type="text" name="sex" value="M"><br>
<input type="submit" value="Submit form">
</form>

Categories