Develop Reference

How to get data user input data from my webpage

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>

onClick() to perform function?

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>

Javascript Form Validation (phone)

I have a form which has name, email and content text area. It all works fine but when I'm trying to add 1 more form input for mobile phone numbers the form wont submit.
Javascript:
function hgsubmit() {
if (/\S+/.test(document.hgmailer.name.value) == false)
alert("Please provide your name.");
else if (/^\S+#[a-z0-9_.-]+\.[a-z]{2,6}$/i.test(document.hgmailer.email.value) == false)
alert("A valid email address is required.");
else if (/\S+/.test(document.hgmailer.comment.value) == false)
alert ("Your email content is needed.");
else {
document.hgmailer.submit();
alert ('Thank you!\nYour email is sent.');
}
}
HTML:
<form action="http://www.jim123code.com/cgi-sys/formmail.pl" method="post"
name="hgmailer">
<input type="hidden" name="recipient" value="info#jim123code.com">
<input type="hidden" name="subject" value="Form E-Mail">
Contact Form
<br>
<br>
Visitor Name: <input type="text" name="name" size="30" value="">
<br>
Visitor E-Mail: <input type="text" name="email" size="30" value="">
<br>
E-Mail Content: <textarea name="comment" cols="50" rows="5"></textarea>
<br>
<br>
<input type="button" value="E-Mail Me!" onclick="hgsubmit();">
<input type="hidden" name="redirect" value="http://www.jim123code.com/">
</form>
The code for the form above is the approved contact form that works with my webhosting provider (ehost). Now i've tried adding a mobile phone number input by copying and pasting the other input types and changing a few things around but no luck. please advise the best way to add a phone number input + the javascript validation code for it to all work together.

For a new input to be sent, be sure to include it inside the form tag and add a unique value for the name property.
Example:
<input type="text" name="phoneNumber" size="10" value="">
For more information about forms check HTML Forms.

You are gonna have to create a custom formmail script to handle your new form. If you know perl you can try modifying the existing script. Otherwise tough nuggies.

Unwanted autofill on html form

I am (for the first time) making a signin/register form for a website. For the line in the register form where I ask the user to provide their email address it provides an autofill option, which is fine. The problem is that it also fills in the line below which is where I will get the user to retype the email address to verify it. I have tried using autocomplete="off" but that does not seem to have an affect.
I managed to figure out that if the second email input does not have the word "email" in it the autocomplete does not affect this line. Still tho, autocomplete="off" had no affect and I don't know why. Ideally I would like to have email in the name of this line off code to make it easier to read and similar issues may come up in the future.
Any ideas why this is happening? here is my code:
<!DOCTYPE html>
<html5>
<head>
<title>Login page</title>
</head>
<body>
<h1>Login or Register</1h>
<p></p>
<div id="logindOrRegdiv">
<input type="button" value="Login" id="login">
<input type="button" value="Register" id="register">
</div>
<div id="logindiv">
<form name="login" autocomplete="on">
Username<input type="text" name="userid"/><br>
Password<input type="password" name="pswrd"/><br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form) { /*function to check userid & password*/
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd") {
window.open('target.html')/*opens the target page while Id & password matches*/
}
else {
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</div>
<div id="registerdiv">
<form name="register" autocomplete="on">
First Name<input type="text" name="firstname"/><br>
Middle Name<input type="text" name="middlename"/><br>
Last Name<input type="text" name="lastname"/><br>
D.O.B.<input type="text" name="dob"/><br>
Email Address<input type="email" name="email"/><br>
Re-Type<input type="email" name="email2" autocomplete="off"/><br>
Password<input type="password" name="password"/><br>
Re-Type<input type="password" name="password2"/><br>
</form>
</div>
<script src="jquery-1.11.2.js"></script>
<script src="app.js"></script>
</body>
</html5>

The autocomplete="off" attrbute has bugs in most major browsers.
http://caniuse.com/#feat=input-autocomplete-onoff
The workaround is to give the name attribute a random value each time the page is loaded. For example name="email-jirbcea".

Javascript email validation code issue (still submitting the form)

I have added some javascript to my form to validate the email before submitting the form. I dont want a seperate button to validate, i want it to be part of the form submit button. It works currently and a message comes up asking me to put a valid email address in. The problem is when i click "ok" it still tries to submit the form (and fails) instead of returning to the form to correct the email addres.
My Javascript:
<script language="javascript">
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}</script>
My HTML:
<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" onclick='Javascript:checkEmail();' />
I cant figure out what the problem is. Any help would be appreciated. Cheers

Just add return before the function call:
<input type="SUBMIT" class="button" value="Submit Email" onclick='Javascript:return checkEmail();' />

Try this:
HTML:
<form name="whatever" action="action.asp" onsubmit="return validateForm()" method="post">
<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" />
</form>
JS (pseudocode)
function validateForm()
{
if (something) {
alert('validation failed');
return false;
}
}

There is not a major problem, the function is working fine but it is not returning back,
just add return before you call the function,
here is the example below:
<input type="SUBMIT" class="button" value="mail" onclick='Javascript:return checkEmail();' />
This will sort out your problem,
enjoy :)

Here is the rework of your code.
<script type="text/javascript">
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}
</script>
<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" onclick='checkEmail();' />
Works as expected.