How can I make interactive HTML form, example :
<select name="command">
<option value="send">Send</option>
<option value="cancel">Cancel</option>
</select>
<!--
I want the following text input hidden by default,
but active only if option "Cancel" is selected
-->
<input type="text" name="cancel_reason" id="needreason">
I want the "cancel_reason" input field is hidden by default, and shown if dropdown-option "Cancel" is selected before, otherwise it should remain hidden.
$('select[name=command]').change(function(){
if($(this).val() == 'cancel')
{
$('#needreason').show();
}
else
{
$('#needreason').hide();
}
});
Have a look at this jsFiddle. Non jQuery
<select id="command" name="command" onchange="javascript:selectChanged()">
<option value="send">Send</option>
<option value="cancel">Cancel</option>
</select>
<!--
I want the following text input hidden by default,
but active only if option "Cancel" is selected
-->
<input type="text" id="needreason" name="cancel_reason" style="display:none">
<script>
function selectChanged()
{
if (document.getElementById('command').value == "cancel")
document.getElementById('needreason').style.display = 'block';
else
document.getElementById('needreason').style.display = 'none';
}
</script>
Use this javascript function
function show_text_box(value)
{
if(value=='cancel')
{
$('#needreason').show();
}
else
{
$('#needreason').hide();
}
}
Call this function on your select at onchange event
<select name="command" onchange="show_text_box(this.value);">
and set text box hide
<input style="display:none;" type="text" name="cancel_reason" id="needreason">
Related
What I am trying to figure out is how to have an html input field appear when the value of other is selected from a dropdown menu. Right now the values for the dropdown list are coming from the results of a MySQL DB query, which works, but I can not seem to figure out how to get an input to appear when I select the other option.
$query = mysql_query("SELECT type FROM Dropdown_Service_Type"); // Run your query
echo '<select name="service_type">'; // Open your drop down box
echo '<option value="NULL"></option>';
// Loop through the query results, outputing the options one by one
while ($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';
}
echo '<option value="Other">Other</option>';
echo '</select>';// Close your drop down box
Use javascript, like in the example below. We can add an input field and have it hidden by default, using the style attribute:
<input name='otherInput' id='otherInput' type="text" style="display: none" />
var otherInput;
function checkOptions(select) {
otherInput = document.getElementById('otherInput');
if (select.options[select.selectedIndex].value == "Other") {
otherInput.style.display = 'block';
}
else {
otherInput.style.display = 'none';
}
}
<select onchange="checkOptions(this)" name="service_type" id="service_type">
<option value="NULL"></option>
<option value="43">43</option>
<!-- other options from your database query results displayed here -->
<option value="Other">Other</option>
</select>
<!-- the style attribute here has display none initially, so it will be hidden by default -->
<input name='otherInput' id='otherInput' type="text" style="display: none" />
There are 3rd party libraries like jQuery, AngularJS, PrototypeJS, etc., which can be used to make the code simpler by adding shortcut methods for DOM manipulation (though you should read this post). For example, with jQuery, using .on() (for the event handler binding), .show() and .hide() for the input display toggling, etc:
var otherInput;
var serviceTypeInput = $('#service_type');
serviceTypeInput.on('change', function() {
otherInput = $('#otherInput');
if (serviceTypeInput.val() == "Other") {
otherInput.show();
} else {
otherInput.hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service_type" id="service_type">
<option value="NULL"></option>
<option value="43">43</option>
<option value="Other">Other</option>
</select>
<input name='otherInput' id='otherInput' type="text" style="display: none" />
$(function() {
$('#sample').change(function() {
var val = this.value; // get the value of the select.
if (val == 'other') { // if the value is equal to "other" then append input below the select
$('html').append('<input type="text" id="inputOther"/>');
} else { // else then remove the input
$('#inputOther').remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sample">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="other">other</option>
</select>
I have the following drop down menu on my website
<select name="Templates" onchange="document.sendform.message.value = 'some text here'; return false;">
<option value="#" selected>----Templates----</option>
<option value="#">Absense</option>
<option value="#">Lates</option>
</select>
This currently sends text to a text area named "message" however I would like the text to be different for each option selected. Is there an easy way to do this at all?
Thanks!
Here it is:
http://jsfiddle.net/sinisake/3NQH7/
<form name="sendform">
<select name="Templates" onchange="document.sendform.message.value = this.value; return false;">
<option value="#" selected>----Templates----</option>
<option value="absense">Absense</option>
<option value="lates">Lates</option>
<input type="text" value="" name="message" />
</select>
</form>
the onchange event handler is what sends the text; if you want to send text based on the value of the selected option you should use a more advanced event handler:
document.TemplateForm.Templates.onchange = function () {
var value = this.value;
if (value === 'absence') {
setMessage('Absence message');
} else if (value === 'laters') {
setMessage('Laters message');
} else {
setMessage('Default message');
}
return false;
};
function setMessage(message) {
document.sendform.message.value = message;
}
I wrapped your select element in a form to be able to adress it simply in the JavaScript above:
<form name="TemplateForm">
<select name="Templates">
<option value="#" selected>----Templates----</option>
<option value="absence">Absense</option>
<option value="laters">Lates</option>
</select>
</form>
In order to see what value is selected I also added unique values for the options elements.
Live example: http://jsfiddle.net/fRB3s/1/
I have a drop-down menu with a list of school subjects in it, the last option is "Add New Subject" so when the user selects that option, I need a text box to appear.
My HTML form looks like this: (I have only included the relevant bits, there is a bit more stuff on it.
<form method="post" action="createQuestion.php" name="cq">
<select name="subject" id="subject">
<option value="biology">Biology</option>
<option value="maths">Maths</option>
<option value="economics">Economics</option>
<option value="newSub" <?php if($subject == "newSub1") { echo "SELECTED"; } ?>>
Add New Subject
</option>
</select>
<input type="text" name="newSubtxt" ID="newSubtxt" style="visibility:hidden">
</form>
I have spent ages trying to get this to work with javascript, and I just can't get it to work at all.
This is the js I wrote, but doesn't work
function addSubject(){
const newSub = document.getElementById('newSub').name;
const selectedSubject = document.getElementById('subject').value;
if (selectedSubject === newSub){
document.getElementById(newSubtxt).style.display = 'block';
}
}
I would be so grateful if someone could help me out with the javascript, so that it will work. Thanks in advance :)
Change your invisible input to:
<input type="text" name="newSubtxt" id="newSubtxt" style="display: none" />
and your js:
function addSubject() {
var selectedSubject = document.getElementById('subject').value;
if (selectedSubject == 'newSub') {
document.getElementById('newSubtxt').style.display = 'block';
}
}
Also see my jsfiddle.
Change the style of textbox with
<input type="text" name="newSubtxt" ID="newSubtxt" style='display:none;'>
I have used jQuery (javascript library) to solve your problem.
$(document).ready(function () {
$('#subject').change(function (){
if($('#subject').val()=='newSub')
$('#newSubtxt').show();
else
$('#newSubtxt').hide();
});
});
See my jsfiddle
I have a search bar like
<div id="searchbar">
<form>
<select name="Cars">
<option value="big">Big Cars</option>
<option value="small">Small Cars</option>
</select>
<input type ='text' name="searchkey" id ="search" onblur ='setTimeout('removeSearchSuggestions()', 20);' onkeyup ='getSearchSuggestions(this.value);'/>
<br/>
<div id = 'searchsuggest'></div>
<input type ='submit' value = 'Search' />
</form>
</div>
and i have the following jquery code snippet
function getSearchSuggestions(value){
if (value !=""){
$.post("searchSuggest.php", {searchPart:value}, function(data) {
$("#searchsuggest").html(data);
doSearchCSS();
});
} else {
removeSearchSuggestions();
}
}
So searchSuggest has access to "searchPart" i.e. the value that is typed into the input box. I am modifying something I got to work for a case without options. How do I modify the jquery function to access the selected option in searchSuggest.php?
Thanks!
This will help you: http://api.jquery.com/selected-selector/
Having some trouble here with this.
The setup:
A select object with a choice of "Other"
User selects "Other".
Script runs when this specific value is chosen, and dynamically changes the class of input object from "hide" to "show" (hidden and visible with css display).
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<?php
$otherGrade = $_POST['grade'];
if($otherGrade = "otherGrade")
{
echo("<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID)
{
if(document.getElementById(objInputID).className=='hide')
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>");
}
else
{
echo ("");
}
?>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Should I remove the onchange event from the select object? If so, I am at a loss as how to have the script executed.
Any solutions would be greatly appreciated.
The script should always be included in your page, since you want this to run while you make the changes in the dropdown list..
<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID, currentVal, correctVal)
{
if(correctVal == currentVal)
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade', this.value, 'otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Live example at : http://www.jsfiddle.net/MVymF/
why are you putting this in the post event? you can just render this as standard javascript as part of the page.
On post , the page will be refreshing , ad on reloading you are not saving the selected value of the select box.
The select box is not keep selected after posting. You have to do that.
>Other
As the value of option change the display hide also gone.
Fix that
If no need to submit the page . use this
http://api.jquery.com/val/
check demo of select