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!';
}
Related
This would be a part of a search menu, but I can't get the POST from it. I searched for it, but cant make it work.
Notice: Undefined index: Make in C:\xampp\htdocs\carsale\carsale_dropdown.php on line 3
<form name="mainForm" action="carsale_dropdown.php" method="POST">
<select class="form-control" name="Make" >
<option value="Nissan">Nissan</option>
<option value="Toyota">Toyota</option>
</select>
</form>
<?php
if (isset($_POST['search'])){
$selectedMake = $_POST['Make'];
$sql="SELECT * FROM vehicles WHERE make=selectedMake";
}
?>
In order to send something via $_POST or $_GET you need to submit it. Therefore you need something like
<form name="mainForm" action="carsale_dropdown.php" method="POST">
<select class="form-control" name="Make" >
<option value="Nissan">Nissan</option>
<option value="Toyota">Toyota</option>
</select>
<button type="submit">Click</button>
</form>
Every form has to be submited.
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>
I have a form in html that takes the inputs and does some calculations. What I would like to do is have a drop down menu that has some options, but if the user's option isn't there, they can enter their own.
For this example let's assume it takes the sum of all the entries:
<form action="action.php">
<input type="text" name="int1" value="1">
<select name="dropdown">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="NULL">Other</option>
</select>
<input type="text" name="other" value="other">
<input type="submit" value="go">
</form>
My idea is that it would use either the drop down menu, or the "other" input if the drop down is set to other. Is there a way to care care of this in html or is this done with an if statement in php? just some of my ideas.
Help appreciated,
Thanks
Just do something like
if (isset($_GET['dropdown'])
&& $_GET['dropdown'] == 'NULL'
&& isset($_GET['other'])
) {
$value = $_GET['other'];
}
elseif (isset($_GET['dropdown'])) {
$value = $_GET['dropdown'];
}
else {
// Something went wrong. Handle error
}
You could also use JavaScript to submit the form so that only one value is passed to PHP if you're looking for a client-side solution.
You can do something like this using jquery
<script src="http://code.jquery.com/jquery-latest.js"></script>
<html><body>
<form action="" method="POST">
<input type="text" name="int1" value="1">
<select name="dropdown" id="dropdown">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="NULL">Other</option>
</select>
<input type="text" name="other" value="other" id="other">
<input type="submit" value="go">
</form>
</body></html>
<script>
$(document).ready(function(){
$("#other").hide();
$('#dropdown').change(function(){
if($(this).val()=='NULL'){
$("#other").show();
}
else{
$("#other").hide();
}
});
})
</script>
and use php to catch the correct value
I would embed a PHP statement there that says if dropdown value is equal to other then add input text field under drop down box for user input.
I have a form say i have selected Volva from drop down box . So without clicking on submit button when i move to next field that is <input> the value that is volva should get store in php variable
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="text" name="abc" />
</form>
</body>
</html>
Put event on select, onBlur = saveValue();
<select name="cars" onBlur = "saveValue(this.value);">
saveValue should be a js function, which then sends an ajax request to the server.
I'm trying to pass two variables (a search query (String) and a column name (also a String)) via a HTML form. The first string is entered into a text box and the second is selected from a drop-down menu.
Obviously this method doesn't work:
<h3>Search for a Customer</h3>
<form action="search.php" method="get">
<input type="text" id="sString">
<select name="sField">
<option value="Name">Name</option>
<option value="HostID">Host ID</option>
<option value="OrderNumber">Order Number</option>
<option value="Theme">Theme</option>
</select>
<input type="submit" value="submit"/>
</form>
You need to give your <input> field a name in order for this to work. Unnamed inputs won't get passed through the form post.
You don't have a 'name' parameter on your sString input boxes. The name parameter is what gets sent back to the server, not the field's ID:
<input type="text" id="sString" name="sString">
and then in PHP
$search = $_GET['sString'];
You need to use attribute name instead of value.
<h3>Search for a Customer</h3>
<form action="search.php" method="get">
<input type="text" id="sString" name="sString"/>
<select name="sField">
<option name="Name">Name</option>
<option name="HostID">Host ID</option>
<option name="OrderNumber">Order Number</option>
<option name="Theme">Theme</option>
</select>
<input type="submit" value="submit"/>
</form>
Try:
<form action="search.php" method="get">
<input type="text" name="sString" id="sString" value="">
<select name="sField">
<option value="Name">Name</option>
<option value="HostID">Host ID</option>
<option value="OrderNumber">Order Number</option>
<option value="Theme">Theme</option>
</select>
<input type="submit" value="submit"/>
</form>
You should be able to access form entered variables by $_GET array in search.php. To see what is going on try var_dump($_GET);