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.
Related
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!';
}
I want to show a name "I Live In" in the text box, like using placeholder option. So when I click on that text box a certain list of names should get displayed and "I Live In" this text should remain constant untill I select any option from the list.
How I can do that?
There's an easy method, using datalists. I think this is exactly what you've described in your question. It has autocomplete and placeholder:
<input list="something" name="something" placeholder="I Live In" />
<datalist id="something">
<option value="A cave" />
<option value="A house" />
<option value="A castle" />
</datalist>
JSFiddle Link: http://jsfiddle.net/wL3gmgdt/
And a PHPFiddle link with form processing: http://phpfiddle.org/main/code/nrc3-159g
Are you looking for something like this?
<form method="get" name="Country">
<select name="Country">
<option value="">I Live In</option>
<option value='England'>England</option>
<option value='Wales'>Wales</option>
</select>
<input type="submit" value="submit" />
</form>
View this jsfiddle:
http://jsfiddle.net/knt6prd7/
Try Select2, it can do what you want.
can you try this.
are looking for below one or something else?
<select id="select_task">
<option value="QuestionBank_AddNewPanel_Select_Round"selected="selected">Select</option>
<option value="Course1">Arul</option>
<option value="Course2">Vicky</option>
<option value="Course3">Dava</option>
</select>
JS fiddle link :http://jsfiddle.net/2jrt07ut/
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);
I'm new to PHP, and I can't figure this out.
I'm trying to figure out how to access the data of a group of select boxes I have defined in my HTML code. I tried grouping them as a class, but that doesn't seem to work... maybe I was doing it wrong.
This is the following HTML code.
<form action="" method="post">
<select class="foo">
<option> 1.....100</option>
</select>
<select class="foo">
<option> 1.... 500></option>
</select>
<input type="submit" value="Submit" name="submit"/>
</form>
I essentially want to group all my select boxes and access all the values in my PHP code.
Thanks
Use the name attribute in your select tags. Then you can access those fields by name in the $_POST variable.
<form action="" method="post">
<select name="number_one">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<select name="number_two">
<option value='a'>1</option>
<option value='b'>2</option>
<option value='c'>3</option>
</select>
<input type="text" name="something"/>
<input type="hidden" name="hidden_value" value="hidden"/>
<input type="submit" value="Submit" name="submit"/>
</form>
In your PHP you can access these like so:
$number_one = $_POST['number_one'];
$number_two = $_POST['number_two'];
$something = $_POST['something'];
$hidden_value = $_POST['hidden_value'];
I have a drop down list that has options that need to be passed through a query string. How would I go about doing this? Also, would anyone be able to list a way to do this both using a button and without using a button? Thank you!
<form method="get">
<select multiple="multiple" name="things[]">
...
</select>
<input type="submit" value="submit"/>
</form>
<?php
if(isset($_GET['things'])) {
foreach($_GET['things'] as $thing) {
echo $thing . '<br />';
}
}
?>
Based on Jani's response, are you wanting to have the form submit without a button but still have a backup button if the user doesn't have javascript? You can use noscript to cover that:
<form action="script.php" method="get">
<div>
<select name="options" onchange="this.form.submit()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<noscript>
<input type="submit" value="Go!" />
</noscript>
</div>
</form>
Without a button:
<form method="get">
<select multiple="multiple" name="things[]" onchange="this.form.submit()">
...
</select>
</form>