This is kinda annoying, but even though I have worked with html/css and tiny bit of jquery I haven't yet learned much about forms etc.
I have a problem and I cant google the answer, but im sure some of you hardcore devs can tell me this quick!?
I need to make a form that could look like this:
HTML;
<form class="slct-form">
<select>
<option value="choose">Choose</option>
<option value="100.000">100.000</option>
<option value="150.000">150.000</option>
<option value="200.000">200.000</option>
</select>
</form>
I need that when I choose one of the elements in my dropdown form it should go to another url... Is this not possible? AND preferable without jquery!
If you add an id to your select, you can access it via plain javascript like this:
var selectmenu = document.getElementById("selectMenu");
selectmenu.onchange = function() {
var selectedOption = this.options[this.selectedIndex];
if (selectedOption.value != "choose")
window.location.assign = "/page.php?selectvalue=" + selectedOption.value;
}
You could do something like this:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function donav(dd)
{
var navUrl = "";
switch(dd.selectedIndex)
{
case 1:
navUrl = "http://www.google.com/";
break;
case 2:
navUrl = "http://www.bing.com";
break;
}
document.location.href = navUrl;
}
</script>
</head>
<body>
<form class="slct-form">
<select onchange="donav(this)">
<option value="choose">Choose</option>
<option value="100.000">100.000</option>
<option value="150.000">150.000</option>
<option value="200.000">200.000</option>
</select>
</form>
</body>
</html>
If i understand you corretly you want to bring a value from one page to another?
You could use the $_GET['name'] with php for that.
Related
My ultimate goal with this is to make a dropdown that allows user input also. The best I can seem to do is an textbox next a dropdown that makes it look like they are similar, the issue I am running into is that I need the textbox to update whenever my dropdown value is changed. I have some code I've been playing with (below), but it doesn't seem to be getting me anywhere! Any pointers on how I can get this to work, or am I messing up the syntax? (fairly new to both jscript and html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
select
{
width:200px;
}
</style>
<head>
<title>Test</title>
<script type="text/JavaScript">
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
</script>
</head>
<body>
<form action="" method="">
<input name="stroke"/>
<select name="theItems" onchange="otherSelect()">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
You should execute your script in the window.onload event. The elements are not available to your script when it is being executed. Change your script to this
<script type="text/JavaScript">
window.onload = function(){
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
}
</script>
This way the script will be executed after the HTML elements have been rendered by the browser.
Here's a simple pure JavaScript implementation of what you want. http://jsfiddle.net/24Xhn/
We're going to setup the markup so the select box and the other input box have similar name and id attributes. We'll use classes to setup/initialize the onchange events and make sure the inputs start off hidden and disabled. By toggling the "disabled" attribute, true or false we are making it so the input or select don't show up when the form is submitted, submit the form in the JSFiddle with different combinations and you'll see the output in the query string of the URL.
HTML
<select id="items1" name="items1" class="select-other">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<input id="items1-other" name="items1-other" class="input-other" />
JS
// setup
var inps = document.getElementsByClassName("input-other");
for(var i=0; i<inps.length; i++) {
var inp = inps[i];
// hide & disable the "other" input
inp.style.display = "none";
inp.disabled = true;
// set onchange, if input is empty go back to select
inp.onchange = function() {
var val = this.value;
if(val == "") {
this.style.display = "none";
this.disabled = true;
// get its associated select box
var sel = document.getElementById(this.id.replace(/-other$/i, ""));
sel.style.display = "";
sel.disabled = false;
}
};
}
var sels = document.getElementsByClassName("select-other");
for(var i=0; i<sels.length; i++) {
var sel = sels[i];
// set onchange if value is other switch to input
sel.onchange = function() {
var val = this.value;
if(val == "other") {
this.style.display = "none";
this.disabled = true;
// get associated input box
var inp = document.getElementById(this.id + "-other");
inp.style.display = "";
inp.disabled = false;
}
};
}
I just realized what was wrong. I didn't truly look at the html until I copied and pasted it into a test application and I figured out the issue.
You need to set the id tag to the stroke and theItems not the name tag. That's why it's not doing anything. There was, I'm guessing, a copy/paste issue as well because you didn't have a closing html tag, but I assumed you just missed copying that. Also, you don't really need global variables in order to retrieve the input and select you just need them inside the actual function, and you can actually pass the select into the function like so.
Your code corrected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
select
{
width:200px;
}
</style>
<script type="text/javascript">
function otherSelect(obj)
{
var input = document.getElementById('stroke');
input.value = obj.value;
}
</script>
</head>
<body>
<form action="" method="">
<input id="stroke" name="stroke"/>
<select id="theItems" name="theItems" onchange="otherSelect(this)">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
</html>
I also wanted to create a combobox with an auto-updating text field next to it for new entries, and came up with this in less than an hour, based on simple html and javascript examples from w3schools.com. It works perfectly on my IE browser.
<!DOCTYPE html>
<html>
<head>
<script>
function updateField(name, value)
{
document.getElementById(name).value = value;
}
</script>
</head>
<body>
<select name='10' onchange='updateField(this.name, this.value)'>
<option value='volvo'>Volvo</option>
<option value='saab'>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="text" id="10" value="volvo">
</body>
</html>
in my script, I have a select-field:
<select name="src[jumpMenu]" id="jumpMenu" onchange="ChangeImage(this.value,'preview');">
<option value="A">AStyle</option>
<option value="B">BStyle</option>
<option value="C">CStyle</option>
</select>
and I got this Javascript below:
<script language="Javascript" type="text/javascript">
<!--
function ChangeImage(newimage,imageid) {
if(document.getElementById(imageid).src != newimage)
document.getElementById(imageid).src = newimage;
}
// -->
</script>
and here is my problem:
I can't change the values because of the dependence for the other files (which I won't change).
Do you know any solution how to switch "A" to "img/src/A_top.png" for example and get it working with this script?
Thanks.
document.getElementById(imageid).src = "img/src/"+newimage+"_top.png";
Re-Edited:
I went over to W3schools and played around in there javascript editor window to see what was going on. Here is a shorter script.
<html>
<body>
<script type="text/javascript">
var eType = document.getElementById("Type")
</script>
<select class="field select addr" id="Type">
<option value="Type:L" selected="selected">Location</option>
<option value="Type:C">Corporate</option>
<option value="Type:R">Remittama</option>
<option value="Type:M">Mailing</option>
</select>
<script type="text/javascript">
document.write(eType);
</script>
</body>
</html>
I did what ThiefMaster suggested on how to get the element by not using the .text or .value but as you can see if you run this code I still get a null at this step of the process. From what I can see and many suggestions I am doing this correctly. I know I must be missing something. Can anyone see it?
You're trying to get the element before you've actually put it on the page. Fix the order, and don't use document.write.
<html>
<body>
<select class="field select addr" id="Type">
<option value="Type:L" selected="selected">Location</option>
<option value="Type:C">Corporate</option>
<option value="Type:R">Remittama</option>
<option value="Type:M">Mailing</option>
</select>
<script type="text/javascript">
var eType = document.getElementById("Type")
document.body.appendChild(document.createTextNode(eType));
</script>
</body>
</html>
Your second code block is almost correct; you need to use the select element itself instead of its (non-existent) value:
var elem = document.getElementById("Type");
var type = elem.options[elem.selectedIndex].value;
Demo: http://jsfiddle.net/ThiefMaster/nw3nN/
If you had jQuery available you could drastically reduce the amount of code necessary:
var type = $('#Type').val();
Could someone please tell me how to get this code working on a webpage? Particularly what should go in the header?
http://jsfiddle.net/mekwall/TJcP4/1/
Sorry if this is a basic question...steep learning curve!
Thanks
Your code is using the jQuery JavaScript library ... so your head will need to contain :
<script type="text/javascript" src="<jquery url>"></script>
Replace the <jquery url> with a valid url to the jQuery library. I suggest you use the Google CDN for the url or alternatively download a copy and store it on your server -> http://docs.jquery.com/Downloading_jQuery#Download_jQuery
Then to ensure your code runs once the DOM is ready wrap all of your JavaScript within the following :
$(document).ready(function() {
// your code here
});
Docs for ready() here
If your going to be using jQuery more I suggest you start reading here http://docs.jquery.com/How_jQuery_Works and if you going to learn JavaScript, you can't go wrong with reading this too -> https://developer.mozilla.org/en/JavaScript/Guide
Copy the code below, save it with a .html extension (e.g. test.html) and then double click to open.
<html>
<head>
<title>Page Title here</title>
</head>
<body>
<select id="t_dermal_name">
<option value="t_default_dermal">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<select id="t_wrinkle_name">
<option value="t_default_wrinkle">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<span id="output"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!--You can use a local version of jquery-->
<script type="text/javascript">
$(document).ready(function(){
function onSelectChange(){
var total = 0,
dermal = $("#t_dermal_name").find('option:selected'),
wrinkle = $("#t_wrinkle_name").find('option:selected');
if(value = dermal.attr('rel')){
total += parseInt(value);
}
if(value = wrinkle.attr('rel')){
total += parseInt(value);
}
$("#output").html(total);
}
$("#t_dermal_name").change(onSelectChange);
$("#t_wrinkle_name").change(onSelectChange);
});
</script>
</body>
I am trying to moving the items in a select box by using buttons.. for this i used swapNode().
But it is working only in IE. in chrome not working how to make it to work in chrome
Here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Moving the options up and down in Multiple select box </title>
<script type="text/javascript">
function move(id)
{
if (id=='up')
{
var len= document.f1.selectbox1.options.length;
if (document.f1.selectbox1[0].selected)
{
alert("This is the first record");
return false;
}
var up_id=document.f1.selectbox1.selectedIndex;
document.f1.selectbox1[up_id].swapNode(document.f1.selectbox1[up_id-1]);
}
if (id=='down')
{
var len=document.f1.selectbox1.options.length;
if (document.f1.selectbox1[len-1].selected)
{
alert("This is last record");
return false;
}
var down_id=document.f1.selectbox1.selectedIndex;
document.f1.selectbox1[down_id].swapNode(document.f1.selectbox1[down_id+1]);
}
if (id=='top')
{
var len=document.f1.selectbox1.options.length;
if (document.f1.selectbox1[0].selected)
{
alert("This is the first record");
return false;
}
var top_id=document.f1.selectbox1.selectedIndex
for (var j=top_id;j>0 ;j-- )
{
document.f1.selectbox1[j].swapNode(document.f1.selectbox1[j-1]);
}
}
if (id=='bottom')
{
var len=document.f1.selectbox1.options.length;;
if(document.f1.selectbox1[len-1].selected)
{
alert("This is last record");
return false;
}
var bot_id=document.f1.selectbox1.selectedIndex
for (var k=bot_id; k<len-1;k++)
{
document.f1.selectbox1[k].swapNode(document.f1.selectbox1[k+1]);
}
}
}
</script>
</head>
<body>
<form name="f1">
<select multiple size="20" style="width:30%" name="selectbox1" id="select_box">
<option id="1">First item</option>
<option id="2">Second item</option>
<option id="3">Third item</option>
<option id="4">Fourth item</option>
<option id="4">Fifth item</option>
<option id="4">Sixth item</option>
<option id="4">Seventh item</option>
<option id="4">Eighth item</option>
<option id="4">Ninth item</option>
<option id="4">Tenth item</option>
</select><br>
<input type="button" value="Up" onClick="move('up')">
<input type="button" value="Down" onClick="move('down')">
<input type="button" value="Top" onClick="move('top')">
<input type="button" value="Bottom" onClick="move('bottom')">
</form>
</body>
</html>
swapNode() is a Microsoft DOM extension and so as a result will not be recognized by browsers other than IE.
I ran your example in FireFox and used FireBug (You should download this plugin and use it in situations like this if you don't already) and sure enough the console was throwing an error that swapNode() was "not a function".
If I were to advise you from here, I would suggest going to lookup a jQuery plugin or something of that sort that achieves this kind functionality. Libraries like jQuery tend to offer cross browser solutions to these sorts of javascript problems and best of all are more often then not open source (so you can have a peek at the code and rework your own implementation if you would like).
http://jquery.com/
Alternatively, you could simply provide the swapNode() function in your code so that other browsers could pick it up. If you plan to go this route, you should be able to find an implementation with a quick Google search. I have provided a link to one such implementation below (I have not reviewed or used this code, use only after reviewing). In my humble opinion however, it is best to avoid solutions that have browser dependency as they are not always future proof and can often result in unforeseen issues.
http://sundberg.it/2006/05/12/swapnode_in_firefox
Good Luck!