How to show a HTML table without using getelementbyid and same? - javascript

I'm having this problem.
I have a HTML code which will show a table. The problem is I cannot use any id, name or whatever can be identify by getElementByID and same. I also have a dropdownlist have 2 value "Yes" and "No". I want to write a JavaScript or jsp tag which will show the table when I choose the value "Yes", and make it disappear completely when I choose "No".
Note: I cannot write a script make the page to reload
So how should I write the code? I'm thinking about using javescript like
<script>
function onchangedropdownlist
if(dropdownlistvalue = 1)
{
</script>
Code html table
<script>
}
</script>
or maybe I can use c:if. But i'm not sure how to use c:if with onchange.

You can use document.getElementsByTagName("table")[0] to get the reference of your table and then use .style.display to block(show) or none(hide) your table.
Demo Code:
function onchangedropdownlist(dropdownlistvalue) {
//if value is yes
if (dropdownlistvalue == "yes") {
//show table
document.getElementsByTagName("table")[0].style.display = "block"
} else {
//hide table
document.getElementsByTagName("table")[0].style.display = "none"
}
}
<table>
<tr>
<td>
soemthing
</td>
</tr>
</table>
<select onchange="onchangedropdownlist(this.value)">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>

Related

Can the value obtained by dijit.byId('').value be compared to a String?

I am relatively new to Spring MVC and Dojo/Dijit widgets and I am stuck with a problem. I need to unblock a particular div based on the option selected from the dropdown i.e. when the user selects the reason as "Unexperienced" I am supposed to unblock a div with id = "unexpUser" style="display:none;" to collect some additional information.
JSP -
<select data-dojo-type="dijit.form.Select" name="userReason" id = "reason">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</select>
JC -
<script>
if(dijit.byId('reason').value == "opt1"){
unexpUser.style.display = 'block';
}
</script>
When the page loads, the option displayed on the dropdown is "Experienced". When I change the option to "Not experienced" , I need to unblock the div but this particular code doesn't seem to be the right code for comparing. Please help.
.value is not the right way to get value from a dijit widget instead use:
dijit.byId('reason').get("value")
Use onchange listener :
dijit.byId('reason').on("change",function(evt){
alert(evt); //(evt == value of option )
// your code here
});
okay I got my mistake. This is the solution. #Harpreet Singh your solution works perfectly with this code.
JSP-
<form:select data-dojo-type="dijit.form.Select" path "" name="userReason" id = "reason" onchange="myFunction1();">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</form:select>
and in my JS I created a function for the String comparison.
JS -
<script>
function myFunction1(){
if(dijit.byId('reason').get("value") == "opt1"){
unexpUser.style.display = 'block';
}
</script>
this works. Thank you so much for your help!

Calling Javascript from jsp onchange of a dropdown value

I have a list of group and in each group I have a list of members. In jsp each group is shown in a row of table and each row contains a dropdown of members. Please see the image below -
What I am trying to do is - if I select a member from the dropdown then it's onchange trigger a javascript function and the user Id is shown in an alert.(for test purpose I'm now using alert, later I use the userId/member ID for other task).
In the first dropdown there are some members - razib, syeful, proshanto. If I select a member from the first dropdwon then the member id is shown properly in the alert. But if I select any member from the other dropdwon (displaying the member name bulbul and rony) then the javascript function is not triggered. Can any one help me what are the problems with the code -
The jsp snippet -
<select id="userSelect" name="user">
<c:forEach items="${group.users}" var="user" varStatus="status">
<option id="aUser" value="${user.id}"> <c:out value="${user.name}"/> </option>
</c:forEach>
</select>
And the javascript snippet is -
$(document).ready(function() {
$('#userSelect').change(function(event) {
var userId = $("select#userSelect").val();
alert("User ID :"+userId);
});//change()
}); //document.ready()
Thanks in advance
UPDATE: The answer given by San Krish and Carsten Løvbo Andersen works for a single single id of <select>. But I have multiple <select> with the id "userSeelct" because this is in a forEach loop. If I use class instead of ID then it is also not working.Please see How the <select> actually in my code-
<c:forEach id="groupId" var="group" items="${groupListForm.groups}" varStatus="status">
<select id="userSelect" name="user">
<c:forEach items="${group.users}" var="user" varStatus="status">
<option id="aUser" value="${user.id}"> <c:out value="${user.name}"/</option>
</c:forEach>
</select>
</c:forEach>
The earlier given answer is OK for a single <select>. But I think the problem is the <select> is also in a for each loop and there are multiple <select> with the same id/class. In this case how can I solve the problem? Thanks again.
You can simply do it as,
$(document).ready(function() {
$('#userSelect').on('change', function() {
alert( this.value ); // or $(this).val()
});
});
You can do something like this.
$("#userSelect").on("change", function() {
alert( this.value );
});
This should solve your problem!

Compare select dropdown value with another input and display matched one

HTML code:
<div class="controls" id="display">
<input type="text" name="demos" class="" value="1" id="displays"/>
<select class="input-medium">
<option value="">Select</option>
<option value="1">II</option>
<option value="2">AS</option>
<option value="3">AR</option>
</select>
</div>
Jquery code:
$("input[name='demos']").each(function(i,e){
var SValue = $('#displays').val();
$('option[value=' + SValue + ']').attr('selected',true);
});
I will be displaying the above html code as dynamic one for multiple times.
I will be comparing the value of #displays with the select options and make the select option as selected.
The value in #displays comes from database.
Since, am using multiple times the above html code when I pass the different values from database to that multiple code. All the multiple code shows only the first html code selected value.
However, I want all the multiple html code to show the selected value to their respective #displays.
In debug I found that $("input[name='demos']").each(function(i,e){ is not performing correctly because when i put console for Svalue it shows only the first html code input value for all the multiple html codes.
How can I fix this??
In HTML, the ID attribute is unique. You cannot use the same ID for more than one control in the same page. So, you'll need to use another approach.
I would do something like:
$("div.controls").each(function() {
$(this).children("select").eq(0).val($(this).children("input").eq(0).val());
});
EDIT: And it works, I've just made this demo!
Try this:
$("#displays").blur(function () {
var data = $(this).val();
$("#select > option").each(function () {
if (this.value == data)
$(this).attr("selected", "selected");
});
});
This example will get the input from user then the system will select the matching value.
Here is the fiddle: http://jsfiddle.net/t6kBY/
try
$("input#displays").each(function(i,e){
});

How to load a text file using JavaScript with a HTML combobox (<select>)?

First of all, thanks for reading the topic.
Now, I'm making a website using HTML5 and I need to load a text file according to the user choice in a combobox. I mean, the user selects an option from the combobox and the text from it should shown on a specific cell of a table. The number of times that the user wants without refreshing the site.
The problem is that the code is not working. The code:
The HTML for the combo box:
<select id = "comboSelect">
<option value="text1.txt">text1</option>
<option value="text2.txt">text2</option>
<option value="text3.txt">text3</option>
<option value="text4.txt">text4</option>
<option value="text5.txt">text5</option>
</select>
The HTML for the table cell:
<td colspan="5" class="text" id = "cuadroTexto"></td>
The JavaScript that does the rest of the work:
$(document).ready(function(){
document.getElementById("comboSelect").addEventListener('change',function () {
$(document.getElementById("cuadroTexto")).load(value);
alert("Cargado");
},false);
});
Edit 1:
I think that the JavaScript is not recognizing the change event from the combobox.
I'm yet not working with a server.
Check this is working
CODE
$(document).ready(function(){
$("#comboSelect").change(function () {
$("#cuadroTexto").load(this.value);
alert($(this).val())
});
});
Fiddle http://jsfiddle.net/krunalp1993/Qr6GK/

Hide/Display tables after selecting different options

I have 2 tables "iu" and "si" and I put a dropdown list for users to select which one they want to see. Once the option is selected, the corresponding table will appear.
Another one is supposed to be hidden but when the page is loaded, default table "si" is shown.
Here is my JavaScript code:
<script>
$(document).ready(function()
{
$('#iu_table').hide();
});
$('#iu').onchange=function()
{
$('#si_table').hide();
$('#iu_table').toggle();
}
</script>
And HTML code:
<select>
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
The table ID is "si_table" and "ui_table" respectively.
I used the code above but it doesn't work. No matter which one I select, only the "si" table is shown.
I hope that someone could help.
You should probably work with the Tutorials of jQuery and familarize yourself with the workings of the libraries.
There are multiple errors in your code:
There is no field onchange. What you want is the change function of jQuery, which is described here: http://api.jquery.com/change/
The code for the change function belongs into the $(document).ready function, so jquery executes it, when the document is loaded. The code has to be executed there, so that the function is called when the select is changed.
You want to work with the change of the select not with the change of the option.
In the body of your change function you hide the one table and toggle other: toggle both, so the first can be shown too, when the option is selected. Also this construct only works for exactly 2 options. If you want more options, you have to work something out like in the answer of Paritosh.
Here is a working sample:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function()
{
$('#iu_table').hide();
$('#selector').change(function()
{
$('#si_table').toggle();
$('#iu_table').toggle();
});
});
</script>
</head>
<body>
<div id="si_table">si</div>
<div id="iu_table">iu</div>
<select id="selector">
<option id="si" selected="selected">SI</option>
<option id="iu">IU</option>
</select>
</body>
There are many ways of achieving this. One is below - I have added id attribute to dropdown control
<select id="myselection">
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
<script>
$('#myselection').bind('change', function(){
if($('#myselection option:selected').attr('id') == "si"){
$('#si_table').show();
$('#iu_table').hide();
}
else if($('#myselection option:selected').attr('id') == "iu"){
$('#si_table').hide();
$('#iu_table').show();
}
});
</script>
There is a method in jQuery which does hide/show matched elements called toggle()
As you need to hide the IU table at first, you may need some css trick for that. So put display:none; for the IU table and do toggle on changing the dropdown values. Working fiddle is here

Categories

Resources