I have the following code:
<div class="form__group form__group--select" id="choice">
<select name="area" class="selectbox form__element">
<option selected="selected" value="">Sparte auswählen</option>
<option value="Erdgas">Erdgas</option>
<option value="Strom">Strom</option>
<option value="Telekommunikation">Telekommunikation</option>
<option value="Energiedienstleistungen">Energiedienstleistungen</option>
</select>
<div class="form__message">
<div class="form__infotext"></div>
<div class="form__error"></div>
</div>
</div>
</div>
<div class="columns medium-6" id="kWh">
<t:optionalTextField label="Ihr Jahresverbrauch in kWh" name="kWhPerYear" maxLength="100"/>
</div>
I would like to make "columns medium-6" be visible only if particular item is selected in "selectbox form__element", for example "Strom". Just to mention that this code is taken from .jsp file in which there are no 'head' and 'body' tags.
I already tried this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#choice").change(function() {
if ($(this).val() == "Erdgas" || (this).val() == "Strom") {
$("#kWh").show();
}else{
$("#kWh").hide();
}
});
});
</script>
but it didn't work....I probably missed something, and also I don't know ehre is the best place to put this javascript code.
You need an onchange event on your select:
<select name="area" class="selectbox form__element" onchange="hideColMed6(this)">
Add a script tag with the particular function:
<script type="text/javascript">
function hideColMed6(selected) {
var value = selected.value;
if (value == "Strom")
$(".columns.medium-6").hide();
else
$(".columns.medium-6").show();
}
</script>
I updated the code.
Try below code and its working fine.
$(document).ready(function (){
$(".selectbox").change(function() {
if ($(this).val() == "Erdgas" || $(this).val() == "Strom") {
$("#kWh").show();
}else{
$("#kWh").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form__group form__group--select" id="choice">
<select name="area" class="selectbox form__element">
<option selected="selected" value="">Sparte auswählen</option>
<option value="Erdgas">Erdgas</option>
<option value="Strom">Strom</option>
<option value="Telekommunikation">Telekommunikation</option>
<option value="Energiedienstleistungen">Energiedienstleistungen</option>
</select>
<div class="form__message">
<div class="form__infotext"></div>
<div class="form__error"></div>
</div>
</div>
<div class="columns medium-6" id="kWh">
<label name="kWhPerYear" maxLength="100">Ihr Jahresverbrauch in kWh</label>
</div>
You can use JQuery in order to achieve this, but you have to listen for changes on the select tag, not on the div one:
<script>
$('#select_field_id').change(function() {
var selectionText = $('#select_field_id').find(":selected").text();
if (selectionText == 'something') {
$('.columns.medium-6).show();
} else {
$('.columns.medium-6).hide();
}
});
</script>
This way you listen to changes on the select box and act accordingly.
Related
I want to use the dropdown menu on site.google to link different pages, but I don't know what to
write inside the value field in order to make this code functioning well. Could you please assist me to figure out how I can do that!
<!DOCTYPE html>
<html>
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="what do I have to write here!">Page 1</option>
<option value="#what do I have to write here!">Page 2</option>
<option value="#what do I have to write here!">Page 3</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>
</body>
</html>
You can create an anchor element and click it or use the window.open function with the _top parameter. Like so:
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="https://google.com">Google</option>
<option value="https://developers.google.com/">Developers</option>
<option value="https://developers.google.com/apps-script">Apps Script</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script>
const list = document.getElementById('list')
function goToNewPage(){
// Alternative 1 window.open(list.value, '_top')
// Alternative 2
const a = document.createElement('a')
a.href = list.value
a.target = '_blank'
a.click()
}
</script>
</body>
I want to add value to option based on text in option field.
Here is code:
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
jQuery code itself is to automatically add the 'value' attribute and value based on the text
<select id="select_1">
<option value="0930">09:30</option>
<option value="1000">10:00</option>
<option value="1130">11:30</option>
</select>
It's possible?
Yes, this is possible,
To test it, run the code snippet and change the select list.
$("#select_1 > option").each(function() {
this.value = this.text.replace(':', '');
});
$("#select_1").on('input', function() {
alert(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
Inspect in chrome seem like this
Try this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
</body>
<script>
$(document).ready(function() {
$("option").each(function(index) {
$(this).attr("value", $(this).html());
});
});
</script>
</html>
I have a select box and text box like this :
<?php
$receipt="12345";
?>
<form>
<select name="sent" id="sent">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" name="receipt" value="<?=$receipt?>">
</form>
how can I clear the textbox after I choose option No ?
You can achieve it with jQuery change method
create variable receipt
var receipt = "12345"; //replace 12345 with <?php echo $receipt;?>
bind select element with jQuery change method$("#sent").change(function ()
check select element value against var receipt and if true, clear the input.
$(document).ready(function () {
var receipt = "123456";
$("#sent").change(function () {
var sel = $(this).val();
if (sel == 0) {
$("input[name=receipt]").val("");
} else {
$("input[name=receipt]").val(receipt);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="sent" id="sent">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" name="receipt" value="123456">
</form>
Fiddle
try this one
its work
i have try it
<html>
<head>
<script>
function Clear()
{
var sent = document.getElementById('sent').value;
if(sent==0){
document.getElementById("receipt").value="";
}
}
</script>
</head>
<body>
<?php
$receipt="12345";
?>
<form>
<select name="sent" id="sent" onchange="Clear()">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="receipt" name="receipt" value="<?=$receipt?>">
</form>
</body>
</html>
<?php
$receipt="12345";
?>
<script>
function SetField(val)
{
if(val==0)
document.getElementById('input-field').value='';
else
document.getElementById('input-field').value='<?php echo $receipt;?>';
}
</script>
<form>
<select name="sent" id="sent" onchange="SetField(this.value);">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="input-field" name="receipt" value="<?=$receipt?>">
</form>
Much compact
I currently have a drop down list with a few values in it, I was wondering if it is possible to have a image next to the drop down list that changes corresponding to the value in the drop down list?
This the code for my drop down list. If you need anymore information please ask.
<form id="formddl">
<a id="infoheader">GreenB Colour</a> <br><br>
<div class="header">
<select>
<option value="0">Ivory White</option>
<option value="1">Carbon Black</option>
</select>
</div> <br><br>
<script src="fancystyle1/js/jquery.simple.select.js"></script>
<script type="text/javascript">
$(function() {
$('select').selectBoxes();
});
</script>
</form>
You can do it like this:
$("#iama").children().click(function changeImage(){
var value = $("#iama option:selected").val();
if (value == 1){
$("#image").attr("src","http://lorempixel.com/400/200/");
}
else {
$("#image").attr("src","http://lorempixel.com/600/200/");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select id="iama">
<option value=1>image for value 1</option>
<option value=2>image for another value</option>
</select>
<img id ="image" src="http://lorempixel.com/200/200/"/>
I'm having trouble trying to figure out how to append select options after detaching them based on the value of the initial select option of a form.
Here's the HTML for my form:
<form id="booking-form" action="#" method="post">
<legend class="bold">Bookings</legend>
<div class="input clearfix required">
<label for="cinema">Cinema</label>
<select name="cinema" id="cinema">
<option value></option>
<option value="maxima">Cinema Maxima</option>
<option value="rivola">Cinema Rivola</option>
</select>
<div class="error">
<p>Please select a cinema</p>
</div>
</div>
<div class="input clearfix required">
<label for="day">Day</label>
<select name="day" id="day">
<option value></option>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
<div class="error">
<p>Please select a time</p>
</div>
</div>
<div class="input clearfix required">
<label for="time">Time</label>
<select name="time" id="time">
<option value></option>
<option value="12">12pm</option>
<option value="3">3pm</option>
<option value="4">4pm</option>
<option value="6">6pm</option>
<option value="7">7pm</option>
<option value="9">9pm</option>
</select>
<div class="error">
<p>Please select a time</p>
</div>
</div>
<div class="input">
<input type="submit" value="Submit">
</div>
</form>
And here's the jQuery code I've written:
$(document).ready(function(){
// ***** Begin Booking Form Manipulation ***** //
// If Cinema Maxima is selected, remove Cinema Rivola time options
$('#cinema').change(function() {
if( $('#cinema').val() == 'maxima') {
$('#time option[value="12"]').detach();
$('#time option[value="4"]').detach();
$('#time option[value="7"]').detach();
}
// Else, remove Cinema Maxima time options
else {
$('#time option[value="3"]').detach();
$('#time option[value="6"]').detach();
$('#time option[value="9"]').detach();
}
});
// If Cinema Maxima is selected but weekend session is not selected, remove 3pm time option
$('#day').change(function() {
if( $('#cinema').val() == 'maxima' && $('#day').val() != 'saturday' || 'sunday') {
$('#time option[value="3"]').detach();
}
});
});
// ***** End Booking Form Manipulation ***** //
I'm not sure I've I'm approaching this the best way after having spent the last few hours trawling through stackoverflow, but I can't seem to find a solution! Any advice for a beginner would be greatly appreciated!
I've upload my code to jsfiddle here: http://jsfiddle.net/nness/L9v6ejvt/
Wouldn't you know it - .show() and .hide() seem to work perfectly on my PC when using Chrome! Is anyone else using Chrome on Mac?.. If so, any thoughts as to why it's playing up? The saddest part is had I been using the PC from the get-go this would have saved me the best part of a day! Thanks for all your suggestions guys, all very much appreciated!
If you can add the corresponding classes for the select as follows:
<select name="time" id="time">
<option value></option>
<option value="12" class="rivola">12pm</option>
<option value="3" class="maxima">3pm</option>
<option value="4" class="rivola">4pm</option>
<option value="6" class="maxima">6pm</option>
<option value="7" class="rivola">7pm</option>
<option value="9" class="maxima">9pm</option>
</select>
You can simply hide and show them like
$(document).ready(function () {
$('#cinema').on('change', function (ev) {
$('#time option').hide();
$("."+this.value).show();
});
});
Updated Fiddle
Side note: unnecessary DOM manipulation is really bad...
You can set custom HTML attributes and then use jQuery
<option value="maxima" exceptitems="12,9">Cinema Maxima</option>
JQuery
$(document).ready(function(){
$('#cinema').on('change', function(ev) {
$('#time option').show();
var opt=$("option:selected", this);
var exceptItems=opt.attr('exceptitems');
if(exceptItems)
{
var items=exceptItems.split(",");
for (i = 0; i < items.length; i++) {
$('#time option[value="'+items[i]+'"]').hide();
}
}
});
});
DEMO1
Update 1:
I have nice solution
<option value="maxima" data-command="$('#time option[value=12]').hide()">Cinema Maxima</option>
JQuery
$(document).ready(function(){
$('#cinema').on('change', function(ev) {
var opt=$("option:selected", this);
var strCommand=opt.data("command");
eval(strCommand);
});
});
DEMO2
Update 2: For easy management
$.fn.extend({
executeCommand: function() {
return this.on('change', function(ev) {
var opt=$("option:selected", this);
var strCommand=opt.data("command");
eval(strCommand);
});
}
});
$('#cinema').executeCommand();
DEMO3