I have a following form in my HTML code.
When I forget to fill in the surname,
the form will show me a "bubble message" You have to fill in the surname, then I
will fill in the surname, press the submit button and the values are submitted.
When I forget to change the default option from <select> the form will show
me a "bubble message" You have to choose something, then I will choose another option,
press the submit button, but the values are not submitted. I always have to refresh
the page. Do you know where is the problem and how to achieve it without refreshing?
<form action="add" method="post">
...
<select id="choice" name="choice"
required oninvalid="setCustomValidity('You have to choose something')"
oninput="setCustomValidity('')">
<option value="" selected="selected"></option>
<option value="first">first</option>
<option value="second">second</option>
</select>
...
<input type="text" name="surname" id="surname" value=""
required oninvalid="setCustomValidity('You have to fill in the surname')"
oninput="setCustomValidity('')">
...
</form>
There is no problem with the form data submitting as you will see from this jsfiddle example:
http://jsfiddle.net/vbnh1a4y/
<form action="/echo/html" method="post">
<select id="choice" name="choice">
<option value="" selected="selected"></option>
<option value="first">first</option>
<option value="second">second</option>
</select>
<input type="text" name="surname" id="surname" value="" />
<input type='submit' />
</form>
Related
I have created a simple html form but I have encountered a weird problem which I have never seen before. When I click on submit then all of the data is directly passing to the URL bar. I don't know what is wrong with this can anyone help?
Form:
<form id="form-data">
Name<br><input type="text" name="name" id="name" value=""><br><br>
Age<br><input type="number" name="number" id="age" value=""><br><br>
Gender<br>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Fe-male<br><br>
<select name="country">
<option value="Kashmir">Kashmir</option>
<option value="Egypt">Egypt</option>
<option value="Norway">Norway</option>
<option value="Iceland">Iceland</option>
</select><br>
<br><input type="submit" id="submit" value="Save">
</form>
the form uses get method therefore it displays the form values in the url. change the method to post to avoid this
method="post"
<!DOCTYPE html>
<html>
<head>
<title></title>
<body>
<form id="form-data" method="post">
Name<br><input type="text" name="name" id="name" value=""><br><br>
Age<br><input type="number" name="number" id="age" value=""><br><br>
Gender<br>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Fe-male<br><br>
<select name="country">
<option value="Kashmir">Kashmir</option>
<option value="Egypt">Egypt</option>
<option value="Norway">Norway</option>
<option value="Iceland">Iceland</option>
</select><br>
<br><input type="submit" id="submit" value="Save">
</form>
</body>
</html>
Add method attribute to your form tag like this:
<form action="welcome.php" method="post">
https://www.w3schools.com/tags/att_form_method.asp
If you don't send the data somewhere, it gets passed as URL parameters to the current page:
From MDN Web Docs:
The action attribute defines where the data gets sent. Its value must
be a valid relative or absolute URL. If this attribute isn't provided,
the data will be sent to the URL of the page containing the form — the
current page.
I would like the user not to be able to submit a form unless they have selected something from the dropdown datalist which appears as they type. If they just typed something random, I don't want the form to be submitted.
If this isn't possible, would a better option to be to check if the typed text appears in the datalist when the user submits?
<form method="post">
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" name="submit">
</form>
<?php
if(isset($_POST['submit']
// function to check if something from the datalist was clicked and NOT just typed
}else{
echo'Select something from the datalist!';
}
While I can set the datalist as required, this can easily be by-passed.
Using required in the input tag that has the same id as the datalist you are targeting will check force the user to input something.
<form method="post">
<input type="text" list="browsers" required>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" name="submit">
</form>
<?php
if(isset($_POST['submit']
// function to check if something from the datalist was clicked and NOT just typed
}else{
echo'Select something from the datalist!';
}
However it will not block the user from giving an input that is not listed in the dropdown. That needs to be checked via Javascript just before submission.
<form method="post" onsubmit="return myCheckFunction(this)>
<!-- Your form items -->
<!--------------------->
</form>
<script>
myCheckFunction(form) {
// get the values that are currently under the datalist tag in option tags
// get the user input
// compare the options with the user input
// if one is equal with the user input submit the form with the method submit();
// else don't submit the form, the user will have to change his input
}
</script>
If you wish some help with the js i'll be happy to help.
If you want to go with server side validation,
<form method="post">
<input type="text" list="browsers" name="items" required>
<datalist id="browsers" >
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" name="submit">
</form>
<?php
if(isset($_POST['submit']
$check = array('Internet Explorer', 'Firefox', 'Chrome', 'Opera', 'Safari');
if(in_array($_POST['items'], $check)){
// Code to be execute.
} else{
echo'Select something from the datalist!';
}
}else{
echo'Select something from the datalist!';
}
Heres my form:
<form method="POST" enctype="multipart/form-data" action="/my-account/update">
<select name="userType" class="form-control" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<select name="userIsInSearch" class="form-control" >
<option value="1" selected="selected">1</option>
<option value="0">0</option>
</select>
<input type="text" class="form-control" id="fwn" name="signupfname">
<input type="text" class="form-control" id="sn" name="signupsname">
<input type="text" class="form-control" id="usrf" name="signupemail">
<input type="password" class="form-control" id="pwdf" name="signuppass">
<input type="password" class="form-control" id="pwdfc" name="signuppassconf">
<input type="submit" value="Update!" class="btn btn-green" />
</form>
I've noticed that 9/10 the form POSTs completely fine but sometimes it has a problem, I've noticed this on another form on the website too and I cant figure out what is causing it.
I have found a way to make the problem happen everytime, by simply typing "alert(" (without quotations) into any of the input fields causes the entire POST to be empty but php://input is fine.
The system is in codeigniter and I have tried dumping $_POST and php://input at the top of the index.php file and have the same results so I dont think it is codeigniter causing it.
Any help or ideas greatly appreciated!
This is my html form and php file i have to insert my budget dropdown values by select into database
i have to select values from budget and selected value can insert in database
and my data is inserting in my database when i click twice on submit button
<form action="insert.php" method="post" id="register-form" onsubmit=" return add();">
<div class="label"> Name</div><input type="text" id="name" name="name" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" /><br />
<div class="label">Phone Number</div><input type="text" id="phone" name="phone" /><br />
<div class="label">budget</div>
<select id="budget" name="budget">
<option value="">select</option>
<option value="1">0-100</option> <!-- first option contains value="" -->
<option value="2">100-200</option>
<option value="3">200-300</option>
</select>
<br /><br />
<input type="submit" onclick="add()" name="submit" />
<div id="message"></div>
</form>
insert.php
<?php
include("config.php");
if(isset($_POST['submit'])){
$name=$_POST["name"];
$email=$_POST["email"];
$phone=$_POST["phone"];
$budget=$_POST["budget"];
$insert_query="insert into form(name,email,phone,budget) values ('$name','$email','$phone','$budget')";
$con=mysql_query($insert_query);
}
?>
Do the following:
<select id="budget" name="budget">
<option value="">select</option>
<option value="0-100">0-100</option> <!-- first option contains value="" -->
<option value="100-200">100-200</option>
<option value="200-300">200-300</option>
</select>
Ensure that your field in the database is string/varchar
Re-visit the add() as well. That might be the cause for inserting successfully after the second click.
dropdown pass option value in variable so change the option value which you want to insert in database
<select id="budget" name="budget">
<option value="">select</option>
<option value="0-100">0-100</option> <!-- first option contains value="" -->
<option value="100-200">100-200</option>
<option value="200-300">200-300</option>
</select>
<select id="budget" name="budget">
<option value="">select</option>
<option value="0-100">0-100</option> <!-- first option contains value="" -->
<option value="100-200">100-200</option>
<option value="200-300">200-300</option>
</select>
if u want to select multiple option u use
<select id="budget" name="budget" multiple="multiple">
The $_POST["budget"]; is taking the value that is in the option, in this case the value for "0-100" is 1. If you want the value to be stored in the database use "0-100" as the value.
As far as the insert problem goes, try using this syntax:
$budget=$_POST['budget'];
$query = "INSERT INTO users ( database_budget )
VALUES ('$budget');";
the top value being the value in the database and the bottom value being the post value.
This is assuming that you're connecting to the database correctly. Also use single quotes for post values not double quotes.
I have one form like this
Arrivo:
<select name="arrivo">
<option value="2014-06-15">domenica 15 Giugno</option>
<option value="2014-06-16">lunedì 16 Giugno</option>
<option value="2014-06-17">martedì 17 Giugno</option>
Partenza: <select name="partenza">
<option value="2014-06-15">domenica 15 Giugno</option>
<option value="2014-06-16">lunedì 16 Giugno</option>
<option value="2014-06-17">martedì 17 Giugno</option>
<option value="2014-06-18">mercoledì 18 Giugno</option>
Adulti:
<select name="PER">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<INPUT TYPE = "Submit" VALUE = "Calcola Preventivo">
</form>
I need that some data (like ARRIVO E PARTENZA) will auto-filled in another form (that will be created after a user click on submit), that will be added a new field that user must complete. See this example (where name and email are the new field that user must fill in the second form)
Arrivo:
<input type="text" name="arrivo2" value='$_POST['arrivo']><br>
Partenza
<input type="text" name="partenza2" value='$_POST['partenza']><br>
email
<input type="text" name="email"><br>
Name
<input type="text" name="name"><br>
<INPUT TYPE = "Submit" VALUE = "emailme">
form 1
<form method="post">
<input type="text" name="name" />
<input type="hidden" name="hidname"/>
</form>
after submitting this form (i assume you know process for submitting a form) get the post values in session variable like this
session_start();// this starts a session
$_SESSION['name']=$_POST['name'];
$_SESSION['hidname']=$_POST['hidname'];
from 2
<?php session_start(); ?>
<form method="post">
<input type="text" name="name2" value="<?php if(isset($_SESSION['name'])) echo $_SESSION['name'];?>"/>
<input type="text" name="hidname2" value="<?php if(isset($_SESSION['hidname'])) echo $_SESSION['hidname'];?>" />
</form>