I used the following HTML code to create a simple drop down menu. (Actully got it from this site by doing a search).
But the issue I'm having is the submit ("Go!") button works in every other browser but IE 8-9. Even works on IE 10 on a Windos Phone. CAn somebody PLEASE tell me what needs to be changed to get it working?
Thanks.
<html>
<body>
<form name="Game Results">
<select name="ddmenu_name" id="ddmenu_name" style="width: 40% !important;">
<option value="" selected>Select Game</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=60&Itemid=82">Week 1</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=61&Itemid=82">Week 2</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=62&Itemid=82">Week 3</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=63&Itemid=82">Week 4</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=64&Itemid=82">Week 5</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=65&Itemid=82">Week 6</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=66&Itemid=82">Week 7</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=67&Itemid=82">Week 8</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=68&Itemid=82">Week 9</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=69&Itemid=82">Week 10</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=70&Itemid=82">Las Vegas</option>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
</form>
</body>
</html>
Being able to refer to an id directly in script was an old IE hack that is not standard, you should use document.getElementById instead.
Change:
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
To:
<input type="button" name="Submit" value="Go!" onClick="window.open(document.getElementById('ddmenu_name').value,'newtab')">
Also, IE (at least IE8) doesn't support an equal sign in a window name (this will result in a script error), so you'll have to find something safer to use - such as the index of the selected value:
<input type="button" name="Submit" value="Go!" onClick="window.open(document.getElementById('ddmenu_name').value, 'NewTab_' + document.getElementById('ddmenu_name').selectedIndex)">
I'm not sure if this is an IE thing or a standard browser thing.
Working Fiddle
Related
Good day!
I've got a simple problem, and it involves HTML.
I've googled everywhere, but found only similar results for, "How to disable autocomplete on input".
I'm trying to find a way to block custom input for a dropdown selection input, but I can't seem to find it.
I've found the attribute disabled, and setting disabled="true" on the input completely disables it, which is not my goal.
This is my code, I found it on w3schools.com.
I've attached 2 versions of it, un-disabled and disabled.
<!--NOT DISABLED STUFF-->
<form action="/action_page.php">
<input style="margin-bottom:15vw;" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<!--DISABLED STUFF-->
<form action="/action_page.php">
<input list="browsers" disabled="true">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Thank you for reading :)
I found a way to do it, thanks to #Eisenheim's comment.
Instead of using <datalist> stuff, it works when I use <select>.
<form action="default.php">
<select>
<option value=""></option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</select>
<input type="submit">
</form>
I'm trying to make a placeholder for my dropdown multiple options using Angular and Bootstrap. But looks like i'm doing it wrong. I made a option for a placeholder like please select and put it on top but it is not showing until i made a first submit.
<label>Question</label><br>
<select #question="ngModel" name="question" [(ngModel)]="AppService.selectedquestion.question" class="empty form-control">
<option value="" disabled selected hidden>Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select><br>
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
I think it caused by my ngModel part.Can anyone help me figure this out, please?
If you remove the hidden attribute, you can see the "Please select" option even after 1st submit. Hope this meets your requirements
<label>Question</label><br>
<select #question="ngModel" name="question" [(ngModel)]="AppService.selectedquestion.question" class="empty form-control">
<option value="" disabled selected>Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select><br>
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
I'm writing a really simple form with 2 text fields and one select. For some reason, the select tag with options doesn't display on my page. I can see the 2 text fields and the label for the the select, but not the select it self.
The app is written in rails and I use materialize.
There might be something too obvious that I don't see it, but after 30mn of thinking, I guess it's fair to put it on SO :)
Thanks
Here's the code:
<form action="/resources" method="post">
<input
type="hidden"
name="authenticity_token"
value="<%= form_authenticity_token %>">
<label for="ressource_name">Ressource Name</label>
<input type="text" id="ressource_name" name="resource[ress_name]" value="<%= #resource.ress_name %>">
<label for="ressource_link">Ressource Link</label>
<input type="text" id="ressource_link" name="resource[link]" value="<%= #resource.link %>">
<label for="categories">Categories</label>
<select id="categories" name="resource[category_id]">
<option value="1">Stuff 1</option>
<option value="2">Stuff 2</option>
<option value="3">Stuff 3</option>
<option value="4">Stuff 4</option>
<option value="5">Stuff 5</option>
<option value="6">Stuff 6</option>
<option value="7">Stuff 7</option>
<option value="8">Stuff 8</option>
</select>
<br>
<input type="submit" value="Post">
</form>
So I put the answer (from Samir) here as well as I guess some other people might come across that issue (it won't change your life, but it might save you some minutes that you want to spend on 'real' issues).
Check the styling! For some reason the select tag was defaulted to {display: none;}
The select tags(likely all select tags) on your page are most likely defaulted to styled to 'display : none' and just in case you cannot find the exact css code that is disappearing the select tag, just cascade the old style by declaring a style attribute on the select element and display it to block. like below
<select style="display: block;">
<option value="" selected>Choose Country</option>
</select>
Heres another problem...
What I want to do is target a frame to display with a dropdownbox
<p align="center"><b>Select a Site </b>
<select onchange="window.open(this.value,'','');">
<option value="">Select one</option>
<option value="http://www.altavista.com" target="iframe_a">1</option>
<option value="http://www.yahoo.com" target="iframe_a">2</option>
<option value="http://www.google.com" target="iframe_a">3</option></select>
<input type="button" value="Go"
onclick="window.open(setit.options[setit.selectedIndex].value)">
</p></form>
But when I try this it apperently doesnt work.
Hope somone can find a solution because its kinda enoying me right now.
EDIT:
I know that it is 'window open'
Can somone please correct it, thats why im asking the question.
please give code :D
or example
Cheers, -Geekz
Here's a jsfiddle that does what you want: http://jsfiddle.net/r5RBr/. The key is changing the src of the iframe. Below is the code from the fiddle.
<iframe height="300px" width="500px" id="iframe_a"></iframe>
<form>
<p align="center"><b>Select a Site </b>
<select onchange="document.getElementById('iframe_a').src=this.value">
<option value="">Select one</option>
<option value="http://www.altavista.com" target="iframe_a">1</option>
<option value="http://www.yahoo.com" target="iframe_a">2</option>
<option value="http://www.google.com" target="iframe_a">3</option>
</select>
<input type="button" value="Go" />
</p>
</form>
I have observed very strange behavior of html's select. When the page starts loading selected option is displayed (Oprion 3). When the page is fully loaded select resets to its first option (Option 1). The source of the page shows selected attribure on the third option, below:
<form action="#">
<fieldset>
<select>
<option value="value 1">Option 1</option>
<option value="value 2">Option 2</option>
<option selected value="value 3">Option 3</option>
</select>
</fieldset>
</form>
Any ideas what may be the cause?
I have found JS code that was causing this:
$(options).removeAttr('selected');
$(options[map[my_array]]).attr('selected', 'selected');