Develop Reference

The $_POST unable to retrieve data from the text field in the html file

There is a discovery.html file that links to a validate_signup.php file through action in the html form. When in the I am in the validate_signup.php and try to retrieve the values with $_POST['XXX'] of the text fields in the form namely regFName, regSName, regEName, regPName it returns an error that states undefined index XXX.
File directory(not sure if it could play a part)
Folder-- HTML, PHP, ect
HTML-- discovery.html, ect
PHP-- validate_signup.php, ect
I create an other html and php file that works similarly and in this example it worked.
HTML FROM:
<form class="modal-content animate" onsubmit="return validate();" action="../PHP/validate-signup.php" methode="post">
<div class="containerL">
<label><b>First name</b></label>
<input type="text" class="LoginFromPage" id="regFName" placeholder="Enter Frist name" name="regFName" required>
<label><b>Surname</b></label>
<input type="text" class="LoginFromPage" id="regSName" placeholder="Enter Surname" name="regSName" required>
<labelb>Email</b></labelb>
<input type="text" class="LoginFromPage" id="regEName" placeholder="Enter Email" name="regEName" required>
<label><b>Password</b></label>
<input type="password" id="regPName" placeholder="Enter Password" name="regPName"required>
<button type="submit">Register</button>
<button type="button" onclick="document.getElementById('id02').style.display='none'" id="cancelbtn">Cancel</button>
<div id="error_para" ></span>
</div>
</form>
PHP:
$password = $_POST["regPName"];
$email = $_POST["regEName"];
$surname = $_POST["regSName"];
$firstname = $_POST["regFName"];
JS-validate data
var error="";
var name = document.getElementById( "regFName" );
if(valPass() == false)
{
error = "Password must contain an UpperCase, LowerCase, Number and Symbol character";
document.getElementById( "error_para" ).innerHTML = error;
return false;
}
var email = document.getElementById( "regEName" );
if( email.value == "" || email.value.indexOf( "#" ) == -1 )
{
error = " You Have To Write Valid Email Address. ";
document.getElementById( "error_para" ).innerHTML = error;
return false;
}
else
{
return true;
}

the correct method not methode
<form class="modal-content animate" onsubmit="return validate();" action="../PHP/validate-signup.php" method="post">
<div class="containerL">
<label><b>First name</b></label>
<input type="text" class="LoginFromPage" id="regFName" placeholder="Enter Frist name" name="regFName" required>
<label><b>Surname</b></label>
<input type="text" class="LoginFromPage" id="regSName" placeholder="Enter Surname" name="regSName" required>
<labelb>Email</b></labelb>
<input type="text" class="LoginFromPage" id="regEName" placeholder="Enter Email" name="regEName" required>
<label><b>Password</b></label>
<input type="password" id="regPName" placeholder="Enter Password" name="regPName" required>
<button type="submit">Register</button>
<button type="button" onclick="document.getElementById('id02').style.display='none'" id="cancelbtn">Cancel</button>
<div id="error_para"></span>
</div>
</form>

Why won't JS redirect the webpage when statement is true?

I have an input for username and one for password. When the username and/or password don't match, I successfully get the "alert", but when they do match, nothing happens. I can't figure out what I'm doing wrong.
I have tried windows.location.replace as well, with the same results.
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.location ("http://stackoverflow.com");
}
else {
alert('incorrect username or password')
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button onclick="user1()">Submit</button>
</form>

It should be
window.location = 'http://stackoverflow.com';
instead of a function call. The other problem was the button causing a page reload. To fix that you should do:
<button type="button" onclick="user1()">Submit</button>
type="button" will prevent it from submitting the form by default.
demo
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.location = "http://stackoverflow.com";
}
else {
alert('incorrect username or password');
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button type="button" onclick="user1()">Submit</button>
</form>

window.location="url"
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.location="http://stackoverflow.com";
}
else {
alert('incorrect username or password')
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button onclick="user1()">Submit</button>
</form>

Assuming you are looking for window.open, where window.location will also work
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.open("https://stackoverflow.com");
} else {
alert('incorrect username or password')
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button onclick="user1()">Submit</button>
</form>

onSubmit redirect to website depenfing on value

Hi I'm trying to create a simple login form with 2 or 3 users where depending on who is logging in the redirect should be to different urls.
My code so far:
HTML
<h1 class="title">Logga in</h1>
<div class="grid__container">
<form name="login" onSubmit="return validateForm();" action="some website url" method="post" class="form form--login">
<div class="form__field">
<label class="fontawesome-user" for="login__username"><span class="hidden">Username</span></label>
<input name="usernameInput" id="login__username" type="text" class="form__input" placeholder="Username" required>
</div>
<div class="form__field">
<label class="fontawesome-lock" for="login__password"><span class="hidden">Password</span></label>
<input name="passwordInput" id="login__password" type="password" class="form__input" placeholder="Password" required>
</div>
<div class="form__field">
<input type="submit" value="Sign In">
</div>
</form>
</div>
JavaScript
function validateForm() {
var username = document.login.usernameInput.value;
var password = document.login.passwordInput.value;
var username1 = "user 1";
var password1 = "1234";
var username2 = "user 2";
var password2 = "4321";
if ((username == username1) && (password == password1)){
return "www.google.se";
}else if (username == username2) && (password == password2) {
return "www.facebook.se";
}else{
alert ("Login was unsuccessful, please check your username and password");
return false;
}
}

Get value from javascript

I have to get id from table data (SQL).
Below is a form, in which I have to get proper id. But in JavaScript I don't get id from more data. I am getting only same data id from table.
please tell me how to get id from table in SQL
HTML Form:
<div>
<textarea name="comment" id="comment1" class="form-control comment" rows="3" placeholder="Leave comment"></textarea>
<input type="hidden" id="cid1" value="<?php echo $ws1['forum_id']; ?>">
</div>
<input class="btn btn btn-noc" type="submit" value="Submit" id="addressSearch" href="#myModalnew" role="button" data-toggle="modal">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">User name</label>
<div class="controls">
<input type="text" id="username" placeholder="User name">
<p id="username_error" class="validation"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email id</label>
<div class="controls">
<input type="text" id="email" placeholder="Email id">
<p id="email_error" class="validation"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Mobile no</label>
<div class="controls">
<input type="text" id="phone" placeholder="Mobile no">
<p id="phone_error" class="validation"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="button" class="btn btn-nocone" value="Submit" onClick="xxx()">
</div>
</div>
</form>
Javascript:
function xxx() {
regexp=/^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
regexp1=/^\d{10}$/;
function showError(id, msg) {
if (msg != "") {
document.getElementById(id).innerHTML = '*' + msg;
}
else {
document.getElementById(id).innerHTML = msg;
}
}
err = '';
var username = document.getElementById("username").value;
if (username == "" || username == null) {
showError('username_error', 'Please Fill Name');
err = 1;
} else {
showError('username_error', '');
}
var email = document.getElementById("email").value;
if (!regexp.test(email)) {
showError('email_error', 'Please Fill valid Email address.');
err = 2;
} else {
showError('email_error', '');
}
var phone = document.getElementById("phone").value;
if (!regexp1.test(phone)) {
showError('phone_error', 'Please Fill valid Phone Number.');
err = 3;
} else {
showError('phone_error', '');
}
if(err!=''){
return false
}
else {
cmnt = document.getElementById('comment').value;
usr = document.getElementById('username').value;
emil = document.getElementById('email').value;
phn = document.getElementById('phone').value;
fid = document.getElementById('cid').value;
$.ajax({
type: "POST",
url:'submit_form/insert_comment.php',
dataType: "html",
cache: false,
async: false,
data: {
comment: cmnt,
username: usr,
email:emil,
phone:phn,
id: fid
}
});
}
showError('error','Your comment have been sent sucessfully');
$("#please").click();
}

JavaScript form validation without alert

HTML Form
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div class="page-header">
<h1 align="center" class="header">ONLINE ADMISSION FORM </h1>
</div>
<form role="form" method="post" name="sign_up_form" onSubmit=" return validateForm()">
<div class="container">
<div class="form-group">
<label for="username">User Name</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter User Name">
</div>
<span id="usernameError"></span>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
</div>
<span id="emailError"></span>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<span id="passwordError"></span>
<div class="form-group">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" class="form-control" id="conf_password" name="conf_password" placeholder="Confirm Password">
</div>
<span id="confError"></span>
<input id="button" type="submit" name="signup" value="Sign-Up" >
</div>
</form>
</body>
</html>
JavaScript
<script type="text/javascript">
function validateForm()
{
var username = checkUsername();
var email = checkEmail();
var password = checkPassword();
var conf = checkConf();
}
// Validate the fill in of First Name
function checkUsername(){
var userName=document.forms["sign_up_form"]["username"].value;
if (userName==null || userName=="")
{
document.getElementById("usernameError").innerHTML = "Not a valid e-mail address";
return false;
}
else{
return true;
}
function checkEmail()
{
// code for email validation starts here
var Email=document.forms["sign_up_form"]["email"].value;
var atpos=Email.indexOf("#");
var dotpos=Email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=Email.length)
{
var error=document.forms["sign_up_form"]["emailError"].innerHtml="Not a valid e-mail address";
return false;
}
else {
return true;
}
}
//code for email validation ends here
function checkPassword()
{
var Password=document.forms["sign_up_form"]["password"].value;
if (Password==null || Password=="")
{
var error=document.forms["sign_up_form"]["passwordError"].innerHtml="Choose Password";
}
return false;
else {
return true;
}
}
function checkConf()
{
var confirm_password=document.forms["sign_up_form"]["conf_password"].value;
if(confirm_password==null || confirm_password=="")
{
var error=document.forms["sign_up_form"]["confError"].innerHtml="Confirm Password";
return false;
}
else {
return true;
}
}
</script>
What's wrong this JavaScript? Why doesn't it display an error message?

you are missing one closing brace...
function checkUsername(){
var userName=document.forms["sign_up_form"]["username"].value;
if (userName==null || userName==""){
document.getElementById("usernameError").innerHTML = "Not a valid e-mail address";
return false;
}
else{
return true;
} // missing this
}

onSubmit=" return validateForm()"
should not be capitalized for S
onsubmit=" return validateForm()"