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.
Related
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
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...
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>
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']; ?>
This piece of code gets all the form variables and sends them via AJAX to the PHP script. But I want the calculated results from the PHP script that is being returned to the javascript via a JSON encoded array to be in the form of "post":{"uname":"someNamefromForm","email":"someEmail","fname":"namefromtheform","lname":"lastnamefromform"
}... The output I'm getting now is "uname=e&email=e&fname=e&lname=euname".. This is the JSON array I want to displayed at the bottom of the page for debugging purposes. Can someone tell me how to format it please
This is my HTML form
<div id="wrapper">
<h2> Validation with AJAX,JQuery,JSON and PHP</h2>
<div class="form-container">
<span id="ajax-message"></span>
<form id="ajax-form" onsubmit="return false;">
<p class="legend">All fields marked with an asterisk are required.</p>
<fieldset>
<legend>User Details</legend>
<div>
<label for="uname">Username <em>*</em></label>
<input id="uname" type="text" name="uname" value="" />
</div>
<div>
<label for="email">Email Address <em>*</em></label>
<input id="email" type="text" name="email" value="" />
</div>
<div>
<label for="fname" class="error">First Name <em>*</em></label>
<input id="fname" type="text" name="fname" value="" size="50" class="error"/>
<p class='note'>All error message go here </p>
</div>
<div>
<label for="lname">Last Name <em>*</em></label>
<input id="lname" type="text" name="lname" value="" size="50" />
</div>
</fieldset>
<div class="buttonrow">
<input type="submit" value="Submit This Form via AJAX" class="button" />
<input type="button" value="Start Again" class="button" />
<a >Refresh this Page</a>
</div>
</form>
</div>
<h3>JSON Array</h3>
<pre id='debug'></pre>
</div>
This is my javascript
$("#ajax-form").submit(function(){
var variableToSend = $(this).serialize();
$.post(
'ajaxformval_post.php',
{variable: variableToSend},
function(data){$("#debug").html(data)},
"json"
);
})
This is the php
<?php
$variable = $_POST['variable'];
echo json_encode($variable);
/*$json = array(
'booleanFlag' => TRUE,
'someText' => "AJAX should be renamed AJAJ",
'anArrayOfData' => array('name' => 'Mickey', 'ears' => 'very Big')
);*/
?>
You can send your serialized variable directly like this:
$("#ajax-form").submit(function(){
var variableToSend = $(this).serialize();
$.post(
'ajaxformval_post.php',
variableToSend,
function(data){$("#debug").html(data)},
"json"
);
});
Then on the server side simply output the json_encoded post:
<?php
$variable = $_POST;
echo json_encode($variable);
?>
Did you try changing the "json"-parameter from the $.post-method?
According to documentation https://api.jquery.com/jQuery.post/
dataType
Type: String
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
So I guess if you give him "json" he will automatically decode the returned data.