Develop Reference

javascript load info function using a form to direct to another webpage

Below is my code for a dropdown form that when the user clicks on a selection it should redirect to another local in folder document.
vvv this function is in my script and I have 3 other functions in my script that work properly except this one.
function loadInfo(myForm) {
var menuSelect=myForm.Menu.SelectedIndex
var menuURL=myForm.Menu.options[menuSelect].value+".html"
window.location=menuURL
}
vvv This form is in my body and it shows the drop down but there is no redirecting to the local document when a selection is made.
<form id="menu">
<p style="font-weight:bolder">
If your pencil was a Super Hero who would they be?
<select name="Menu" onchange="loadInfo(this.form)">
<option>Select an item</option>
<option value="batman">Batman</option>
<option value="superman">Superman</option>
<option value="hulk">Hulk</option>
<option value="wonder">Wonder Woman</option>
</select>
</p></form>
I am doing a mock website for school that requires this form function and there is only one decent example in my book but even that will not output the desired task I want to accomplish(also this code was taken from that example in the book. I have tried to put in some of my code with no results)

try
.selectedIndex
instead of
.SelectedIndex

How to populate a select box with JSON from Grails Controller

I have to populate a select box with all avaliable Disciplines that are stored in my DB.
So, in DisciplineController I created an action like this:
def getDisciplinesJson() {
def discList = Discipline.getAll()
return discList as JSON
}
Is that the right way to get disciplines as JSON, and how do I call this action and, using Javascript for example, populate a select box, something like this:
<select id=disc-select> </select>
This select box appears in other page, Student create, for example.

There are a lot of ways. For example using JQuery
<script>
function loadDisciplines() {
$.ajax({
url: "${createLink(controller: 'DisciplineController', action: 'getDisciplinesJson')}",
success: function (data) {
//...
// Parse JSON, create select box etc..
}
});
}
</script>
And change "return discList as JSON" to "render discList as JSON"
Also you can create template with code:
<select id=disc-select>
<g:each in="${discList}" var="disc">
<option value="${disc?.id}">${disc?.name}</option>
</g:each>
</select>
And return from controller already rendered template:
render template:"pathToTemplate/thisTEmplate", model:[discList:discList]
Then in the loadDisciplines() success block you need to put only:
$('#disciplines-div').html(data);
where #disciplines-div is
<div id="disciplines-div"></div>

If you don't mind altering select to data lists then even easier is dataList HTML5 supports data lists and you can find an example here: and show here:
<input type=text list=browsers>
<datalist id=browsers>
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
If you wanted to see auto complete working with dataLists then check out boselecta. I have used it for auto completion and you can find that example here. There are some further complexity of parsing the json as data lists but it is all within that page..

I know your question is 'How to populate a select box with JSON from Grails Controller' but looking at your example. Why do you need to populate it with JSON?
In this case a <g:select> tag could be a simpler approach.
<g:select id="disc-select" from="${my.package.Discipline.list()}" name="myparam"/>
This is assuming that you´re using GSPs

can't get values form html select to php

i can't get values from the HTML select menu to js and from there to sql... the problem is in the JS code - it's probably caused by bad syntax... or misplace values.....
here is the varibles from the JS file
var select = $('select.select').val();
here is the varibles from the PHP file
$select = filter_var($_POST['select.value'],FILTER_SANITIZE_STRING);
here is the SELECT menu from the HTML file
<select name ="select" class="select">
<option disabled selected id="none"> -- select an option -- </option>
<option value="roy">roy</option>
here is the FULL code , the PHP code is in the Console area - because i didn't manage to upload the code correctly...
code
Thanks Ahead !

$_POST uses name="select", so:
$select = filter_var($_POST['select'],FILTER_SANITIZE_STRING);

using a variable from drop down list

I'm attempting to create a dynamic drop down list, but after searching for hours I'm still completely stumped as to how to do it. So I am experimenting with variables in a list. This is the code I've started with.
<body>
<form method = "post">
<select id = "State" onchange = "a = this.options[selectedIndex].value;">
<option value = ""> Select a state</option>
<option value = "S3"> Pennsylvania</option>
<option value = "S4"> California</option>
<option value = "I4"> Texas</option>
<option value = "I5"> New York</option>
</select>
</form>
</body>
my question is what can I do with the variable 'a' so that I could create a dynamic drop down list based off it? One thing I had hoped to do was use an if-statement to display a second list. I wanted to remain on the same page too.
Note: I apologize if this seems like a basic question, but I've been scouring websites for answers and all I've figured out was that I can't send javascript variables to php, otherwise I'd have gotten this done forever ago

try this way
<select id="appamt" name="appamt">
<? while($amt=mysql_fetch_array($amount)){ ?>
<option value="<?=$amt['amount']?>"><?=$amt['amount']?></option>
<? } ?></select>

When your page detects the onchange event, what you need to do is either have all the combinations of options you want readily available but hidden on the page e.g. $('#sub-option1).hide(); and when the value is selected use $('#sub-option1).show();
Secondly you can have a ajax request that returns a JSON value of key=>value pairs, then use these key value pairs to dynamically build another dropdown using jquery .each() function.
Loop through your json values and add them to a previously hidden selector and then display it.
Hope this helps but if not email me and I will skype you through it.
Jim C

how to get the return values from JavaScript function inside of Html?

I have a html form
Inside of this form in select option i have called one java script function like
<form>
<SELECT NAME="sel" onChange="split('1')">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
function split(str)
{
var str=str+str;
return str;
}
Now i need to get these return value on inside of the form for example in another select
<SELECT NAME="sel123" >
<OPTION VALUE="str">Milk</option>
</SELECT>
can anyone help me?

HTML can't do anything with variables. It isn't a programming language.
You aren't very specific about what you want to do, but it will probably involve writing JS to perform DOM manipulation.

You can have a place where you can display the value. For example.
function split(str)
{
var str=str+str;
$('classoridofelementhere').html(str);
}
EDIT
Here is an example on how to move option from one list to another: http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/
Remember to download and put a reference to jQuery library.