Is it possible for in a form of username and password to perform JS validation with the onClick()?
Here is the code:
<form action="signup.php" method="post" name="formInput" onclick="validateForm()">
Username: <br> <input type="text" name="username" placeholder="Username"><br>
Password <br> <input type="password" name="pass" placeholder="Password"><br>
<input type="submit" name="submit">
</form>
I remember doing it before but cannot remember where to call the actual onClick() in the form creation or in the button submission?
Thanks for any suggestions.
<script>
function validateForm() {
// if valid return true else false
}
</script>
<form action="signup.php" method="post" name="formInput" onsubmit="return validateForm()">
Username: <br> <input type="text" name="username" placeholder="Username"><br>
Password <br> <input type="password" name="pass" placeholder="Password"><br>
<input type="submit" name="submit">
</form>
As soon as the submit-button is clicked, signup.php gets executed and your validateForm() is ignored. I do not know why you are trying to validate the data with JavaScript instead of inside the signup.php itself. Furthermore it is almost certainly a huge security-flaw to do the validation on the front-end.
What I suggest you do is to forget about validating in JavaScript, and do it in PHP instead. If you post your validateForm() code we can help you translating it into PHP (and probably improve it as well).
Edit: You have stated that your validation is to make sure the input fields are not empty. So here we go:
<?php
session_start();
$username = $_POST['username'];
$pass = $_POST['pass'];
if (strlen($username) < 1 || strlen($pass) < 1) {
header(...); //redirect back to the home-page
$_SESSION['message'] = "Username and password must be filled out.";
}
... //rest of your signup.php
?>
and change the extension of your HTML-page to .php, then add this to the top:
<?php
session_start();
echo("<script> alert('" . $_SESSION['message'] . "'); </script>");
?>
This seems like overkill for such a simple task, and probably is. However you will want to check for other things than the emptiness of the fields, and that has to be done in this way.
However, if you do not care and want a simple way to do it, you can probably disable the submit-button with JavaScript somehow until both fields are filled. Check if both fields are filled with something like onChange = validateForm() function.
SOLUTION:
<form action="signup.php" method="post" name="formInput" onsubmit="return validateForm()">
Username: <br> <input type="text" name="username" placeholder="Username"><br>
Password <br> <input type="password" name="pass" placeholder="Password"><br>
<input type="submit" name="submit" onsubmit="validateForm()">
</form>
Related
for some reason isset($_post) doesn't work when i use js form.submit()
how i can resolve that without changing type of input from button to submit and just with using vanilla javascript because i need both of them.
code html:
<form name="user_verification" action="action.php" method="POST">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="button" onclick="myFunction(this)" name="button" value="submit">
</form>
and here is the php script in action.php file
if($_SERVER['REQUEST_METHOD']=="POST")
{
if(isset($_POST['button']))
{
echo 'yes';
}else{
echo 'no';
}
}
and here is the javascript in action.js file
function myFunction(button)
{
//some code
const form=button.parentNode;
form.submit();}
Actually the problem didn't raise from the PHP. Buttons' value is sent when the form is directly submitted by them (In this case, it seems impossible).
Suggestion 1: use another field to check form submission.
if($_SERVER['REQUEST_METHOD'] == 'POST') {
if(isset($_POST['email'])) {
echo 'yes';
} else {
echo 'no';
}
}
Suggestion 2: add hidden input in the HTML.
<form name="user_verification" action="test.php" method="POST">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="hidden" name="button" value="submit">
<input type="button" onclick="myFunction(this)">
</form>
Suggestion 3: change button type to hidden before submitting.
function myFunction(button) {
// some code
button.setAttribute('type', 'hidden');
const form=button.parentNode;
form.submit();
button.setAttribute('type', 'button');
}
I have investigated for a long time (too long) on the net (including StackOverflow e.g.) without any success. The question is asked by many people but no one among the proposed solutions helps me. So in desperation, I turn again to this forum.
<form id="myForm" method="post" action="updateMySQLGuests.php" onsubmit="return formSubmit()">
This boolean result function checks whether the value of the fields is correct before calling UpdateMySQLGuests.php (for example, verify if the e-mail contains a #) to create a record with the value of these form fields by POST method in MySQL. But action= updateMySQLGuests.php is executed before the formSubmit() function (which, in fact, is not executed at all). I work in localhost with Wampserver.
You can move the form's action to formSubmit() to solve this
<form id="myForm" method="post" onsubmit="return formSubmit()">
and the formSubmit() code:
function formSubmit() {
// the old code
...
// call submit form
document.getElementById('myForm').action = "updateMySQLGuests.php";
document.getElementById('myForm').submit();
}
<!-- in place of <form name= "myForm" id="myForm" action="updateMySQLGuests.php" method="post" onsubmit="return formSubmit()"> : -->
<form name="myForm" id="myForm" action="updateMySQLGuests.php" method="post">
<!-- action="updateMySQLGuests.php" -->
<label for="firstnames">Prénom:</label>
<input type="text" id="firstname" size="20" name="firstname"><br>
<label for="Lastnames">Nom:</label>
<input type="text" id="lastname" size="20" name="lastname" list="lstLastnames">
<datalist id="lstLastnames"> </datalist> <br>
<label for="email">E-mail:</label>
<input type="text" id="email" size="20" name="email"><br><br>
<!-- in place of <input type="submit" value="post"/> : -->
<button onclick="return validateValues()">Submit</button>
</form>
I have made a form in my site, which will allow me to get suggestions about Rubik's cube algorithms, but how to know what input the user has? For better understanding, I've given the code below:
<form method="POST">
<label>Your name: </label><br>
<input type="text" name="name" placeholder="Your Name" required><br><br>
<label>Your E-mail: </label><br>
<input type="email" name="email" placeholder="email#domain.com" required><br><br>
<label>Select puzzle: </label><br>
<input type="radio" name="2x2" value="2x2">2x2<br>
<input type="radio" name="3x3" value="3x3">3x3<br><br>
<label>Select set/subset: </label><br>
<input list="set"><br><br>
<datalist id="set">
<option>Ortega OLL</option>
<option>Ortega PBLL</option>
<option>CLL</option>
<option>EG-1</option>
<option>EG-2</option>
<option>F2L</option>
<option>OLL</option>
<option>PLL</option>
<option>COLL</option>
<option>WV</option>
</datalist>
<label>Your Alg: </label><br>
<input type="text" name="alg"><br><br>
<input type="submit" name="submit" class="w3-black w3-button w3-hover-white w3-hover-text-blue w3-text-white">
</form>
Please add action attribute to your form tag and on submit here is the example
<form action="getvalue.php" method="post">
</form>
Note: Every form element must have unique name .
after adding action attribute then create getvalue.php file and add following code in to it
<?php
print_r($_POST);
?>
Above code will give all the form field values
do let me know if it was helpfull...
I'm not sure exactly what you want to do, but here is an example of a form that submits to itself. This will allow you to remain on the same page after the form has been submitted. You can change what the user sees to indicate that the form was done successfully/etc. I have tested this code and it works.
<main>
<?php
// When the form is submitted
if (isset($_POST["submitButton"])){
//Do something with the data from the form - you don't have to print it out.
//This is all done on the server.
//Connect to DATABASE, send an EMAIL, VALIDATE the form, etc.
print("<pre>");
print_r($_POST); // for all GET variables
print("</pre>")
?>
<!-- This HTML will be visible to the user after the form has been submitted. -->
<h1>The form has been submitted successfully!</h1>
<?php
}else{ //If the form has not been submitted
?>
<form method = "post" >
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" id = "submitButton" name = "submitButton" value="Submit">
</form>
<?php
} //End else
?>
</main>
I'm working on a simple login in form that verfies one username and one password using php and javascript. I have a index.php a javascript file to check for errors and a results.php. I can't see anything that I'm doing wrong, but the page continues to submit Invalid login in no matter what is input. Looking for some hints if you guys can give me some. Thanks in advance. I have also looked at similar questions on here and my code pretty much matches the others.
results.php
<?php
$user="joesmith";
$password="abc123";
if(isset($_POST['submit'])){
if(($_POST['user'] == $user) && ($_POST['password'] == $password))
echo "You have successfully logged in";
}
else
{
echo "Invalid login! Try again.";
}
?>
index.php
<body>
<form class="basic-grey" action="results.php" method="post">
<div>
<label for="username" id="lUsernameLabel">* Username:</label>
<input type="text" name="username" id="iUsername" onblur="validateUserName()" onfocus="resetUserName()" />
<div id="dUsernameError" class="errorMessage"></div>
</div>
<div>
<label for="password" id="lPasswordLabel">* Password:</label>
<input type="password" name="password" id="iPassword" onblur="validatePassword()" onfocus="resetPassword()" />
<div id="dPasswordError" class="errorMessage"></div>
</div>
<div>
<input type="submit" class="button" value="Submit" />
</div>
your input has name="username" but you are looking for $_POST['user']
You are submitting username input with "username" but trying to check its validity with "user".
Change the part
($_POST['user'] == $user)
to
($_POST['username'] == $user)
it will start to work
Try $_POST['username'] instead of $_POST['user'].
(This would be a comment if I had the rep)
I've form tag like this
sample name:register.php page
<form id="formElem" name="formElem" action="form10.php" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button name="submit" type="submit">Register</button>
<button name="preview" type="submit">Preview</button>
</form>
I'm sending this info to next form10.php page and displaying all the 10 input values on that page
I'm using $pd= htmlentities($_POST['pd']); $fname= htmlentities($_POST['fname']); to fetch values from form tag and such 10 variables and I'm echoing those entered value
on form10.php file after successful submit button.
like i entered fname, mname, lname came from form tag and displayed on form10.php page.
first name <?echo $fname?>
but now problem is user can see the next page (form10.php) after entering only 10 textboxes values inside form tag.
but I want to give preview option to user so that user can preview that next page either filling any of 1 to 10 textbox values. means he has filled fname and lname but not rest of 8 fields and he clicks on preview button I want to open form10_preview.php which same as form10.php but as user has entered only fname and lname so echo only those values which he as supplied.
Now problem is how can i can have two submit button and two actions in one form?
I think it is better to control form submit rules clientside. Remove the action from your form, and change the button type to be button :
<form id="formElem" name="formElem" action="" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button id="register" type="button">Register</button>
<button id="preview" type="button">Preview</button>
</form>
Then let javascript control the flow of the submitting :
var formElem = document.getElementById('formElem'),
btnSubmit = document.getElementById('register'),
btnPreview = document.getElementById('preview');
function formSubmit() {
switch (this.id) {
case 'register' :
formElem.action='post10.php';
break;
case 'preview' :
formElem.action='preview10.php';
break;
}
formElem.submit();
}
btnSubmit.onclick = formSubmit;
btnPreview.onclick = formSubmit;
You could have the form point to its own page and handle each submit value separately. At the top of the file with the form, you'll need to start the output buffer and a session. This allows the use of header() to redirect, and storage of session variables.
<?php
ob_start();
session_start();
?>
The form will point to itself by removing the action attribute:
<form id="formElem" name="formElem" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button name="submit" type="submit">Register</button>
<button name="preview" type="submit">Preview</button>
</form>
We process each of the buttons via their name in the POST array:
<?php
if(isset($_POST['submit'])){
foreach ($_POST as $key => $value) {
$_SESSION[$key] = $value;
}
header("Location: form10.php");
}
if(isset($_POST['preview'])){
foreach ($_POST as $key => $value) {
$_SESSION[$key] = $value;
}
header("Location: form10_preview.php");
}
?>
And at the very end of the file, we flush the output buffer:
<?php ob_end_flush(); ?>
So, essentially the form has one action, which is to submit the values to itself. Finally, both form10.php and form10_preview.php will need session_start(); at the top of the file to access the Session variables we've created, like so:
<?php
session_start();
$inputs = array("pd", "fname", "mname", "lname", etc...);
foreach ($inputs as $input) {
echo $_SESSION[$input];
}
?>