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>

Posting button value from an HTML form controlled by Javascript

As the user fills out the form, I have some buttons that dynamically add new questions. However, I can't get the value of these buttons to Post to the subsequent PHP page (all the other information posts fine).
In the example below, I'm not able to get the value of "add_email" in "process-form.php" via $_POST['add_email'];
Thanks in advance for your help. In reduced form, it looks like this:
HTML form
<form id="form" class="form" action="process-form.php" method="POST">
<input id="name" name="name" type="text" placeholder="Name">
<!-- Yes/No buttons asking if the user wants to enter their email-->
<div id="form_email">
<h4>Do you want to enter your email?</h4>
<input type="button" class="btn" id="add_email" name="add_email" value="Yes" onclick="showEmailQ(this.value)"></input>
<input type="button" class="btn" id="add_email" name="add_email" value="No" onclick="showEmailQ(this.value)"></input>
</div>
<input type="submit" class="btn" value="Submit »">
</form>
Javascript
<script>
//Function to process whether user wants to enter email and then display value
function showEmailQ(value){
var table_row = document.getElementById("form_email");
if(value == "Yes"){
table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';
}
else{
table_row.innerHTML = '<p>You have chosen not to enter your email</p>';
}
}
</script>
PHP
//process-form.php
session_start();
$enteredEmail = $_POST['add_email'];
echo $enteredEmail; // Nothing prints to screen

You're destroying your form by overwriting the inputs with
table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';
So maybe change the input name to match
table_row.innerHTML = '<input id="email" name="add_email" type="text" placeholder="Email">';

How to genetrate input field and their value based on user input on the other input field in jquery

I have an input field where user will enter isbn number based on the input number i need to populate two input field i.e book title and book author name i am calling a javscript function on onblur of input and i am getting the correct value but my problem is that if user will not move their cursor from the input field and click on submit button then how i will populate these two input field in these scenario onblur is not working
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price">
<input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
</form>

Pick your preferred solution and adapt it to your website:
1) If your browser supports it, the easiest is make all your fields required and use onchange instead of onblur. This will force the user to enter an isbn, which will trigger the onchange containing more inputs with required.
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price" required>
<input type="text" name="isbn_number" id="isbn_number" onchange="getdetail()" required>
</form>
2) Do manual submitting after checking fields.
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price">
<input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
<input type="submit">
</form>
<script>
document.querySelector('input[type="submit"]').addEventListener('click', function ( event ) {
var valid = false;
event.preventDefault();
// ...
// add validation code here.
// ...
if (valid) document.querySelector('#post').submit();
});
</script>
3) Only activate the submit if everything is valid.
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price">
<input type="text" name="isbn_number" id="isbn_number">
<input type="submit" disabled="disabled">
</form>
<script>
var valid = false;
document.querySelector('#post').addEventListener('change', function ( event ) {
if (event.target.name === 'isbn_number') getdetail();
// ...
// add validation code
// if (stuff && stuff && stuff) valid = true;
if (valid) document.querySelector('input[type="submit"]').removeAttribute('disabled');
});
</script>

JavaScript email validation in form with python

I am using the flask framework for a project I've been working on for a little while. In my messages.html page I have a form which when submitted sends it over to the python side to be stored in a text file. This is what I have so far. I can't quite understand why it is not wortking.
<form onsubmit="return validateMyEmail();" method="post">
<input type="text" placeholder="Email"/ name="email" id="email" value=" {{request.form.email }}">
<br>
<textarea rows="14" id="comment" name="comment" placeholder="Comment" value=" {{request.form.comment }}"></textarea>
<br><br>
<input type="submit" value="Send">
</form>
And in my script I have:
<script>
function validateMyEmail() {
var email = document.form.email.value;
if (email.indexOf("#") < 1)
{
alert("Not a valid email address");
return false;
} else{
return(true);
}
}
</script>
It adds the email and message into my textfile even when I am inputting an incorrect email address. Any advice?
Found what the problem was. I didn't have name="form" declared in the tag.

How can i change AlertBox into a div?

I would like to know how can I change the AlertBox into a div.
I want the alertBox message to appear next to the input but in a div.
Thank You.
This is my Form input code:
<form name="form" action="gigi.php" method="POST" onsubmit="return validateForm()">
<input type="hidden" name="action" value="submit">
First Name:<br>
<input name="name" type="text" size="30"/><br>
Last Name:<br />
<input name="lname" type="text" size="30"/><br>
Email:<br>
<input name="caca" type="text" size="30"/><br>
Your message:<br>
<textarea name="message" rows="7" cols="30"></textarea><br>
<input class="submit" type="submit" value="Send email"/>
</form>
And this is First Name input code in JavaScript:
function validateForm(){
var x=document.forms["form"]["name"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}

In your HTML add something like:
<div id="form-errors"></div>
Then in JS, you can do that:
var alertDiv = document.getElementById('form-errors');
if (!x || x == '') {
alertDiv.textContent = 'First name must be filled out!';
}
Readings:
textContent
Similar question

Your question is about forms ? Since HTML5 you can simply write required on the input tab and it won't validate until you write some data.. you can then sanitize it.

In addition to Ramy's response, you can add jquery hide/show effects to display and hide the div element.
Also, do not forget to add style "z-index" to the div, so that it will appear on above other content of web-page.