I have the below javascript function to go to the selected box value url.
function go(x) {
alert(x);
location = x.value;
}
I cannot use getElementById
There may be more than 1 select box as the user differs
I wrote a php to print all the selectbox inside a form and div
<div class="styled-select">
<form name="menu">
<select id=Admission onchange=go(this)>
<option value=/admission>Add Existing Students</option>
</select>
<select id=Student onchange=go(this)>
<option value=www.bing.com>Student Details</option>
</select>
</form>
</div>
All suggestions are welcome.
You don't access the value of the element properly. Use this instead:
function go(x) {
location = x.options[x.selectedIndex].value;
}
You also won't get an onchange event for a <select> with only a single option ever.
Related
I have a dropdown on my website, where users can select different site-names.
Next to the dropdown I have a submit button.
I would like users to select a site-name, from the dropdown, and when they click on submit they should be redirected to a specific url, with the dropdown value appended.
<form id="form" method="get">
<option value="1">Website Name 1</option>
<option value="2">Website Name 2</option>
<option value="3">Website Name 3</option>
<button class="btn" type="submit">GO!</button>
</form>
Example case:
Users selects "Website Name 2"
User clicks "GO!" button
Site opens a new window with target "https://example.com/site/2"
There are many ways to do this. However you can try below way.
In the dropdown value add a complete url which you want to redirect to instead of just value and on button click redirect to that site.
Make sure button type is not 'submit' and attach a click event with a javascript funtion.
In the javascript function read the selected value from the dropdown and use
window.location.href
to redirect to that site.
function redirect() {
var value = document.getElementById("site").value;
window.location.href = value;
return ;
}
<form id="form" >
<select name="site" id ="site">
<option value="https://Google.com/1">Google</option>
<option value="https://stackoverflow.com/2">StackOverflow</option>
</select>
<button class="btn" type="button" onclick="redirect()">GO!</button>
</form>
There are multiple ways to accomplish this functionality. I prefer having minimal HTML and handling everything in the JavaScript. We will be using an EventListener to accomplish this in my example.
Change your HTML to this:
<form id="form" method="get">
<select id="selection">
<option value="1">Website Name 1</option>
<option value="2">Website Name 2</option>
<option value="3">Website Name 3</option>
</select>
<button class="btn" type="submit">GO!</button>
</form>
Then you can use simple JavaScript to accomplish what you want:
let url = "https://example.com/site/";
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
let selection = document.getElementById('selection').value;
console.log(url + selection);
window.location.href = url + selection;
});
This answer assumes that all URLs follow the https://example.com/site/1 format. If not, you can change the value in the option tags to be the actual URL and remove the URL prefix from the JavaScript.
I am using the datalist HTML property to get a drop down inout box:
<input list="orderTypes" value="Book">
<datalist id="orderTypes">
<option value="Book">
<option value="Copy">
<option value="Page">
</datalist>
The problem is that now I have to clear the input box to view all the drop down values. Is there a way to have a default value but still view all the values in the datalist when the drop down icon is clicked?
I have the same problem.
I just simple added placeholder with the default data.
In your example:
<input list="orderTypes" name="orderType" id="orderType" placeholder="Book" />
I listen submit event. If the input value is empty, I use Book as default value, otherwise I use the given value...
$("#mySubmitButton").click(() => {
// use event prevent here if need...
const orderType = $("#orderType").val() || "Book";
console.log(orderType);
});
I know of no way to do this natively. You could make a "helper" div to use when the input field has value. I couldn't hide the native drop down so I renamed the ID. Uses jQuery.
html
<input list="orderTypes" id="dlInput">
<div id="helper" style="display:none;position:absolute;z-index:200;border:1pt solid #ccc;"></div>
<datalist id="orderTypes" style="z-index:100;">
<option value="Book">
<option value="Copy">
<option value="Page">
</datalist>
script
$(function(){
// make a copy of datalist
var dl="";
$("#orderTypes option").each(function(){
dl+="<div class='dlOption'>"+$(this).val()+"</div>";
});
$("#helper").html(dl);
$("#helper").width( $("#dlInput").width() );
$(document).on("click","#dlInput",function(){
// display list if it has value
var lv=$("#dlInput").val();
if( lv.length ){
$("#orderTypes").attr("id","orderTypesHide");
$("#helper").show();
}
});
$(document).on("click",".dlOption",function(){
$("#dlInput").val( $(this).html() );
$("#helper").hide();
});
$(document).on("change","#dlInput",function(){
if( $(this).val()==="" ){
$("#orderTypesHide").attr("id","orderTypes");
$("#helper").hide();
}
});
});
jsFiddle
Is this what you trying to do?
var demoInput = document.getElementById('demoInput'); // give an id to your input and set it as variable
demoInput.value ='books'; // set default value instead of html attribute
demoInput.onfocus = function() { demoInput.value =''; }; // on focus - clear input
demoInput.onblur = function() { demoInput.value ='books'; }; // on leave restore it.
<legend>(double) click on the input to see options:</legend>
<input list="orderTypes" id="demoInput">
<datalist id="orderTypes">
<option value="Book">
<option value="Copy">
<option value="Page">
</datalist>
The only "problem" here is that in order to see the options the user have to click the input again so it's like "double-click the input to see options".
Hope that helps.
I would use input's placeholder attribute along with a Javascript code that'll make sure that the field isn't empty upon submission.
Obviously this is just an example, you'll have to modify the submission event.
document.getElementById('submitButton').addEventListener('click', function() {
let inputElement = document.getElementById('myInput');
if (!inputElement.value) {
inputElement.value = 'Book';
}
});
<input id="myInput" list="orderTypes" placeholder="Book">
<datalist id="orderTypes">
<option value="Book">
<option value="Copy">
<option value="Page">
</datalist>
<input id="submitButton" type="submit">
I've menaged to get what You described with just <select> + <option> tags instead of <input> + <datalist>:
<select name="sortBY">
<option value="Book">Book</option>
<option value="Copy">Copy</option>
<option value="Page">Page</option>
</select>
Putting it all inside <form></form> tags will send it eg. with POST method with $_POST['sortBY'] value.
If this helps at all:
$('#grouptext').val($('#grouplist option#48').attr('value'));
where '#grouptext' is your text input to which your datalist '#grouplist' is attached, and #48 is the ID you're looking to "pre-select".
here's what my data list looks like, for clarity
worked for me.
In Chrome's console it shows up like this with "option#115", which corresponds to the correct text in the datalist for that "id" (being 115)
set id for your input and with js set default value
<script>
setTimeout(() => {
document.getElementById('orderTypes').value = "Book";
}, 100);
</script>
This is my code. It is in a php file. It doesn't quite do what I want. It hides one option and displays the other, but what I need to do is not just the option to be hidden visually, but not to display at all in the html. Now if you click view source it shows all the divs. I need it when I click one option, the others to disappear from the html and view page source, just the selected to be in there. Any ideas on that?
<select name="type" onchange="showstuff(this.value);">
<option value="code">Code</option>
<option value="look">Look</option>
<option value="have" selected>Have</option>
</select>
<div id="have" style="display:block;">1</div>
<div id="look" style="display:none;">2</div>
<div id="code" style="display:none;">3</div>
<script>
function showstuff(element){
document.getElementById("have").style.display = element=="have"?"block":"none";
document.getElementById("look").style.display = element=="look"?"block":"none";
document.getElementById("code").style.display = element=="code"?"block":"none";
}
</script>
You can create a div to put the active option on it.
Something like this
<select name="type" onchange="showstuff(this.value);">
<option value="code">Code</option>
<option value="look">Look</option>
<option value="have" selected>Have</option>
</select>
<div id="optionContainer">
</div>
<script>
//Object with the options. you can access for example have with options['have'] or options.have
var options = {'have':'<div id="have"><b>1</b></div>',
'look':'<div id="have"><b>2</b></div>',
'code':'<div id="have"><b>3</b></div>'};
function showstuff(element){
//Replace the inner HTML of the div optionContainer with the string in the option
document.getElementById("optionContainer").innerHTML = options[element];
}
</script>
I created this jsfiddle to see it in action
Using jquery methods- show(), hide() and remove(). One can use $("#id").remove() to remove the html from the rendered page.
https://api.jquery.com/remove/
I am a beginner in java-script , what I am doing right here is trying to make my combo-box named "dale" to enable and disable when i select "Reasons Specific Categorized" from my combo-box named "repSelect" but i keep getting an error on my java-script.
function makeEnable(value){
if(value=="rep4"){
var x=document.getElementById("dale")
x.disabled=false
}else{
var x=document.getElementById("dale")
x.disabled=true
}
}
</script>
</script>
<select onChange="makeEnable(value)" name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte" >
</form>
My modification But dosent work
function makeEnable(){
var e = document.getElementById("repSelect");
var strUser = e.options[e.selectedIndex].value;
if(strUser=="rep4"){
document.getElementById("dale").disabled=false;
}else{
document.getElementById("dale").disabled=true;
}
}
You are using the .getElementById() method, but your element doesn't have an id defined. Add an id in the html:
<select id="dale" name="dale">
You may also need to modify the call to your function in the first select's onchange handler, to pass this.value instead of just value:
<select onChange="makeEnable(this.value)" name="repSelect">
You can also substantially simplify your function as follows:
function makeEnable(value){
document.getElementById("dale").disabled = value!="rep4";
}
Demo: http://jsfiddle.net/3t16p5p9/
EDIT: I just noticed that you had the jquery tag on your question. To use jQuery, remove the inline onChange= attribute and then add this to your script:
$(document).ready(function() {
$("select[name=repSelect]").change(function() {
$("#dale").prop("disabled", this.value!="rep4");
}).change();
});
This binds a change handler to the first select, and then calls it immediately so that the second one will be appropriately enabled or disabled when the page loads (as requested in a comment).
Demo: http://jsfiddle.net/3t16p5p9/2/
Actually you are using document.getElementById but your combobox doesn't have an Id.
Thats the reason its not working.
Instead of adding onchange in the html, use as below:
<select id='repselect' onchange=makeEnable() name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select id="seldale" name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte"/>
$('#repselect').change(function(){
if(this.value=="rep4"){
var x= document.getElementById("seldale")
x.disabled=false
}else{
var x =document.getElementById("seldale")
x.disabled=true
}
});
I'd like to add and remove options from one drop down menu using JQuery given a selected option in another.
HTML:
<form action='quickLook.py' method = 'post'>
First DropDown Menu
Specify Channel:
<select id='bolometer'>
<option selected id='Dual' value = 'Dual' >Dual
<option id='Top' value = 'Top' >Top
<option id='Bottom' value = 'Bottom' >Bottom
</select>
Second DropDown Menu
<br>Specify Data to Display:
<select id='target'>
<option selected id='Spectrum' value = 'Spectrum'>Spectrum
<option id='Interferogram' value = 'Interferogram'>Interferogram
<option id='SNR' value = 'SNR'>SNR
<option id='Diff_Band' value = 'Diff_Band'> Diff_Band
</select>
<input type='submit' value= 'Query Images'>
</form>
I'd like to do something like this is JQuery:
$("#Dual").click(function() {
$("#target").append("#Diff_Band");
$("#target").remove("#Interferogram");
$("#target").remove("#SNR");
});
$("#Top").click(function() {
$("#target").append("#Interferogram");
$("#target").append("#SNR");
$("#Diff_Band").remove();
});
I want to append or remove the already written html.
What is the best way to do this?
Thank you for your time!
This is a similar problem I've encountered before working with Safari. A solution is to use .detach() instead of remove() as it keeps all jQuery data associated with the removed elements. Check this jsfiddle: http://jsfiddle.net/Ueu62/