I'm having a dropdown list in my web page. And it contains two lists. 1. Yes 2.No. If we select yes then the desired text box and label will visible, else it won't be visible. So how to do this?
You can use javascript to do this. Something like
<script type="text/javascript">
function ChangeSel(val)
{
var tYes = document.getElementById("txtYes");
if ( val === "1" )
{
tYes.style.display = "inline";
}
else
{
tYes.style.display = "none";
}
}
</script>
<select id="sel1" onchange="ChangeSel(this.value);">
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<input type="text" id="txtYes" value="" />
See a working demo.
You can do this using a post to the server side. Note that they use a button to hide the dropdown instead of the other way around, but the concept is the same.
Or you can do this using javascript. Basically you add a javascript function the the ASP:DropDownList's OnChange event.
Also see the tutorials at The official ASP.Net Tutorial Site.
Related
I am using WordPress for my website.
I want to add radio buttons to my WordPress page when a radio button is selected I want to display a table below. Can anybody help me
Hello maybe more details help ppl to tell you better answer. but with
this much of information i'v got something for you : this is just
sample. you just need to edit for your specific purpose.
** put html code in wordpress editor ( put in editor section, not visual, visual editor maybe auto convert some tags)
** put js codes into your js script tag some where!! if you don't have any idea just use this plugin
** if jQuery not worked add this lines to function.php of your theme or child-theme to add jQuery library to your page(99% wordpress load it by default) :
// include custom jQuery
function shapeSpace_include_custom_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');
HTML CODE :
<form>
<div>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="show-table"></div>
</form>
SCRIPT CODE:
<script>
jQuery(document).ready(function ($) {
$("input").on("click", function () {
var checkedNode = $("input:checked").val();
var orangTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>orang</td></tr></table>';
var appleTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>apple</td></tr></table>';
var bananaTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>banana</td></tr></table>';
switch (checkedNode) {
case 'orange':
$("#show-table").html(orangTable);
break;
case 'apple':
$("#show-table").html(appleTable);
break;
case 'banana':
$("#show-table").html(bananaTable);
break;
default:
}
}
}
</script>
specific table assigned to each button will display inside div
with id="show-table" when that button selected. you can outspread this
method for what purpose you have. just know this is not efficient
method or best way. it's just a way ..
I am knew to knockout and have a question about how to do some conditional binding. I have a dropdown input that shows and hides other inputs depending upon the option that is selected. I have that working but I am having a problem when I load the page after the page has already been posted previously. I am able to GET the dropdown inputs that was previously selected and posted but the binding that takes place (showing and hiding) of the other inputs is not triggered. Please see below:
<script>
function ViewModel() {
this.selectedPet = ko.observable();
var petArray = ["Dog", "Cat", "Fish"];
this.petOptions = ko.observableArray(petArray);
};
ko.applyBindings(new ViewModel);
</script>
<form>
<select data-bind="options: petOptions, value: selectedPet" asp-for="Pets">
</select>
<input data-bind="visible: petOptions() === "Dog" asp-for="DogFood" />
<input data-bind="visible: petOptions() === "Cat" asp-for="CatFood" />
<input data-bind="visible: petOptions() === "Fish" asp-for="FishFood" />
</form>
I figured out what I needed to do. I need to set the initial observable value to the value that was posted.
var onLoadPet = "#Model.Pet.Value";
function ViewModel() {
this.selectedPet = ko.observable(onLoadPet);
}
I want to set the value of an HTML <select> element reactively, without changing the various options for the element. I have found a solution, but it in not elegant.
To test, create a barebones Meteor app with create meteor select and change the contents of the select.html and select.js files to the following:
select.html
<body>
{{> select}}
</body>
<template name="select">
<label for="select">{{category}}</label>
<select id="select">
<option value='' disabled selected style='display:none;'>Select...</option>
<option value="Animal">Animal</option>
<option value="Vegetable">Vegetable</option>
<option value="Mineral">Mineral</option>
</select>
</template>
select.js
if (Meteor.isClient) {
Session.set("category", "")
Session.set("label", "Category")
Template.select.onRendered(function () {
setSelectValue()
})
Template.select.helpers({
category: function () {
setSelectValue()
return Session.get("label")
}
});
function setSelectValue() {
var select = $("#select")[0]
if (select) {
select.value = Session.get("category")
}
}
}
Now launch your app. In the browser console, you can change the value of the category Session variable:
Session.set("category", "Animal")
However, the select element will not update until you change the label:
Session.set("label", "category") // was "Category'
Now the select element updates, and any subsequent change the category Session variable will also update the select element.
Session.set("category", "Vegetable") // Now the select element updates
Is it possible to achieve the same effect directly, without using this clumsy workaround?
Yes. You can do it as follows:
<select id="select">
<option value="Animal" {{animalSelected}}>Animal</option>
<option value="Vegetable" {{vegetableSelected}}>Vegetable</option>
<option value="Mineral" {{mineralSelected}}>Mineral</option>
</select>
And helpers that looks something like this:
Template.select.helpers({
animalSelected: function () {
return (someCondition === true) ? 'selected' : '';
},
vegetableSelected: function () {
return (someOtherCondition) ? 'selected' : '';
}
});
A better way might be something like this though:
<select id="select">
{{#each options}}
<option value="{{value}}" {{selected}}>{{label}}</option>
{{/each}}
</select>
And then you can use this in the helpers to decide what is selected and what isn't.
Another option is just using standard jQuery to change the select box. Something like this:
$('[name=options]').val( 3 );
Or this SO answer.
If you want the selection set dynamically I usually use a handlebar helper like this
Template.newtask.helpers({
filler: function(element){
return Session.get(element);
}
});
then in html
<select class="browser-default" id="selectedService" name="jobtype">
<option id="zero" value="{{filler 'type'}}">{{filler 'type'}}</option>
I Want to make radio buttons from form with one choose only. Single Options with
A. Exemple One
B. Exemple Two
C. Exemple Three
D. Exemple Four
If you choose one questions A, you cant to change your opinion. Thanks for help.
http://preview.ipanelthemes.com/fsqm/form-with-latex-options/
Here you have exemple.
The easiest way to do this would be using JavaScript to add an event listener so that when a user clicks on one of the radio options, the script then will set the "disabled" attribute in place.
Given the following HTML:
<form>
<input type="radio" name="creditcard" id="visa">Visa
<input type="radio" name="creditcard" id="mstrcrd">MasterCard
<input type="radio" name="creditcard" id="amex">American Express
<input type="radio" name="creditcard" id="dscvr">Discover
</form>
You could use the following JavaScript:
var radioInputs = document.getElementsByName("creditcard");
function toggleDisable() {
for (i=0; i<radioInputs.length; i++) {
radioInputs[i].disabled = true;
}
}
for (i=0; i<radioInputs.length; i++) {
radioInputs[i].addEventListener('click', toggleDisable, false);
}
Keep in mind that the .addEventListener method will not work in IE8 or prior. You will either need to write an if statement checking for the .addEventListener or use jQuery.
Problem solved after I found an other template. Seems the previous one is incompatible.
I'm using the Plugin Foxycomplete (advanced autocomplete search with images) - more specifically: I want to use it. I installed and enabled it. The developer explains one step like this:
Enter the ID of the Form Input Field WITHOUT THE '#' on which you wish to apply the Autocomplete functionaliy. Defaults to the Regular "s".
I've even looked at the file foxycomplete.js, but I don't get it:
(function($) {
$(document).ready(function() {
var inputField = site_data.inputField;
var inputWidth = 0;
var absPath = "";
if(site_data.inputField == ""){
inputField = "s";
}
After this I took a look at the search form with firebug and this is the HTML-code:
<form action="http://localhost/sites/wordpress/" class="searchform" method="get">
<input type="text" value="" name="s" class="field">
<input type="submit" value="" name="submit" class="submit">
</form>
Now I'm assuming that I have to change class = "field" to id = "s", but I also do not know in which document I find the HTML part, I am a little stuck. If I do the change in firebug, it doesn't work.
all you need to do is to add following to your "input type" - name="s", id="s". This worked for me on a Canvas theme, by woothemes, and should be cool with any other
as an example for your code:
<input type="text" name="s" id="s" value="" class="field">
edit: search form code location really different to each theme template. but in most cases it's in header or sidebar.