I have a requirement of displaying a dropdown list based on the arraylist being sent from the server on certain conditions on load of the page and on change of the event
For example
ArrayList1,ArrayList2
if(condition is true)
display the contents to dropdownlist from arraylist1
else
display the contents to dropdownlist from arraylist 2
Can any one tel how this arraylist can be saved on the page as hidden field so i can access the same in javascript.
??
If you already have the array you could do somthing like this:
<form>
<select id="my_seelecyt">
</select>
</form>
<script type="text/javascript">
var list1=['a','b','c'];
var list2=['e','f','g'];
var list;
var select_box = document.getElementById('my_seelecyt');
if(condition is true){
list=list1;
}else{
list=list2;
}
for(var i=0; i<list.length; i++){
var op = document.createElement('option');
op.value=list[i];
op.innerHTML = list[i];
select_box.appendChild(op);
}
</script>
you have to options:
Using ajax to create a request to the server and store the response in a variable I. e. the js-framework jquery allows you to make a post request and get it back)
Using a server side technology like php, jsp, asp to put the response into a javascript variable
If you meant that you pre-generate the drop-down lists and then toggle that in JS based on some criteria, then this is how it could be done:
First generate HTML:
<div id="arraylist1" style="display:none">
<select>
<option>Option1</option>
<option>Option2</option>
</select>
</div>
<div id="arraylist2" style="display:none">
<select>
<option>Option1</option>
<option>Option2</option>
</select>
</div>
<!-- This is the placeholder for the dropdown -->
<div id="list"></div>
And then use this in JavaScript:
var arrayList = condition ? $('div#arrayList1') : $('div#arrayList2');
$('#list').append(arrayList);
arrayList.show();
Related
I'm trying to pass a value of a option in a select from my HTML form to a PHP variable through Javascript
<script type="text/javascript">
function changeDir(ID){
var dir = document.getElementById(ID).value;
//For debuging purposes i've used an alert to show the value of dir on screen
//alert (dir);
//At this point of the function I want to assign the value of "dir" to the variable $folder
}
</script>
there's my .php with html
<SELECT name="course" ID="course" onchange='changeDir("course")' >
<OPTION value="artes>'">artes</OPTION>
<OPTION value="ingles">inglés</OPTION>
</SELECT>
<?php $folder= ...?>
I'm using this with a php upload lib, all working at the same file.
If anyone can explain me how to assign the value of the option to a php var will be great.
Thanks and Regards.
You can choose 2 different ways. First is AJAX, second is to redirect the page and GET the value of the <select> element.
HTML:
<SELECT name="course" ID="course" onchange='changeDir("course")' >
<OPTION value="artes>'">artes</OPTION>
<OPTION value="ingles">inglés</OPTION>
</SELECT>
JAVA:
<script type="text/javascript">
function changeDir(ID){
var dir = $("course").val();
$.post("php_file.php",
{
posted_dir: dir
},
function(data){
$("id_of_result_elemnt").html(data);
});
}
</script
PHP:
<?php
$folder=$_POST['posted_dir'];
echo "This text will be display in the element with id_of_result_elemnt ID";
?>
Other method is redirect
HTML+PHP:
<SELECT name="course" ID="course" onchange='changeDir("course")' >
<OPTION value="artes>'">artes</OPTION>
<OPTION value="ingles">inglés</OPTION>
</SELECT>
<?php if (iset($_GET['folder']))
{$_GET['folder']=$folder;}...?>
JAVA:
<script type="text/javascript">
function changeDir(ID){
var dir = document.getElementById(ID).value;
window.location = "http://example.com/myphp?folder=" + dir;
}
</script>
The fact is that you can't. They both live in different parts of your page. While you can write them in the same file, all PHP code is processed in the server side and Javascript is not able to see anything from the client side.
What you could do is whether pass it as a AJAX request in order to get back some information to show to the user or make the <select> refresh the page when user changes the option by submitting the form, so you don't lose the "state" of your form, and then verify in your php block if there's any option selected.
I'm trying to store the value of the drop-down 'product' in a javaScript variable and then trying to use that variable in Python code in html view of Web2py framework to further create the drop down for the other component.
I tried two different ways, but both of them did not work.
I want to do a query on database using a keyword which is selected from the Product drop-down and hence generating the second drop down.
<script>
function run()
{
var e = document.getElementById('local_product');
var strUser = e.options[e.selectedIndex].text;
document.getElementById('div_release').innerHTML =' <label>Release : </label> {{rows1 = db(db.Builds.Build.like(\"}}strUser%{{\"")).select()}} <select> {{for r1 in rows1:}}<option>{{=r1.Build}}</option> {{pass}}</select>'
or
document.getElementById('div_release').innerHTML =' <label>Release: </label> {{rows2=db.executesql("Select Build from Builds where Build like\"request.vars.prod_tab\"" )}} <select> {{for r1 in rows2:}}<option>{{=r1}}</option> {{pass}}</select>'
}
</script>
<form method="POST" action="" name="product_filter">
<label>Product: </label>
<select id="local_product" onchange="run()" name=prod_tab >
{{ for r in product_list: }}
<option value="{{r}}">
{{=r}}
</option>
{{pass}}
</select>
{{pass}}
<input type="Submit" name=Set Value="Set">
<form>
Python code in web2py views is executed on the server before the page is sent to the browser, so it is not possible to execute any Python code within the browser in response to user actions. Instead, you must send an Ajax request to the server to retrieve additional data to inject in the page. For ideas on how to achieve what you want, see this answer.
I am passing a model IEnumerable to a view. Appending the model to a dropdownlist
#Html.DropDownList("ddlOffers", new SelectList(Model,"Id","Title"))
<p id="result"></p>
I have javascript on change I am getting value selected
<script>
$(function () {
$("#ddlOffers").change(function () {
alert(this.value);
});
});
</script>
It is retrieving the correct value Id. On selecting from the list I want grab the record details from a Model (such as Title,CreatedBy...etc) based on the selection.
How do I select the right data from the Model using value Id selected in the javascript? and should I then append the data to the p tag? Am I on the right track? Or is there a simpler solution?
Thanks for reading.
What #Html.DropDownList do is generate html like this:
<select id="ddlOffers" name="ddlOffers">
<option value="somevalue">sometext</option>
... for all your options
</select>
And if you just need the value selected, there's a shortcut in jquery:
<script>
$(function () {
$("#ddlOffers").change(function () {
alert($(this).val());
});
});
</script>
Or if you need anything other than the value, you can get the selected <option> itself by
<script>
$(function () {
$("#ddlOffers").change(function () {
console.log($(this).find("option:selected"));
console.log($("#ddlOffers option:selected")); //both of them do the same thing
});
});
</script>
suppose your model is
public class Model {
public int Id,
public string Title,
public int CreatedBy
/*Other Properties*/
}
when you put it through this statement
#Html.DropDownList("ddlOffers", new SelectList(Model,"Id","Title"))
All you get on the html side and you can check the source of the HTML file is
<select>
<option value="1">Title 1</option>
<option value="2">Title 2</option>
<option value="3">Title 3</option>
<option value="4">Title 4</option>
<option value="5">Title 5</option>
</select>
So you see the problem in getting other properties is that they dont exist in the HTML page and hence cannot be directly retrieved by the javascript.
What you can do instead is put all the data you need in the html attributes in the html option element by creating it manually.
#foreach(var m in Model)
{
#m.Title
}
now when you will handle the change even the data will be available inside the HTML and hence you will be able to access it. With something like this
<script>
$(function () {
$("#ddlOffers").change(function () {
var createdBy = $(this).data('createdBy');
alert(createdBy);
});
});
</script>
Alternatively what you can do is and this approach will only help you if you want to later convert this into a big application.
after selecting the value in the javascript you send a ajax request to another action on your server with will return you all the fields you need back.
Update:-
3. You can also inject the model serializing it to JSON in the view and then whenever required accessing the info using js. For this i generally use Newtonsoft Json (install-package newtonsoft.json) then inside the view do something like this
<script>
var model = #JsonConvert.SerializeObject(Model);
</script>
The way I have approached this before is to use a form like this:
#using (Ajax.BeginForm("ActionName", "ControllerName",new AjaxOptions{HttpMethod = "POST"}))
{
#Html.DropDownList("ddlOffers", new SelectList(Model,"Id","Title"))
<button type="submit">Submit</button>
}
Have the form submit to a controller and dropdown's value set to your ID field and then when it posts back into the controller, get the full object based on ID
I have this form set up as a basic drop down menu that goes to whichever link / option is selected immediately, but I was wondering if it was possible / how to append all of the options in JavaScript in a separate file? I am just starting to learn JavaScript, so any explanation would be exceptionally helpful too. Thank you for your time!
<form name="nav">
<select name="navigation" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" style="width:100%;">
<option selected="selected">go to...</option>
<option value="index.html">PROJECTS</option>
<option value="about.html">ABOUT</option>
</select>
</form>
Here's a demo to start with
The HTML
<form id="my-form">
<select name="navigation">
<option>Go to...</option>
</select>
</form>
Now we just encode the navigation options in a JSON object and dynamically load them into the select element
var navigation = [
{"title": "PROJECTS", url: "index.html"},
{"title": "ABOUT", url: "about.html"}
];
var select = document.getElementById("my-form").navigation;
for (var i=0, option; i<navigation.length; i++) {
option = document.createElement("option");
option.value = navigation[i].url;
option.innerText = navigation[i].title;
select.appendChild(option);
}
select.addEventListener("change", function(event) {
window.location.href = select.value;
});
This is vanilla JavaScript, but you could use jQuery if you like that better.
I dont how much You know JS or which framework (server, client) You are using. But regardless of that You could for example try to built navigation here using content sent from the server.
For instance You generate the request in the client side, that You want to load navigation dynamically into this select and on a success ajax You populate the dropdown.
Write more about the frameworks You are using. Is the JS pure JS or perhaps jQuery.
BTW. The code You've posted isn't exactly HTML5-way of building the dropdown.
Go to HTML5 Form elements and take a look on the very first example with
<input list="browsers">
You can do this:
var str = '<option selected="selected">go to...</option>'+
'<option value="index.html">PROJECTS</option>'+
'<option value="about.html">ABOUT</option>';
$('#formId').html("");
$('#formId').append(str);
Hope this helps.
I want to check which value I selected in a scriplet, when I press some value in the drop down list. How can I do that?
I tried as follows : ( below two codes are in the same page "test.jsp" )
code : for list
<select id="stream" name="current_session" onclick="fun2()" >
<option value="Winter">Winter</option>
<option value="Monsoon">Monsoon</option>
</select>
code : scriplet inside a javascript ( note that both html, scriplet are in the same page )
<script>
function fun2(){
<%
String given_session=request.getParameter("stream");
system.out.println(given_session);
%>
}
note : I am getting output as null, instead of selected session value. So how can get the selected values in scriplet which is in the same jsp page?
you can use a js to select the value
function get_the_value(){
var e = document.getElementById('stream').value;
return e;
}
In your web browser you have only html, javascript and css. All JSP code is meant to be run on the server. So you get only the output of the jsp file. And after this you cannot change the jsp code.