Using javascript within php in order to make a selectbox visible

Using javascript within php in order to make a selectbox visible - javascript

I am using php and want my selected selectbox to become visible based on which one I select. My html code is
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
And my php code so far is
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
}
else if ($selection == 2) {
}
else {
}
}
?>
so my question is what would the javascript look like inside of the if/else statement to make the selectboxes visible?

Why not do it client side using javascript?
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections" id="ddlSelections" onChange="changeSelect()"> <!-- call function on change -->
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" id="ddlTickets"> <!-- visible by default -->
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none" id="ddlSales">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
javascript
<script>
function changeSelect()
{
document.getElementById('ddlTickets').style.display = "none";
document.getElementById('ddlProjects').style.display = "none";
document.getElementById('ddlSales').style.display = "none";
switch(document.getElementById('ddlSelections').value) // Get selected one
{
case "1":
document.getElementById('ddlTickets').style.display = "block";
break;
case "2":
document.getElementById('ddlProjects').style.display = "block";
break;
case "3":
document.getElementById('ddlSales').style.display = "block";
break;
}
}
</script>
If you must use PHP
<form name="frmIndex" action="index.php" method="post">
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" selected>Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
*/
}
else if ($selection == 2) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" selected>Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
*/
}
else {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" >Projects</option>
<option value="3" selected>Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
*/
}
}
?>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>

A slightly shorter example using jQuery's .change() which is more unobtrusive than the on* attributes like onclick, onchange, etc.
replace all the style="display:none" with a class="subDDL" and then simply style with .subDDL{display: none;}. I did leave one style="display:initial" for the default option.
then add an id to your sublists that correspond to the values in ddlSelections
now you only need one submit button
$("[name='ddlSelections']").change(function(){
$(".subDDL").hide();
$('#' + $("[name='ddlSelections'] option:selected").val()).show();
});
.subDDL{
display: none;
}
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<select id="1" name="ddlTickets" class="subDDL" style="display:initial">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select id="2" name="ddlProjects" class="subDDL">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select id="3" name="ddlSales" class="subDDL">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" value="Submit" name="btnChoose" />
</form>

Related

Why isn't the second selection disabled when i pick all products in the first one?

https://jsfiddle.net/a8r057du/
I don't understand why I don't disable the select "A" when I select the all products option
<form method="post" action="shop.php">
<select name='filterp'>
<option defaultSelected>Please select an option</option>
<option value="allp" isSelect="disabled()">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function disabled()
{
document.getElementsById("A").disabled=false;
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >

you have isSelect="disabled()" in your code which doesnt do anything because its not an actual method
to disable the select if the option is selected, you need to use onchange or the change eventListener and check if the option you clicked is the "all products" option
js code :
function change(value){
if(value === "allp"){
document.getElementById("A").disabled = true;
}
}
here, i used an if statement to check if the value is "allp" which is the "all products" option and disable the select element
another problem is you havedocument.getElementById("A").disabled = false; , it should be true
full code:
<form method="post" action="shop.php">
<select name='filterp' onchange="selectOnchange(value)">
<option defaultSelected>Please select an option</option>
<option value="allp">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function selectOnchange(value){
if(value === "allp"){
document.getElementById("A").disabled= true;
}
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
</form>
and you also used document.getElementsById which is wrong, it should be getElementById

thank you very much you saved me
<form method="post" action="shop.php">
<select name='filterp' onchange="selectOnchange(value)">
<option defaultSelected>Please select an option</option>
<option value="allp">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function selectOnchange(value){
if(value === "allp"){
document.getElementById("A").disabled= true;
}
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
</form>

pass session variables from one page to another

i have a php page that is a sort of submition form with 3 dropdown sections, that have to send the selections from the dropdowns when you click a button. The form is as follows:
<div class="statsValPlate">
<label>Main Score</label>
<select name="scoreSelect">
<option value="301">301</option>
<option value="501">501</option>
<option value="701">701</option>
<option value="1001">1001</option>
</select>
</div>
<div class="statsValPlate">
<label>Legs Format</label>
<select name="legSelect">
<option value="3">2 of 3</option>
<option value="5">3 of 5</option>
<option value="7">4 of 7</option>
<option value="9">5 of 9</option>
</select>
</div>
<div class="statsValPlate">
<label>Sets Format</label>
<select name="setSelect ">
<option value="3">2 of 3</option>
<option value="5">3 of 5</option>
<option value="7">4 of 7</option>
<option value="9">5 of 9</option>
</select>
</div>
<form method="get" action="scoreboard.php">
<button id="submit" name ="submit" class="push_button red">Start Game</a><br>
</form>
<?php
$_SESSION['gameScore'] = $_POST['scoreSelect'];
$_SESSION['legScore'] = $_POST['legSelect'];
$_SESSION['setScore'] = $_POST['setSelect'];
?>
and i want for instance the selection of the first form has to show up as a label value here:
<label class="scorePlate" id="num1" value="<?php echo $_SESSION['gameScore']?>">
<!--<?php echo $_SESSION["player1Score"]?>-->
<script>
document.write(new_score_player_1);
</script>
</label>
but for some reason it doesn't work. What's the problem

First, start the session - session_start().
Second, put all those selects inside the form. When they are outside the form, the values selected won't be sent on form submission.
Second, make the form's method POST, not GET.
Your code should look something like this:
<?php
session_start();
if (isset($_POST['submit']) {
$_SESSION['gameScore'] = $_POST['scoreSelect'];
$_SESSION['legScore'] = $_POST['legSelect'];
$_SESSION['setScore'] = $_POST['setSelect'];
}
?>
<form method="POST" action="scoreboard.php">
<div class="statsValPlate">
<label>Main Score</label>
<select name="scoreSelect">
<option value="301">301</option>
<option value="501">501</option>
<option value="701">701</option>
<option value="1001">1001</option>
</select>
</div>
<div class="statsValPlate">
<label>Legs Format</label>
<select name="legSelect">
<option value="3">2 of 3</option>
<option value="5">3 of 5</option>
<option value="7">4 of 7</option>
<option value="9">5 of 9</option>
</select>
</div>
<div class="statsValPlate">
<label>Sets Format</label>
<select name="setSelect ">
<option value="3">2 of 3</option>
<option value="5">3 of 5</option>
<option value="7">4 of 7</option>
<option value="9">5 of 9</option>
</select>
</div>
<button id="submit" name ="submit" class="push_button red">Start Game</a><br>
</form>
And on the other page:
<?php
session_start();
?>
<label class="scorePlate" id="num1" value="<?php echo $_SESSION['gameScore']; ?>">
<!--<?php echo $_SESSION["player1Score"]?>-->
<script>
document.write(new_score_player_1);
</script>
</label>

how do you make a dependent drop down list in php

Is there any chance that I can get dependent drop down list in php - without using jquery or javascript - please help me through few options or suggestions if available
/group 1 /
<div class="form-group">
<label for="return_ori">Return scenarios group A signals</label>
<select name="return_ori" class="form-control" id="Site Orientation">
<option value="East">none</option>
<option value="GA">hello1 </option>
<option value="GB">hello2 </option>
<option value="GC">hello3 </option>
<option value="GD">hello4 </option>
<option value="GE">hello5 </option>
<option value="GF">hello6 </option>
<option value="GG">hello7 </option>
<option value="GH">hello8 </option>
<option value="GI">hello9 </option>
<option value="GK">hello10 </option>
<option value="Gl">hello11</option>
<option value="GM">hello12</option>
<option value="GN">hello13</option>
<option value="GO">hello14</option>
</select>
</div>
/ group 2 /
<div class="form-group">
<label for="returnb_ori">Return scenarios group B signals</label>
<select name="returnb_ori" class="form-control" id="Site Orientation">
<option value="reb1">None </option>
<option value="reb2">congrats1 </option>
<option value="reb3">congrats2</option>
<option value="reb4">congrats3</option>
<option value="reb5">congrats4</option>
<option value="reb6">congrats5</option>
<option value="reb7">congrats6</option>
<option value="reb8">congrats7 </option>
<option value="reb9">congrats8</option>
<option value="reb10">congrats9 </option>
<option value="reb11">congrats10 </option>
<option value="reb12">congrats11</option>
<option value="reb13">congrats12</option>
<option value="reb14">congrats13</option>
</select>
</div>
Is there any chance to have drop down for group 1 and group 2 and dependent drop down for other elements as sub categories - thank you

If you don't want to use js in your dependable dropdowns, then you have to refresh the page with some query string.

You just have submit the form but use some logic to tell the form how to build itself based on previous selected options. Here is a basic example.
function dropDown($title='cat')
{
ob_start();
echo '<select name="'.$title.'">';
for($i = 0; $i < 10; $i++) {
$name = rand(100,999);
echo '<option value="'.$title.$name.'">'.$title.$name.'</option>';
}
echo '</select>';
$data = ob_get_contents();
ob_end_clean();
return $data;
}
?>
<form method="post">
<?php echo dropDown(); ?>
<?php if(!empty($_POST) && empty($_POST['subcat'])) {
echo dropDown('subcat');
?><input type="text" name="subcat" value="true" />
<?php }
?>
<input type="submit" value="<?php echo (!empty($_POST['cat']))? 'SAVE':'GET SUB'; ?>" />
</form>
Page load:
<form method="post">
<select name="cat">
<option value="cat649">cat649</option>
<option value="cat801">cat801</option>
<option value="cat974">cat974</option>
<option value="cat519">cat519</option>
<option value="cat914">cat914</option>
<option value="cat799">cat799</option>
<option value="cat968">cat968</option>
<option value="cat687">cat687</option>
<option value="cat403">cat403</option>
<option value="cat355">cat355</option>
</select>
<input type="submit" value="GET SUB" />
</form>
After submit:
<form method="post">
<select name="cat">
<option value="cat545">cat545</option>
<option value="cat442">cat442</option>
<option value="cat733">cat733</option>
<option value="cat947">cat947</option>
<option value="cat446">cat446</option>
<option value="cat327">cat327</option>
<option value="cat706">cat706</option>
<option value="cat190">cat190</option>
<option value="cat143">cat143</option>
<option value="cat254">cat254</option>
</select>
<select name="subcat">
<option value="subcat455">subcat455</option>
<option value="subcat728">subcat728</option>
<option value="subcat478">subcat478</option>
<option value="subcat883">subcat883</option>
<option value="subcat756">subcat756</option>
<option value="subcat765">subcat765</option>
<option value="subcat978">subcat978</option>
<option value="subcat589">subcat589</option>
<option value="subcat820">subcat820</option>
<option value="subcat234">subcat234</option>
</select>
<input type="text" name="subcat" value="true" />
<input type="submit" value="SAVE" />
</form>

Disable option in other select

I have problem with option. I created search form. When I select class .tylkopolska I want disable all options from next select with id #kraje
and leave there option with class .wlacozneto enabled. How do this using jQuery?
My code is here;
<form method="get" action="<?php bloginfo('url'); ?>">
<fieldset>
<!-- wybór -->
<h2 class="h-feature-headline h6" style="margin-bottom: 15px;"><span><i class="x-icon-question" data-x-icon="" style="background-color: #38b7f7;"></i>Jakie oferty Cię interesują? </span></h2>
<input type="radio" id="ofertadlaszkol" checked>Oferta dla szkół</input> <input type="radio" style="margin-left: 10px;" id="ofertadlafirm">Oferta dla firm</input>
<!-- kategorie OFERTA DLA SZKOL -->
<select name="category_name" id="sofertyszkola">
<option value="szkoly" >WSZYSTKIE OFERTY</option>
<option value="wycieczki-kilkudniowe" class="tylkopolska">WYCIECZKI W POLSCE - KILKUDNIOWE</option>
<option value="wycieczki-jednodniowe">WYCIECZKI W POLSCE - JEDNODNIOWE</option>
<option value="wycieczki-zagraniczne">WYCIECZKI ZAGRANICZNE</option>
<option value="zielone-szkoly-w-gorach">ZIELONE SZKOŁY W GÓRACH</option>
<option value="zielone-szkoly">ZIELONE SZKOŁY NAD MORZEM</option>
</select>
<!-- kategorie OFERTA DLA FIRM -->
<select name="category_name" id="sofertyfirma">
<option value="firma">WSZYSTKIE OFERTY</option>
<option value="wycieczki-zagraniczne-firma">WYCIECZKI ZAGRANICZNE</option>
<option value="wycieczki-w-polsce">WYCIECZKI W POLSCE</option>
</select>
<!-- jaki kraj -->
<h2 class="h-feature-headline h6"><span><i class="x-icon-map" data-x-icon="" style=" background-color: #2ecc71;"></i>Kraj wyjazdu</span></h2>
<select name="tag" id="kraje">
<option value="Polska">POLSKA</option>
<option value="AUSTRIA">AUSTRIA</option>
<option value="BELGIA">BELGIA</option>
<option value="BIAŁORUŚ">BIAŁORUŚ</option>
<option value="BOŚNIA i HERCEGOWINA">BOŚNIA i HERCEGOWINA</option>
<option value="CHORWACJA">CHORWACJA</option>
<option value="CZECHY">CZECHY</option>
<option value="ESTONIA">ESTONIA</option>
<option value="FRANCJA">FRANCJA</option>
<option value="GRECJA">GRECJA</option>
<option value="HISZPANIA">HISZPANIA</option>
<option value="LITWA">LITWA</option>
<option value="ŁOTWA">ŁOTWA</option>
<option value="NIEMCY">NIEMCY</option>
<option value="ROSJA">ROSJA</option>
<option value="RUMUNIA">RUMUNIA</option>
<option value="SŁOWACJA">SŁOWACJA</option>
<option value="SŁOWENIA">SŁOWENIA</option>
<option value="UKRAINA">UKRAINA</option>
<option value="WĘGRY">WĘGRY</option>
<option value="WŁOCHY">WŁOCHY</option>
</select>
<button type="submit">Szukaj ofert</button>
</fieldset>
</form>
<script>
var update_szkoly = function () {
if ($("#ofertadlaszkol").is(":checked")) {
$('#sofertyszkola').prop('disabled', false);
$("#ofertadlafirm").prop('checked', false);
$('#sofertyfirma').prop('disabled', true);
$('#sofertyszkola').show();
$('#sofertyfirma').hide();
}
else {
$('#sofertyszkola').prop('disabled', 'true');
}
};
$(update_szkoly);
$("#ofertadlaszkol").change(update_szkoly);
var update_firmysa = function () {
if ($("#ofertadlafirm").is(":checked")) {
$('#sofertyfirma').prop('disabled', false);
$("#ofertadlaszkol").prop('checked', false);
$('#sofertyszkola').prop('disabled', true);
$('#sofertyszkola').hide();
$('#sofertyfirma').show();
}
else {
$('#sofertyfirma').prop('disabled', 'disabled');
}
};
$(update_firmysa);
$("#ofertadlafirm").change(update_firmysa);
</script>

I want disable all options from next select with id #kraje and leave
there option with class .wlacozneto enabled.
to disable every option except with class wlacozneto
$( "#kraje option" ).not(".wlacozneto").prop('disabled', true);
use not selector to exclude certain results.

Bind a change event:
$('#sofertyszkola').change(function() {
$('#kraje').children().not('.wlacozneto')
.prop('disabled', $(':selected', this).is('.tylkopolska'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<!-- wybór -->
<h2 class="h-feature-headline h6" style="margin-bottom: 15px;"><span><i class="x-icon-question" data-x-icon="" style="background-color: #38b7f7;"></i>Jakie oferty Cię interesują? </span></h2>
<input type="radio" id="ofertadlaszkol" checked>Oferta dla szkół</input>
<input type="radio" style="margin-left: 10px;" id="ofertadlafirm">Oferta dla firm</input>
<!-- kategorie OFERTA DLA SZKOL -->
<select name="category_name" id="sofertyszkola">
<option value="szkoly">WSZYSTKIE OFERTY</option>
<option value="wycieczki-kilkudniowe" class="tylkopolska">WYCIECZKI W POLSCE - KILKUDNIOWE</option>
<option value="wycieczki-jednodniowe">WYCIECZKI W POLSCE - JEDNODNIOWE</option>
<option value="wycieczki-zagraniczne">WYCIECZKI ZAGRANICZNE</option>
<option value="zielone-szkoly-w-gorach">ZIELONE SZKOŁY W GÓRACH</option>
<option value="zielone-szkoly">ZIELONE SZKOŁY NAD MORZEM</option>
</select>
<!-- kategorie OFERTA DLA FIRM -->
<select name="category_name" id="sofertyfirma">
<option value="firma">WSZYSTKIE OFERTY</option>
<option value="wycieczki-zagraniczne-firma">WYCIECZKI ZAGRANICZNE</option>
<option value="wycieczki-w-polsce">WYCIECZKI W POLSCE</option>
</select>
<!-- jaki kraj -->
<h2 class="h-feature-headline h6"><span><i class="x-icon-map" data-x-icon="" style=" background-color: #2ecc71;"></i>Kraj wyjazdu</span></h2>
<select name="tag" id="kraje">
<option value="Polska" >POLSKA</option>
<option value="AUSTRIA">AUSTRIA</option>
<option value="BELGIA">BELGIA</option>
<option value="BIAŁORUŚ">BIAŁORUŚ</option>
<option value="BOŚNIA i HERCEGOWINA">BOŚNIA i HERCEGOWINA</option>
<option value="CHORWACJA">CHORWACJA</option>
<option value="CZECHY">CZECHY</option>
<option value="ESTONIA" class='wlacozneto'>ESTONIA</option>
<option value="FRANCJA">FRANCJA</option>
<option value="GRECJA">GRECJA</option>
<option value="HISZPANIA">HISZPANIA</option>
<option value="LITWA">LITWA</option>
<option value="ŁOTWA">ŁOTWA</option>
<option value="NIEMCY">NIEMCY</option>
<option value="ROSJA">ROSJA</option>
<option value="RUMUNIA">RUMUNIA</option>
<option value="SŁOWACJA">SŁOWACJA</option>
<option value="SŁOWENIA">SŁOWENIA</option>
<option value="UKRAINA">UKRAINA</option>
<option value="WĘGRY">WĘGRY</option>
<option value="WŁOCHY">WŁOCHY</option>
</select>
<button type="submit">Szukaj ofert</button>
</fieldset>
Bind a change event on the selector element.
Now get the target element's children option elements and exclude specific one with .not(selector).
Use .prop() method to disable all other options if the selected option is .tylkopolska.

document.getElementById("kraje").disabled = true;

$( "#kraje" ).prop('disabled', true);
$( "#kraje.wlacozneto" ).prop('disabled', false);

I want to activate a textbox on selecting other option from dropdown list only else it remains inactive

I want that when I select option "others " from dropdown list then only the text box is active else that box remains inactive... I am attaching the code please help me and change the code according to my required specification.......
<div class="width-qrtr">
<label>Type of event</label>
<select name="" id= "select">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
</div>
<div class="width-qrtr">
<label>If you choose 'Other'</label>
<input type="text" value="" name=""/>
</div>

Here's how you do it with pure javascript...
<select name="" id= "select" onchange="onSelectChange()">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
<input type="text" id="yourTextBox" disabled="disabled"/>
Then in your script:
function onSelectChange(){
var sel = document.getElementById('select');
var strUser = sel.options[sel.selectedIndex].text; //getting the selected option's text
if(strUser == 'Other'){
document.getElementById('yourTextBox').disabled = false; //enabling the text box because user selected 'Other' option.
}
}

<div class="width-qrtr">
<label>Type of event</label>
<select name="selectdrop" id= "selectdrop" onchange="return Sbox();">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
<input type="text" id="tbox" name="tbox" disabled />
</div>
<script lanaguage="javascript">
function Sbox()
{
if(document.getElementById("selectdrop").value=='5')
{
document.getElementById("tbox").disabled=false;
}
}
</script>
Running code : http://jsfiddle.net/cvb82wtq/

<div class="width-qrtr">
<label>Type of event</label>
<select name="" id="select">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
</div>
<input type='text' name='othertext' id="other" disabled='disabled'/>
Script-
$(document).ready(function () {
$("#select").change(function () {
if ($(this).find("option:selected").val() == "5") {
$("#other").removeAttr("disabled")
} else {
$("#other").attr("disabled","disabled")
}
});
});
Here's the fiddle http://jsfiddle.net/vikrant47/gywg9hue/1/

Bind an event listener to the dropdown menu. When it changes, if the option selected is "Other" (value=5), enable the textbox. Otherwise, disable the textbox.
HTML:
<div class="width-qrtr">
<label>Type of event</label>
<select name="" id= "select">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
</div>
<div class="width-qrtr">
<label>If you choose 'Other'</label>
<input id="textbox" disabled="true" type="text" value="" name=""/>
</div>
JS:
document.getElementById('select').addEventListener('change', function() {
if (this.value == 5) {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
Here's a fiddle.

We Keep Coding

JavaScript is the programming language of the Web.

Using javascript within php in order to make a selectbox visible - javascript

Related

Why isn't the second selection disabled when i pick all products in the first one?

pass session variables from one page to another

how do you make a dependent drop down list in php

Disable option in other select

I want to activate a textbox on selecting other option from dropdown list only else it remains inactive

Categories

Resources