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/
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 have this code here, within a form:
<form method="post" action="">
<div id="icon-themes" class="icon32"><br></div>
<h2 class="nav-tab-wrapper"><a class='nav-tab' href='?page=symbiostock-ecommerce-manager&tab=homepage'>Home Settings</a><a class='nav-tab nav-tab-active' href='?page=symbiostock-ecommerce-manager&tab=invoices'>Invoices</a><a class='nav-tab' href='?page=symbiostock-ecommerce-manager&tab=VAT'>VAT Settings</a><a class='nav-tab' href='?page=symbiostock-ecommerce-manager&tab=feed'>Google Product Feed</a></h2>
<br />
<label for="ssem_year_num">Year
<input name="ssem_year_num" value="2014" type="text" />
</label>
<label for="ssem_month_num">
Month
<select name="ssem_month_num">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option selected value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</label>
<p class="submit"><input type="submit" name="submit" id="submit" class="button button-primary" value="Save Changes" /></p>
</form>
Despite changing the values in the text and select area, they do not seem to change upon form submission, as the var_dump($_POST) result shows this:
array (size=3)
'ssem_year_num' => string '2014' (length=4)
'ssem_month_num' => string '8' (length=1)
'submit' => string 'Save Changes' (length=12)
Having run my HTML through the w3 validator, it appears the HTML is not broken, so I'm left wondering - why aren't the values reflecting user input upon submission?
for the input text try this:
<label for="ssem_year_num">Year
<input type="text" placeholder="2014" name="ssem_year_num" />
</label>
and in the select remove the 'selected' property:
....
<option value="8">August</option>
....
and see what happens.
i think your problem is this: php is a preprocessed language.
If you are grabbing var_dump($_POST) at the same page, nothing should be in $_POST since when you load the php, you have not posted your form yet. therefore it will be empty.
put your php into seperate file and call it via action="submit.php", then use var_dump($_POST) and see it works!
Try to rename:
<input type="submit" name="submit" id="submit">
To
<input type="submit" name="s1" id="s1">
And see if that resolves the issue.
I am assuming there is javascript on the page listening for a form.submit event.
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'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 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>