I'm trying to make a code where you can select the search engine and then search from there. Something like this:
<form>
<select>
<option action="https://google.com/search" target="_blank">Google</option>
</select>
<input size="50" type="search" id="search" name="q">
</form>
I know that's not correct, but is it possible? If not, is there another way to do it?
Javascript, Jquery
$('button').click((e)=>{
e.preventDefault();
if($('select').val() === 'google'){
let url = $('#search').val();
console.log(`Text before: ${url}, selected: ${$('select').val()}`);
url = `https://www.google.com/search?q=${url}&sourceid=chrome&ie=UTF-8`;
window.open(url, '_blank'); // open in new tab
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select>
<option value="google">Google</option>
</select>
<input size="50" type="search" id="search" name="q"></input>
<button>search</button>
</form>
I'm looking to trigger an event (namely, a save/cancel dialog) when switching focus between text elements--with one caveat: it's not per element, it's per containing div.
I'll have multiple divs, each with the same controls. If any values are changed in one containing div and focus is switched to another, I need to determine if the knockout data I'm leaving is dirty and then trigger the event.
Does knockout support this kind of event binding or will I have to wire something else up? It looks like I could use the tabindex attribute on my divs but I'd prefer to use existing functionality in the framework if it's available.
A mockup of the code would look like this:
<div>
First Name: <input type="text" name="firstName"/><br/>
Last Name: <input type="text" name="lastName"/><br/>
Customer Type: <select>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<div>
First Name: <input type="text" name="firstName"/><br/>
Last Name: <input type="text" name="lastName"/><br/>
Customer Type: <select>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
</select>
</div>
how about something like this. kind of jquery / knockout hybrid. clicking on an attribute brings up save button. after save and moving to a different div getting focus brings up save again.
function viewModel() {
var self = this;
this.currentDiv = ko.observable('');
this.isDirty = ko.observable(false);
this.save = function() {
self.isDirty(false)
}
}
var vm = new viewModel();
(function($) {
ko.applyBindings(vm); //bind the knockout model
$("input, select").not('#save').focus(function() {
var d = $(this).parent('div').attr('id');
if (d != vm.currentDiv() || vm.isDirty()) {
vm.isDirty(true);
} else {
vm.isDirty(false);
}
vm.currentDiv(d);
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> First Name:
<input type="text" name="firstName" />
<br/> Last Name:
<input type="text" name="lastName" />
<br/> Customer Type:
<select>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<div id="div2">
First Name:
<input type="text" name="firstName" />
<br/> Last Name:
<input type="text" name="lastName" />
<br/> Customer Type:
<select>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<input type="button" id="save" data-bind="visible: isDirty, click: save" value="save" />
I have a html form, which I need to parse the information on the server side (which is a simple HTTP Java server I have written) so to run a program with those options. Unfortunately when I submit the form, it does not include all the input options, and only shows a subset of them, e.g. /run.html?-z=-w&yse=yse1&tracefile=capacity.1Mbps_c50.txt. There are other form items (such as number boxes fd, rd, per, etc) which are not included. Can someone help me with that? (actually the ones which are not included should be visible, unless the Use a sample tracefile checkbox is checked).
You can see the demo here: http://jsfiddle.net/3at2c/10/
Here is the whole HTML code (remember, if you want to modify the JavaScript, please do not use JQuery; everything should be written in a single file)
<html>
<head>
<script type="text/javascript">
var isTrace = document.getElementById('isTracefile');
var ctTrace = document.getElementById('cttracefile');
var custom = document.getElementById('custom');
isTrace.onchange = function(){
if (!isTrace.checked) {
ctTrace.style.display = "none";
custom.style.display = "block";
} else {
custom.style.display = "none";
ctTrace.style.display = "block";
}
};
</script>
</head>
<body>
<p>
<h3>Please select a configuration below to run the emulator with:</h3>
<form action="run.html" method="GET">
<input type="checkbox" name="-w" value="-w"/>[-w]: wrap around at tracefile end and begin anew at time zero./
<br/>
<input type="checkbox" name="-z" value="-w"/>[-z]: zero packets routed through; route to co-resident webserver
<br/>
<input type="checkbox" name="-b" value="-b"/>[-b]: run the emulator in the background.
<br/>
<br/> YSE Emulator to Run: <select name="yse">
<option value="yse1">YSE1</option>
<option value="yse2">YSE2</option>
<option value="yse3">YSE3</option>
<option value="yse4">YSE4</option>
<option value="yse5">YSE5</option>
<option value="yse6">YSE6</option>
</select> <br/>
<br/>
<input type="checkbox" id="isTracefile" checked />Use a sample tracefile
<!--Wrap the select and its label in a container so that it can be shown/hidden-->
<div id="cttracefile">
Sample Tracefiles to use:
<select name="tracefile">
<option value="capacity.1Mbps_c50.txt">capacity.1Mbps_c50</option>
<option value="capacity.3Mbps_100RTT_PER_0.00001.txt">capacity.3Mbps_100RTT_PER_0.00001</option>
<option value="capacity.3Mbps_100RTT_PER_0.0001.txt">capacity.3Mbps_100RTT_PER_0.0001</option>
<option value="capacity.3Mbps_100RTT_PER_0.001.txt">capacity.3Mbps_100RTT_PER_0.001</option>
<option value="capacity.3Mbps_100RTT_PER_0.01.txt">capacity.3Mbps_100RTT_PER_0.01</option>
<option value="capacity.3Mbps_100RTT_PER_0.05.txt">capacity.3Mbps_100RTT_PER_0.05</option>
<option value="capacity.3Mbps_100RTT_PER_0.1.txt">capacity.3Mbps_100RTT_PER_0.1</option>
<option value="capacity.3Mbps_200RTT_PER_0.0001.txt">capacity.3Mbps_200RTT_PER_0.0001</option>
<option value="capacity.3Mbps_200RTT_PER_0.001.txt">capacity.3Mbps_200RTT_PER_0.001</option>
<option value="capacity.3Mbps_400RTT_PER_0.0001.txt">capacity.3Mbps_400RTT_PER_0.0001</option>
<option value="capacity.3Mbps_400RTT_PER_0.001.txt">capacity.3Mbps_400RTT_PER_0.001</option>
<option value="capacity.13Mbps_200RTT_PER_0.000001.txt">capacity.13Mbps_200RTT_PER_0.000001</option>
</select>
</div>
<!--Wrap the custom inputs and its labels in a container so that it can be shown/hidden-->
<div id="custom">
<label>Forward Delay: </label><input id="fd" type="number" min="0" max="1000" step="1" value ="100"/> ms
<br/>
<label>Reverse Delay: </label><input id="rd" type="number" min="0" max="1000" step="1" value ="100"/> ms
<br/>
<label>Download Capacity: </label><input id="down" type="number" min="1" max="30" step="1" value ="1"/> MBps
<br/>
<label>Upload Capacity: </label><input id="up" type="number" min="1" max="30" step="1" value ="1"/> MBps
<br/>
<label>Packet Error Rate (PER): </label><input id="per" type="number" min="0.00001" max="1" step="0.00001" value ="0.00001"/>
</div>
<br/> <input type="submit" value="Run Emulator!"/>
</form>
</body>
</html>
Is there a CSS selector that allows me to select an element based on an HTML select option value?
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Display only if an option with value 1 is selected</p>
I'm looking for an HTML/CSS only method to only display a selected number of form fields. I already know how to do it with Javascript.
Is there a way to do this?
Edit:
The question title is perhaps misleading. I'm not trying to style the select box, that's pretty common and plenty of answers on SO already. I'm was actually trying to style the <P> element based on the value selected in the <select>.
How ever what I'm really trying to do is to display a number of form fields based on a selected numeric value:
<select name="number-of-stuffs">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="stuff-1">
<input type="text" name="stuff-1-detail">
<input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none">
<input type="text" name="stuff-2-detail">
<input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
<input type="text" name="stuff-3-detail">
<input type="text" name="stuff-4-detail2">
</div>
I would like to display div.stuff-1 and div.stuff-2 when number-of-stuffs=2 and display div.stuff-1 div.stuff-2 and div.stuff-3 when number of stuffs=2.
Something like this fiddle
Its called an attribute selector
option[value="1"] {
background-color:yellow;
}
Example http://jsfiddle.net/JchE5/
You can use
select option[value="1"]
but browser support won't be fantastic.
This probably requires a parent selector which has not been specified for CSS2 or CSS3.
CSS selector for "foo that contains bar"?
Is there a CSS parent selector?
A subject selector has been defined in the CSS4 working draft as of May 2013 but no browser vendor has implemented it yet.
Whether the method in question works (in theory) using the subject selector remains to be seen.
How about the alternative below?
You don't get a select box, but perhaps this is close enough.
#option-1,
#option-2,
#option-3 {
display: none;
}
#nos-1:checked ~ #option-1,
#nos-2:checked ~ #option-2,
#nos-3:checked ~ #option-3 {
display: block;
}
<input id="nos-1" name="number-of-stuffs" type="radio" value="1" checked="checked" /><label for="nos-1">1</label>
<input id="nos-2" name="number-of-stuffs" type="radio" value="2" /><label for="nos-2">2</label>
<input id="nos-3" name="number-of-stuffs" type="radio" value="3" /><label for="nos-3">3</label>
<div id="option-1">
<input type="text" name="stuff-1-detail" value="1-1" />
<input type="text" name="stuff-1-detail2" value="1-2" />
</div>
<div id="option-2">
<input type="text" name="stuff-2-detail" value="2-1" />
<input type="text" name="stuff-2-detail2" value="2-2" />
</div>
<div id="option-3">
<input type="text" name="stuff-3-detail" value="3-1" />
<input type="text" name="stuff-4-detail2" value="3-2" />
</div>
i believe that in "live" or realtime, it is possible only with javascript or jQuery. Wrap the potentially hidden fields in divs with display: none onLoad and have JS or jQuery change state to display: block or however you like.
//Show Hide based on selection form Returns
$(document).ready(function(){
//If Mobile is selected
$("#type").change(function(){
if($(this).val() == 'Movil'){
$("#imeiHide").slideDown("fast"); // Slide down fast
} else{
$("#imeiHide").slideUp("fast"); //Slide Up Fast
}
});
//If repairing is selected
$("#type").change(function(){
if($(this).val() == 'repairing'){
$("#problemHide").slideDown("fast"); // Slide down fast
$("#imeiHide").slideDown("fast"); // Slide down fast
}else{
$("#problemHide").slideUp("fast"); //Slide Up Fast
}
});
});
// type is id of <select>
// Movil is option 1
// Repairing is option 2
//problemHide is div hiding field where we write problem
//imeiHide is div hiding field where we write IMEI
i am using in one of my apps...
Possible with PHP too, but with PHP, you will have to send the change request or you can write a code in php to have certain classes to be loaded based on already selected values, for example
<select class="<?php if($valueOne == 'Something'){echo 'class1';}else{echo 'class2';}">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I found a solution based on this answer
satisfies op's request most. Not purely in CSS but definitely least amount of JavaScript is involved.
select[data-chosen='1']~.stuff-1{
display: block !important;
}
select:not([data-chosen='1'])~.stuff-1{
display: none;
}
select[data-chosen='2']~.stuff-2{
display: block !important;
}
select[data-chosen='3']~.stuff-3{
display: block !important;
}
<select name="number-of-stuffs" data-chosen = "1" onchange = "this.dataset.chosen = this.value;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="stuff-1">
<span> I am stuff-1!</span>
<input type="text" name="stuff-1-detail">
<input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none">
<span> I am stuff-2!</span>
<input type="text" name="stuff-2-detail">
<input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
<span> I am stuff-3!</span>
<input type="text" name="stuff-3-detail">
<input type="text" name="stuff-4-detail2">
</div>
You don't even need to write any separated js, despite embedding "this.dataset.chosen = this.value;" in onchange seems to be a bit hacky.
I am making a website where I want to use range slider(I know it only supports webkit browsers).
I have integrated it fully and works fine. But I would like to use a textbox to show the current slide value.
I mean if initially the slider is at value 5, so in text box it should show as 5, when I slide the value in text box should change.
Can I do this using only CSS or html. I want to avoid JQuery. Is it possible?
For those who are still searching for a solution without a separate javascript code. There is little easy solution without writing a javascript or jquery function:
<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>
JsFiddle Demo
If you want to show the value in text box, simply change output to input.
Point to note:
It is still Javascript written within your html, we can write something like below in js to do similar thing:
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
Instead of element's id, name could also be used, both are supported in modern browsers.
This uses javascript, not jquery directly. It might help get you started.
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}
<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">
version with editable input:
<form>
<input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
<input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>
http://jsfiddle.net/Xjxe6/
an even better way would be to catch the input event on the input itself
rather than on the whole form (performance wise) :
<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
oninput="amount.value=rangeInput.value">
<output id="amount" name="amount" for="rangeInput">0</output>
Here's a fiddle (with the id added as per Ryan's comment).
If you want your current value to be displayed beneath the slider and moving along with it, try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MySliderValue</title>
</head>
<body>
<h1>MySliderValue</h1>
<div style="position:relative; margin:auto; width:90%">
<span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
<span id="myValue"></span>
</span>
<input type="range" id="myRange" max="1000" min="0" style="width:80%">
</div>
<script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);
myValue.parentElement.style.left = px + 'px';
myValue.parentElement.style.top = myRange.offsetHeight + 'px';
myValue.innerHTML = myRange.value + ' ' + myUnits;
myRange.oninput =function(){
let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
myValue.innerHTML = myRange.value + ' ' + myUnits;
myValue.parentElement.style.left = px + 'px';
};
</script>
</body>
</html>
Note that this type of HTML input element has one hidden feature, such as you can move the slider with left/right/down/up arrow keys when the element has focus on it. The same with Home/End/PageDown/PageUp keys.
Shortest version without form, min or external JavaScript.
<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>
Explanation
If you wanna retrieve the value from the output you commonly use an id that can be linked from the oninput instead of using this.nextElementSibling.value (we take advantage of something that we are already using)
Compare the example above with this valid but a little more complex and long answer:
<input id="num" type="range" value="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output>0</output>
With the shortest answer:
We avoid the use of this, something weird in JS for newcomers
We avoid new concept about connecting siblings in the DOM
We avoid too much attributes in the input placing the id in the output
Notes
In both examples we don't need to add the min value when equal to
0
Removing JavaScript’s this keyword makes it a better language
If you're using multiple slides, and you can use jQuery, you can do the follow to deal with multiple sliders easily:
function updateRangeInput(elem) {
$(elem).next().val($(elem).val());
}
input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">
Also, by using oninput on the <input type='range'> you'll receive events while dragging the range.
In plain JavaScript:
function displaySliderValue(eSlider){
eSlider.parentElement.querySelector('span').textContent = eSlider.value;
}
<div>
<span>1</span><br>
<input type="range" min="1" max="100" value="1" oninput="displaySliderValue(this);">
</div>
For people don't care about jquery use, here is a short way without using any id
<label> userAvatar :
<input type="range" name="userAvatar" min="1" max="100" value="1"
onchange="$('~ output', this).val(value)"
oninput="$('~ output', this).val(value)">
<output>1</output>
</label>
I have a solution that involves (Vanilla) JavaScript, but only as a library. You habe to include it once and then all you need to do is set the appropriate source attribute of the number inputs.
The source attribute should be the querySelectorAll selector of the range input you want to listen to.
It even works with selectcs. And it works with multiple listeners. And it works in the other direction: change the number input and the range input will adjust. And it will work on elements added later onto the page (check https://codepen.io/HerrSerker/pen/JzaVQg for that)
Tested in Chrome, Firefox, Edge and IE11
;(function(){
function emit(target, name) {
var event
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(name, true, true);
} else {
event = document.createEventObject();
event.eventType = name;
}
event.eventName = name;
if (document.createEvent) {
target.dispatchEvent(event);
} else {
target.fireEvent("on" + event.eventType, event);
}
}
var outputsSelector = "input[type=number][source],select[source]";
function onChange(e) {
var outputs = document.querySelectorAll(outputsSelector)
for (var index = 0; index < outputs.length; index++) {
var item = outputs[index]
var source = document.querySelector(item.getAttribute('source'));
if (source) {
if (item === e.target) {
source.value = item.value
emit(source, 'input')
emit(source, 'change')
}
if (source === e.target) {
item.value = source.value
}
}
}
}
document.addEventListener('change', onChange)
document.addEventListener('input', onChange)
}());
<div id="div">
<input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
<input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
<br>
<input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<br>
<input name="example3" type="range" max="20" min="0" value="10" step="1">
<select source="[name=example3]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<br>
</div>
<br>
Here's a vanilla JS way of automatically adding the value to all range inputs without any extra HTML.
Edit: Chrome only. I didn't realize it doesn't work with Firefox.
document.querySelectorAll('input[type=range]').forEach(e => {
e.setAttribute('data-value', e.value);
e.addEventListener('input', () => {
e.setAttribute('data-value', e.value);
});
});
input[type="range"]::after {
content: attr(data-value);
margin-right: -50px;
padding-left: 10px;
}
<input type="range"><br>
<input type="range"><br>
<input type="range">
Try This :
<input min="0" max="100" id="when_change_range" type="range">
<input type="text" id="text_for_show_range">
and in jQuery section :
$('#when_change_range').change(function(){
document.getElementById('text_for_show_range').value=$(this).val();
});
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
<input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>
if you still looking for the answer you can use input type="number" in place of type="range" min max work if it set in that order:
1-name
2-maxlength
3-size
4-min
5-max
just copy it
<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />