First time posting so apologies if it may question is at first unclear, although I hope it's fairly straight forward. I'm new to Javascript and need some help.
WHAT I WANT TO ACHIEVE:
I have an HTML form and when someone selects a letter from the 'letter' dropdown menu in the HTML form (e.g. A, B, or C), I want the 'number' dropdown menu to change automatically based on the select in the 'letter' dropdown (e.g. if letter selected was 'A' then select '1', if 'B' then select '2' and so on.)
[[ As a bonus, it also like the 'number' dropdown to be disabled, so automatic variable generated cannot be changed by the front-end user filling out the form]]
FURTHER INFORMATION
I had seen something similar down on a form I had permission to use so I tried to ammend the code but I can't make it work. If you could provide tips on how to ammend the code or provide a new answer to my problem that would be fantastic.
MY CODE (so far...)
The Javascript Part
<html>
<head>
<?php
echo "var campus='none';";
?>
<script language ="javascript">
function changeDropdown(number) {
numberSelection = document.getElementById("number");
for (var i = 0; i < numberSelection.length; i++)
{
if (number == numberSelection[i].value)
{
numberSelection[i].selected = true;
return;
}
}
}
function load() {
if (number == 'none')
{
letterSelection = document.getElementById("letter");
if letter == letterSelection("0")
{
changeDropdown("A");
}
else if letter == letterSelection("1")
{
changeDropdown("B");
}
else if letter == letterSelection("2")
{
changeDropdown("C");
}
}
else
{
changeDropdown(number);
}
}
</script>
</head>
<body>
The Form
<form name ="form1">
<select name ="letter" onclick="load()">
<option value ="A">A
<option value ="B">B
<option value ="C">C
</option>
</select>
<br />
<select name ="number">
<option value ="1">1
<option value ="2">2
<option value ="3">3
</option>
</select>
</body>
</html>
Any clarification, just ask and I'm very happy to respond :)
change this
numberSelection = document.getElementById("number")
to this
numberSelection = $("number").val();
and
<select name ="number">
<option value ="1">1
<option value ="2">2
<option value ="3">3
</option>
</select>
to
<select name ="number">
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
</select>
remember, a openening tag must have a closing tag
Related
First of all, lemme take a moment to apologize how dumb i asked my question but that was the only way i could ask it.
So i've seen before in some websites they have some kinda fill in the blank lines where you write what you want and it will redirect you to another page.
e.g
What you are looking for? Iam looking for ______________
than after you typed what you wanted it will redirect you to the desired page. but in my case i just want them few options to pick for blank space than redirect them to somewhere else in my wordpress website
Iam trying to make something like that but iam still a newbie.
Thanks for all your help
Lets assume that this is a sample page of yours which has the select option with the id "dropdown"
HTML
<html>
<body>
<p>What you are looking for? Iam looking for
<select id = "dropdown" >
<option value="zero" selected>Select Option</option>
<option value = "one">Duckduckgo</option>
<option value = "two">Qwant</option>
<option value = "three">Jamun Search</option>
</select>
</p>
</body>
//Javascript
function showDrop(){
var paragraphTag = document.getElementById('list');
paragraphTag.style.display = "none";
var selected = document.getElementById('dropdown');
selected.style.display = "block";
}
function redirectFunction(){
var selected = document.getElementById('dropdown');
var selectValue = selected.options[selected.selectedIndex].value;
if(selectValue == "one"){
window.location.href = "http://www.duckduckgo.com";
}
else if(selectValue == "two"){
window.location.href = "http://www.qwant.com";
}
else if(selectValue == "three"){
window.location.href = "http://www.jamunsearch.rf.gd";
}
else {
alert("Please Select An Option To Proceed!")
}
}
/* CSS */
.dropdown {
display: none;
}
<!--HTML-->
<html>
<body>
<p>What you are looking for? Iam looking for</p> <p id="list" onclick="showDrop()">__________</p>
<select id = "dropdown" class="dropdown" onchange="redirectFunction()">
<option value = "zero" selected>Select Option</option>
<option value = "one">Duckduckgo</option>
<option value = "two">Qwant</option>
<option value = "three">Jamun Search</option>
</select>
</p>
</body>
</html>
When the user clicks the '_____' it will be hidden and the select drop box will be visible to be selected.
The redirectFunction() will be executed when the user selects one of the options and the drop down button will be deleted(display:hidden). The script takes the value of the selected option i.e., zero,one,two or three. And then it checks with the values in the code. window.location.href("http://www.example.com") will redicted the user to Example.com
You can change that url to your wordpress urls.
If the user doesn't select and clicks the button, the page will alert the user to select one option.
If you wanted to check the condition with the select name refer this post Get the Select Option Value
I am trying to populate a form option value if it's attribute quantity equals zero.
My goal is to add the a message to the current option value
My html is:
<select class="valid">
<option disabled="disabled" selected="selected" value="">Select Bar</option>
<option value="1" quantity="99">value 1 </option>
<option value="2" quantity="0">value 2 </option>
</select>
So far I've tried the following in jQuery but it's not working:
if($(this).attr('quantity') == '0') {
$(this).append('<span>message</span>');
}
If you don't care about preserving the original message, than you can simply say $(this).text("message"). Leave out the <span> since it cannot be rendered inside of an <option> element anyway.
if($(this).attr('quantity') == '0') {
$(this).text('message');
}
If you want to preserve the original message, you have a couple options. One would simply be to append the new message to the original, however, it may get tricky to remove it later, so I would suggest having some sort of delimiter so you can easily identify the original vs the appended message, like so:
var $option = $(this);
if($option.attr('quantity') == '0') {
$option.text($option.text().trim() + ' (message)');
}
Then, to remove the message, you can do something like this:
$option.text($option.text().slice(0, $option.text().indexOf('(')).trim());
You can populate the option with like this,
$(document).ready(function () {
$('.valid').on('change', function () {
if ($(this.options[this.selectedIndex]).attr('quantity') == 0) {
$(this.options[this.selectedIndex]).find('span').remove();
$(this.options[this.selectedIndex]).append('<span>Message</span>')
}
});
});
JSFIDDLE
I'm not entirely sure of what you're trying to achieve from your question, but you cannot add html elements to an option element. You can however change the text as follows:
$(document).on('change', '.valid', function(){
var selected = $('.valid > option:selected');
if(selected.attr('quantity') == '0'){
selected.text('something else');
}
});
if you wanted to append an error you could do so by using jQuery append() or concatenating with the original value. Alternatively if you wanted it as validation outside of the select box, you could simply assign to the value of a div by replacing the line inside of the if statement.
<select class="valid" onchange="quality(this.options[this.selectedIndex].getAttribute('quantity'));">
<option disabled="disabled" selected="selected" value="">Select Bar</option>
<option value="1" quantity="99">value 1 </option>
<option value="2" quantity="0">value 2 </option>
</select>
<span id="msg"></span>
<script type="text/javascript">
function quality(val) {
if(parseInt(val) == 0){
document.getElementById("msg").innerHTML = "Message";
}
}
I am trying to write a JavaScript function where if value 1 from the first dropdown(pcount) automatically selects value 1 for drop down 2(listedname), But then if anything besides value 1 (2,3,4) is chosen I do not want drop down 2 to do anything except default back to please select if value 1 was selected and then changed to another value. I am very new to JavaScript and programming in general and have not been able to find any examples similar to this. So any help will help!
JavaScript Funtion:
<script type="text/javascript">
function leaveChange() {
if (document.getElementById("pcount").value = 1){
document.getElementById("listedname").value = 1;
}else
document.getElementById("listedname").value = 2;
}
}
</script>
Dropdown 1 and 2:
<select id="pcount" onchange="leaveChange()">
<option value="" selected="selected">Please Select</option>
<option value="1">0</option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
</select>
<select id="listedname">
<option value="" selected="selected">Please Select</option>
<option value="1">Business Name</option>
<option value="2">Individual Owner</option>
</select>
If you are doing your if clause with one equals sign, Javascript will check if your element is set to the new value successfully.
Instead, when you do a comparison, use double equal signs (in your case)
if (document.getElementById("pcount").value == 1){
If anyone is looking for the JavaScript function here you go!
<script type="text/javascript">
function leaveChange() {
if (document.getElementById("pcount").value == 1){
document.getElementById("listedname").value = 1;
}
else if (document.getElementById("pcount").value != 1){
document.getElementById("listedname").value = "";
}
}
</script>
I have a select list:
Choose a Story:</br>
<select name="Book" id="book">
<option value="empty" selected disabled></option>
<option value="Book1">Book1</option>
<option value="Book2">Book2</option>
<option value="Book3">Book3</option>
<option value="Book4">Book4</option>
</select><br><br>
I got the script to work to display the chosen item onchange below the options thanks to some assistance from other stackoverflow users. But it only states what option is chosen instead of getting it to say "You chose _." after something other than the blank option is chosen.
<script>
$('#book').on('change', function() {
$('#result_element').text(this.value);
});
</script>
<script>
if ((document.getElementsByTagName("book")this.value) != empty)
{
document.write("You chose ")
}
</script>
<span id="result_element"></span>
Basically, I want it to show the "You chose __." after they select something.
a) You will need to do it in the event handler. Otherwise the code is executed when the page is loaded (and not again), instead of after the user has chosen an option
b) Do not use document.write!
<script>
$('#book').on('change', function() {
var output = "";
if (this.value != "empty") {
output = "You chose " + this.value;
}
$('#result_element').text(output);
});
</script>
<span id="result_element"></span>
I have two select boxes like so:
<select id="one">
<option value="default">Select File</option>
<option value="path/to/file1">File One</option>
<option value="path/to/file2">File Two</option>
<option value="path/to/file3">File Three</option>
</select>
<select id="two">
<option value="default">Select File</option>
<option value="path/to/file4">File Four</option>
<option value="path/to/file5">File Five</option>
<option value="path/to/file6">File Six</option>
</select>
<p class="button_image">
<a onclick="download(document.getElementById("one").value)"></a>
</p>
Here is my download function:
function download(file) {
if (file == 'default') return;
window.location = 'http://www.mysite.com/download/' + file;
}
This works fine for one select box, but I can't seem to figure out how to use the same button image. Oh yah, the p.class=button_image has background image that is a button with hover effects.
The reason I want these select boxes to be separate is because they each represent a group of files, eg, 32-bit versus 64-bit. So they cannot be combined, because it won't flow with the page design.
I've tried some if/else blocks in PHP using the getElementById but I'm getting stuck. This is what I tried and it seems to only partially work:
<?php
if ('document.getElementById(\"one\")' == 'one') {
echo "<a onclick='download(document.getElementById(\"one\").value)'></a>";
}
else if ('document.getElementById(\"two\")' == 'two') {
echo "<a onclick='download(document.getElementById(\"one\").value)'></a>";
}
?>
I should note that I don't necessarily need to use PHP in this case to solve this problem. It was just an option I tried because I'm using PHP for the server-side programming. I could be happy with any number of options, so long as they work.
Thanks.
** EDIT **
This design might be flawed. But the intention is that either a file from box one is downloaded OR a file from box two is downloaded. If one selection is made, then the other should be rest to default and vice versa. This is what I'm working on now.
** EDIT **
I ended up goign with Dawson Loudon's answer for one part and I created another function based on Barmar's comment that looks like this:
// resets other select box when selected
function reset_index(id) {
document.getElementById(id).selectedIndex = 'default';
}
An A element as a button doesn't seem appropriate, just use an img.
Anyhow, a function to use the first select with a selected option other than the first can be something like:
function getPath() {
var select;
var args = arguments;
for (var i=0, iLen=args.length; i<iLen; i++) {
select = document.getElementById(arg[i]);
if (select && select.selectedIndex > 0) {
window.location = 'http://www.mysite.com/download/' + select.value;
}
}
}
The above expects the first option to be the default selected, so if it's selected, or no option at all is selected, the select's selectedIndex will be 0 or -1 respsectively. I would ensure one option is selected by adding the selected attribute to the first one:
<option value="default" selected>Select File</option>
and the call is:
<img src="buttonImage.jpg" onclick="download('one', 'two');">
though you might want to add a class to the select elements and get them using getElementsByClassName or similar and loop over that collection, rather than hard code the ids.
Try replacing this:
<p class="button_image">
<a onclick="download(document.getElementById('one').value)"></a>
</p>
with:
<p class="button_image">
<a onclick="download(document.getElementById('one').value, document.getElementById('two').value)"></a>
</p>
and then replace your download function with this:
function download(file1,file2) {
if (file1 == 'default' && file2 == 'default'){
return;
}
else if(file1 != 'default'){
window.location = 'http://www.mysite.com/download/' + file1;
}
else{
window.location = 'http://www.mysite.com/download/' + file2;
}
}