PHP Form not posting all fields data - javascript

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...

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

Form submit with ajax passing form to php without page refresh

can somebody please tell me why this code is not working I want to sent form data to PHP by post method but my PHP is not receiving any request
here is my signup form
signupmodal.php
<form action="<?php htmlentities($_SERVER['PHP_SELF']) ?>" method="post" id="signupForm">
<div class="form-group">
<label for="forUserName">User Name:</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Enter User Name" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="forEmail">Email:</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter Your Email" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="">password:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Enter Password" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="forConfirmPassword">Confirm Password</label>
<input type="password" name="cpassword" id="cpassword" class="form-control" placeholder="Enter Confirm Password" aria-describedby="helpId">
</div>
<input type="submit" class="btn btn-primary" value="SignUp" id="subbtn" onclick="myFunction()">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<?php echo json_encode($_POST);
// echo $_POST['email'];
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
$cpassword = $_POST['cpassword'];
echo $username;
if ($password == $cpassword) {
//code
} else
echo '<div class="alert alert-danger" role="alert">
<strong>danger</strong>
</div>';
} ?>
</div>
script.js
function myFunction() {
console.log(window.location.href);
$('form').on('submit', function (event) {
$.ajax({
type: 'POST',
url: 'includes/signupmodal.php',
data: $('form#signupForm').serialize(),
success: function () {
data = $('form#signupForm').serialize();
console.log(data);
},
});
event.preventDefault();
});
}
I want to submit my data using ajax without loading the page so, please tell me where I am wrong
You are only running myFunction() when you click the submit button and by then it's too late to add a submit event listener.
I suggest you add your listener when the document is ready.
Remove the onclick="myFunction()" from your submit button and add this to your script
jQuery(function() {
myFunction() // executes when the document has completely loaded
})
// or even just
// jQuery(myFunction)
See https://api.jquery.com/jquery/#jQuery3

Populate form with data from another form

I have a page with a small tour, within the tour points are inputs. Also on this page is another form, these forms have similar inputs including first, last name, etc...
If the user inputs their first name into form 1, how can I populate the first name field of form 2?
This is form 1:
<form role="form" id="inviteform3" class="form-inline" action="name.php" method="POST">
<div class="form-group">
<input type="text" class="form-control input-sm" name="name" placeholder="First Name"
id="hello" autocomplete="off" style="margin-top:10px">
</div>
<center>
<span id="start">Let's get started, <span id="result"></span></span>
<button class="btn btn-brand btn-sm next-screen animated bounceInUp"
id="go" style="margin-top:5px; display:none" href="#services" data-animation-delay=".5s">
Let's Go!</button></center>
<button class="btn btn-block btn-brand btn-xs invitebtn3" id="casi" type="submit"
style="margin-top:5px"><i class="fa fa-thumbs-o-up"></i> Submit</button>
</form>
This is form 2:
<form role="form" id="inviteform" class="form-inline"
action="http://omnihustle.net/demo/invitations/invite_request" type="POST"><div
class="form-group">
<input type="text" class="form-control input-sm" id="InputFirstName" placeholder="First
Name">
</div>
<div class="form-group">
<input type="text" class="form-control input-sm" id="InputLastName" placeholder="Last
Name">
</div>
<div class="form-group">
<input type="email" class="form-control input-sm" id="InputEmail" placeholder="Email">
</div>
<button class="btn btn-brand btn-sm invitebtn" type="submit" data-toggle="modal" data-
target=".bs-example-modal-sm"><i class="fa fa-check fa-fw"></i> Invite Me</button></form>
Here is my php file which the form is sent to:
<html>
<body>
<?php session_start(); ?>
<?php
if (isset($_POST['name']) && !empty($_POST['name'])) {
$_SESSION['name'] = $_POST['name'];
}
?>
<?php echo $_POST["name"]; ?>
</body>
</html>
Jquery has not worked since I am unable to enter html into the "value" field of the form, so what is the alternative?
Here is what ive tried;
<script>
$(document).on("ready", function(){
//Form action
$("#inviteform3").on("submit", function(event){
// Stop submit event
event.preventDefault();
$.ajax({
type:'POST',
url: 'name.php',
data:$('#inviteform3').serialize(),
success: function(response)
{
$('#inviteform3').find('#result').html(response);
$('.coupontooltip5').find('#result2').html(response);
$('#announcement').find('#result3').html(response);
$('#announcement2').find('#result4').html(response);
$('#progressbutton').find('#result5').html(response);
$('#inviteform').find('#result6').html(response);
}});
});
});
</script>
I have tried inputting "span id="result6" into the "value" tag of the input and the form does not allow the function, just shows the html as the default value of the input..
You can add a 'keyup' handler which copy the content to the second field. Add the following lines into the 'ready' handler.
$('#hello').on('keyup', function() {
$('#InputFirstName').val($(this).val());
});
If you add a 'change' handler instead of this 'keyup' handler, the handler is called only after the the field loses the focus.
By the way, name.php does not work. session_start() must be called before any output is made. Hence:
<?php session_start(); ?>
<html>
<body>

alert box in PHP and navigation to another page

I am using javascript to check whether username and password are not empty. If one of these is empty, javascript alert is displayed and PHP script should not work, that is username and password validation should not occur and login page should be displayed once again. Is there any simple code to do this?
Nobody need to build whole form. I have already build login form and PHP script for its validation, I just want to know is there any method or function in PHP to stop script on entering empty username/password and submitting
Try This
Php Code :
<p>
<label for="first">User Name:</label>
<input type="text" name="First Name" id="first" />
</p>
<p>
<label for="last">Password:</label>
<input type="text" name="Last Name" id="last" />
</p>
<input type="submit" name="Submit" id="button2" value="Submit" onClick="javascript:verify()"/>
JavaScript Code :
function verify() {
if (document.getElementById('first').value=="") {
alert("Please Enter Your Name");
return false;
}
else if (document.getElementById('last').value=="") {
alert("Please Enter Your Password");
return false;
}
else {
document.form.submit();
}
}
Working Model : http://jsfiddle.net/NWWL4/24/
It took me awhile to get this right. I have my form in my html index
page. On a closed question here, I read this couldn't be done.
This php works VERY well with my form.
It generates a Javascript alert for good and bad results and
links back to the index page in either instance.
If you look at the 2nd echo, you'll see where you can redirect to
another page. I just loaded same page to clear form.
If you want to see the ccs, just ask.
PHP:
<?php
if(isset($_POST['submit'])) {
$to = "admin#blahblah.com";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$subject_field = $_POST['subject'];
$message = $_POST['message'];
$body = "From: $name_field\n E-Mail: $email_field:\n Subject: $subject_field\n Message: $message\n";
}
if(empty($name_field) || empty($email_field) || empty($subject_field) || empty($message)) {
echo '<script type="text/javascript">alert("There is a problem, please check the fields");window.history.go(-1);</script>';
}
else {
if(mail($to, $subject_field, $body)) {
echo '<script type="text/javascript">alert("Message successfully sent");window.location = "https://www.blahblah.com/";</script>';
}}
exit;
?>
html:
<div class="clear"></div>
<div class="container">
<div class="row">
<div class="col-md-3">
<form role="form" action="php\mailer.php" method="post" id="form">
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Your Name" maxlength="30">
</div>
<div class="form-group">
<input name="email" type="text" class="form-control" id="email" placeholder="Your Email" maxlength="30">
</div>
<div class="form-group">
<input name="subject" type="text" class="form-control" id="subject" placeholder="Your Subject" maxlength="40">
</div>
<div><input type="submit" name="submit" class="btn btn-primary" value="Send Message"></input></div>
</div>
<div class="col-md-9">
<div class="txtarea">
<textarea name="message" rows="10" class="form-control" id="message"></textarea>
</form>
<div class="clear"></div>
<div class="col-lg-12" style="text-align:center">
<a class="btn btn-large btn-contact-link" href="#blahblah_home">Home</a>

(HTML) JavaScript + PHP - $_GET Error

What I would like to achieve:
A index page (index.html), which allows the user to register, which runs on JavaScript (index.js) to check the fields (not mentioned in snippet index.js), and then to redirect to a register page (scripts/register.php), which then adds the values to the database.
What is actually happening:
It redirects to the PHP page correctly, however none of the values seem to be transferred when using the $_GET method: I get an empty page.
What am I doing wrong?
Code:
index.html (only a snippet)
<input name="user" type="text" id="user" size="25" />
<input name="email" type="text" id="email" size="25" />
<input name="pass" type="password" id="pass" size="25" />
<input type="submit" name="signup" id="signup" value="Sign Up" />
<script type = "text/javascript", src = "index.js">
</script>
index.js (only a snippet)
document.getElementById("signup").onclick = signup;
var aref = "refcode";
function signup()
{
window.location.href = 'scripts/register.php?emailaddress=' + document.getElementById("email").value + '&username=' + document.getElementById("user").value + '&password=' + document.getElementById("pass").value + '&aref=' + aref;
}
scripts/register.php (only a snippet)
<?php
echo $_GET['emailaddress'];
echo $_GET['username'];
echo $_GET['password'];
echo $_GET['aref'];
?>
EDIT: I accidentally copied the wrong code for 'scripts/register.php', sorry to all the answers who corrected it for me
You're never submitting the form (because you don't seem to have one), thus never getting anything but the data that you embed into the URL (which is very unsecure, not a good idea to send sensitive data like passwords like that).
I'm not sure, however, why are you complicating things like that.
If you want to use GET, no need to build the URL yourself, just set up the form with GET method and use regular submit to send it, no javascript needed. Use the hidden field for the aref value (you can populate it when the form is generated, before submitting, etc, whatever works for you):
<form method="GET" action="scripts/register.php">
<input name="aref" type="hidden" value="refcode" />
<input name="user" type="text" id="user" size="25" />
<input name="email" type="text" id="email" size="25" />
<input name="pass" type="password" id="pass" size="25" />
<input type="submit" name="signup" id="signup" value="Sign Up" />
</form>
Again, changing the method to POST would be a much better idea. Of course, then you need to access the variables like $_POST['aref'], etc. Just like this:
<form method="POST" action="scripts/register.php">
<input name="aref" type="hidden" value="refcode" />
<input name="user" type="text" id="user" size="25" />
<input name="email" type="text" id="email" size="25" />
<input name="pass" type="password" id="pass" size="25" />
<input type="submit" name="signup" id="signup" value="Sign Up" />
</form>
And the PHP (for POST):
<?php
echo $_POST['email'];
echo $_POST['user'];
echo $_POST['pass'];
echo $_POST['aref'];
?>
Your fields are not named the same way in the URL and in register.php. Try this.
<?php
echo $_GET['emailaddress'];
echo $_GET['username'];
echo $_GET['password'];
echo $_GET['aref'];
?>
window.location.href = 'scripts/register.php?emailaddress=' + document.getElementById("email").value + '&username=' + document.getElementById("user").value + '&password=' + document.getElementById("pass").value + '&aref=' + aref;
To access them:
$_GET['username']
$_GET['password']
etc...
In your code you never use the good variable names:
<?php
echo $_GET['email'];
echo $_GET['user'];
echo $_GET['pass'];
echo $_GET['accountref'];
?>
For an Solution without JS, and PHP instead:
<form action="scripts/register.php?<? echo $refcode /* HERES YOUR REFCODE */?>" method="GET">
<input name="user" type="text" id="user" size="25" />
<input name="email" type="text" id="email" size="25" />
<input name="pass" type="password" id="pass" size="25" />
<input type="submit" name="signup" id="signup" value="Sign Up" />
</form>
The normal way to do what you want is using method Attribute in your form or the .submit() event in jquery. I'll show how I would do that:
HTML
without javascript using POST
<form method="post" id="login_form" action='register.php'>
<input name="user" type="text" id="user" size="25" />
<input name="email" type="text" id="email" size="25" />
<input name="pass" type="password" id="pass" size="25" />
<input type="submit" name="signup" id="signup" value="Sign Up" />
</form>
php using $_POST
$user = isset($_Post['user']) ? $_Post['user'] : NULL;
$email = isset($_Post['email']) ? $_Post['email'] : NULL;
$pass = isset($_Post['pass']) ? $_Post['pass'] : NULL;
HTML using Jquery
<form id="login_form" method="post" action="">
<input name="user" type="text" id="user" size="25" />
<input name="email" type="text" id="email" size="25" />
<input name="pass" type="password" id="pass" size="25" />
<input type="submit" name="signup" id="signup" value="Sign Up" />
</form>
<script type = "text/javascript" src = "index.js"></script>
//You have a type with a comma
JS
$('#login_form').submit(function(e){
var data = $(this).serializeArray();
$.post('register.php',data,
function(result){
//Your callback function
})
})
NOTE
My advise to you is that you should use POST method in this case
GET requests a representation of the specified resource. Note that GET should not be used for operations that cause side-effects, such as using it for taking actions in web applications. One reason for this is that GET may be used arbitrarily by robots or crawlers, which should not need to consider the side effects that a request should cause.
and
POST submits data to be processed (e.g., from an HTML form) to the identified resource. The data is included in the body of the request. This may result in the creation of a new resource or the updates of existing resources or both.
So essentially GET is used to retrieve remote data, and POST is used to insert/update remote data.

Categories