I have this problem with onchange:
<form class="form" action="javascript:update();">
<select name="calendar" id="calendar" onchange = "update(); location.href = 'http://orario-preghiera.it/newsito/try.html?id=' + this.value">
<option value = "x" selected="selected">Bologna</option>
<option value = "y1">Other city</option>
<option value = "y2">Other city</option>
<option value = "y3">Other city</option>
<option value = "y4">Other city</option>
<option value = "y5">Other city</option>
</select>
</form>
When I choose a option, from x (i.e. selected) to y, the URL changes to y, and is displays the contents of y for a few seconds and then returns to x (selected), but the link changes and remains.
How can I stop the content?
Thanks!
Your problem is that update() function is called on every page load. Seems from the debugger that it happens from the onchange method. Anyways, I'd suggest you to change the selected attribute to the active town when the page is first requested, so that you wouldnt default to the same or remove the update from onchange on the select tag.
Also, why the hell do you have jQuery loaded twice and then you override the $ method, rendering jQuery useless.
Related
I am on beginning of the coding life. I am trying to change text in span with selected option, but it gives me values not texts. For example, when I select the bus option, I want it to shows me the "bus" text. I do not want value number. Thanks in advance.
<select id="vehicles" onchange="showChange()">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(){
var selected_vehicle = document.getElementById("vehicles").value;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>
You can first pass this keyword to the function then get the text using selectedIndex of option.
<select id="vehicles" onchange="showChange(this)">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(el){
var selected_vehicle = el.options[el.selectedIndex].text;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>
If you keep the inline declarations from your HTML ( generally the preferred approach ) you can assign your event handlers in a separate file. Also, as a point of note - if you submit the form data in the traditional manner ( rather than with AJAX etc ) then the select element needs a name - an ID will NOT appear in the REQUEST array!
document.querySelector('select[name="vehicles"]').addEventListener('change',e=>{
e.target.nextElementSibling.textContent=[ e.target.value, e.target.options[e.target.options.selectedIndex].text].join(' ')
})
<select name='vehicles'>
<option selected hidden disabled>Select mode of transport
<option value='1'>Bus
<option value='2'>Car
<option value='3'>Plane
</select>
<span id='vehicle'></span>
I would like the image to change based on the dropdown selection, then directed to the URL also associated with the option when submitted.
So, there are two 'values' for each option, the image and the URL. The Image changes instantly and the URL is where the selection is directed to on submit.
I had the image change working, then added the script for a link and the href which did not work.
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
<option value="https://pbs.twimg.com/profile_images/650647649985646593/FEed4zzM_400x400.jpg" selected="" href="detroitcanvas.co">Choice 1</option>
<option value="https://news.artnet.com/app/news-upload/2020/01/Jackie-Saccoccio-256x256.png" href="twitter.com">Choice 2</option>
<option value="https://art-media.s3.amazonaws.com/media/public/tags/tag_animal%20art/2019-11-20T194138.3524830000.thumb.jpeg" href="instagram.com">Choice 3</option>
</select>
<br><br>
<img id="imageToSwap" class="profile" src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg">
Submit
<script>document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');}</script>
You can use data attributes in each option for additional values, and key your JS to use them, e.g., this pseudocode:
<option data-src="https://pbs.twimg.com/profile_images/650647649985646593/FEed4zzM_400x400.jpg" selected="" value="detroitcanvas.co">Choice 1</option>
<script>
document.getElementById('my_selection').onchange = function() {
image.src = this.children[this.selectedIndex].dataset.src;}
onsubmit uses the selected option value
</script>
I'm trying to make sure that the user is not selecting the default of a drop down method by determining the index number selected. It seems to be only returning false even though I believe the code is correct... So far I have the code listed below but its not working, any ideas?
<p id="Gender">
<label for="Gender">Gender: </label>
<select required>
<option disabled selected value="Select">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</p>
function validate1() {
valCheck3 = true;
var dropD1 = document.getElementById("Gender");
var resultSelect = dropDown1(dropD1);
var image3 = getImage(Boolean(resultSelect), "gender");
var labelGender = getNotification3(Boolean(resultSelect), "gender");
document.getElementById("Gender").appendChild(image3);
document.getElementById("Gender").appendChild(labelGender);
}
function dropDown1(select){
if(select.selectedIndex > 0){
return true;
}
valCheck3 = false;
return false;
}
EDIT: I added the HTML I used the setting to make the answer required, the problem is I need to have a button that checks whether the answer has been selected to insert an image next to the box. So in this case I figured I could determine the selected index number of the drop down so that I could determin
You can add the required attribute to the select element, then add some value attribute to each option except for the first one (use value without the value itself i.e. value="1")
Then you can just use select.checkValidity(), which returns true or false.
I'm trying to make sure that the user is not selecting the default of a drop down
You can just add disabled attribute to the <option> and also make it default. If the user opens the dropdown, the default option can not be clicked anymore and the user has to choose an onther option.
Example:
<form action="">
<select required>
<option disabled selected value>Default option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="submit">
</form>
I have the following code
<select class="needsclick" id="country" name="order[country]">
<option value="USA" selected="selected">USA</option>
<option value="CANADA">CANADA</option>
</select>
I could do the following javascript command to change the option value
document.getElementById("country").value = 'CANADA'
however, this does not change the selected value and does not change the state box to province.
When I physically click this dropdown menu and change to CANADA, the effects of the change take place (the state box changes to province)
I am using Swift iOS to parse HTML and wondering what line of javascript code is needed to click a option value rather than changing the option value?
If I do the following after changing the value
document.getElementById("country").click()
it just clicks the menu but still does not change the state box to province (happens when physically clicking the option value)
How can I achieve this using a javascript command like the two above?
The state/province box is irrelevant to the code just relevant to the fact it changes when the dropdown is physically clicked and not when programmatically changed.
I can do the following code but it still does not change the state box to province (only if physically clicked)
document.getElementById("country")[1].selected = true
To work with the option elements within a select, you must access the options node list and then select one to work with.
Setting the value is separate from setting the selected flag.
var countries = document.getElementById("country");
var states = document.getElementById("provincesUSA");
var territories = document.getElementById("provincesCanada");
countries.addEventListener("change", function(e) { update(e); });
function update(e){
// show the correct sub-list based on the selected option
var country = countries[countries.selectedIndex];
if(country.value === "USA"){
states.classList.remove("hidden");
territories.classList.add("hidden");
} else if(country.value === "CANADA") {
territories.classList.remove("hidden");
states.classList.add("hidden");
} else {
territories.classList.add("hidden");
states.classList.add("hidden");
}
}
// To dynamically choose
document.querySelector("button").addEventListener("click", function(){
countries.options[2].selected = "selected"; // Canada
// Simulate the change event
update(countries);
});
#provincesUSA.hidden, #provincesCanada.hidden { display:none; }
<select class="needsclick" id="country" name="order[country]">
<option value="" selected="selected">Choose A Country</option>
<option value="USA">USA</option>
<option value="CANADA">CANADA</option>
</select>
<select id="provincesUSA" class="hidden" name="states">
<option value="al">Alabama</option>
<option value="ar">Arkansas</option>
</select>
<select id="provincesCanada" class="hidden" name="territories">
<option value="on">Ontario</option>
<option value="qu">Quebec</option>
</select>
<button>Force A Selection (click me whe CANADA is NOT selected)</button>
document.getElementById("country").selectedIndex = 2;
I am trying to make a drop-down(B) menu that is hidden at first and when a different form(A) is completed, then this drop-down(B) menu is shown. However, when the page loads, the second drop-down(B) menu is not hidden. Code is below and stored in a php file
<h4>And What Type of Data Are You Focusing On?</h4>
<select name="library_type" id="library_type">
<option value="DNA"> DNA </option>
<option value = "RNA"> RNA </option>
<option value="WGS"> Whole Genome Sequences</option>
<option value="WXS">Whole Exome Sequences</option>
<option value="RNA-Seq">RNA-Seq</option>
<option value = "miRNA-Seq">miRNA-Seq</option>
<option value = "VALIDATION">VALIDATION</option>
<option value = "AMPLICON">AMPLICON</option>
<option value = "ChIP-Seq">ChIP-Seq</option>
<option value = "Bisulfite-Seq">Bisulfite-Seq</option>
<option value = "TARGET_60">TARGET_60</option>
<option value = "TARGET_50">TARGET_50</option>
<option value = "TARGET_61">TARGET_61</option>
<option value = "OTHER">OTHER</option>
</select>
<h4> What Condition are You Interested in? </h4>
<select name="tissueState" id="tissueState">
<option value = "Normal"> Normal </option>
<option value = "Tumor"> Tumor </option>
<option value = "Both"> Both </option>
</select>
<br><br>
<input type="submit" value="Show me Matches">
</form></center>
In a separate file, hideDropDownMenu.js, this is the content of that file.
$("#tissueState").hide();
$(document).ready(function)(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
In the head of the .php file I have this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="hideDropDownMenu.js"></script>
Here is how the page looks
Your code is buggy...
First of all close correctly the document ready and change event.
From this } to this });
And this $(document).ready(function)(){ must change in $(document).ready(function(){
This is the corrected code:
<script>
$("#tissueState").hide();
$(document).ready(function(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
</script>
Try it: https://jsfiddle.net/ougvw8kk/
In order to hide the dropdown during page load, you need to declare the hide statement inside document ready function.
$(document).ready(function)(){
$("#tissueState").hide();
$('#library_type').change(function(){
var value = $(this).val();
});
});