Hi i am using jquery. like,
<script type="text/javascript">
$(function() {
$('#usertype').change(function() {
$.post("<%=request.getContextPath()%>/CommonServlet", {utype:$('#usertype').val(),funName:'getConfigMast'}, function(j){
$("input#it").html(j);alert(j);
});
});
});
</script>
in this j contians some model object i have to iterate his object in my same jsp page and those values i have to show in text fields in <table>. here the jquery function will called when i selected the the value from combobox of same <table>
and jsp table:
<table >
<tr>
<td><input name="filetype" type="text" class="formTxtBox_1" id="filetype"/></td>
</tr>
<tr>
<td>
<select name="usertype" id="usertype" >
<option >- Select Type of User -</option>
<option value="admin"> administrator </option>
<option selected="true" > normal</option>
<option> member</option>
</select> </td>
</tr>
<tr>
<td><input name="singlefile" type="text" id="singlefile"/></td>
</tr>
<tr>
<td><input name="totalfile" type="text" id="totalfile"/></td>
</tr>
<table>
The value of an input field needs to be set using val() function, not html().
$('#singlefile').val(value);
Related
I have a html table which has input text fields and dropdown list's as columns.
I have two dropdown list columns which displays the same list of options.
I'm trying to remove the option selected in one dropdown and doesn't show
in the other dropdown present in the same row which is working when i select a option from Select Product1 dropdown list.
Issues I'm facing is when user first select the option from Select Product2 column dropdown list, it is not removing the option from Select Product1 column list for that row.
Another issue is, if user selected one option in the dropdown list that option is removed in the other drop down list, if user changes the selected option from first dropdown list the removed element should be shown/available in the other dropdown list but it is not showing the first selected option as it has been already removed from the list.
Any inputs on this two issues would be helpful, i tried to find the solution but no luck.
Sample Demo link
Code:
//populate dropdown with the valu`enter code here`e
function populateSelect() {
var ids = [{"pid":"laptop","des":"laptop"},{"pid":"Mobile","des":"Mobile"},{"pid":"IPAD mini.","des":"IPAD mini."},
{"pid":"toys","des":"toys"},{"pid":"electronics","des":"electronics"},{"pid":"desktop","des":"desktop"},{"pid":"ipad Air","des":"ipad Air"}]
var productDropdown1 = $(".product1");
var productDropdown2 = $(".product2");
$.each(ids, function(index,value) {
$("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
$("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
});
$('select').change(function() {
var $sel = $(this),
val = $sel.val();
$sel.parent().siblings().find('.product2 option[value=' + val + ']').remove()
});
}
$(document).ready(function(){
populateSelect();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="orderTable" border="1">
<tr>
<th>Or.ID</th>
<th>Select Product1</th>
<th>Description</th>
<th>Select Product2</th>
<th>Comments</th>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum1"></td>
<td>
<select class="product1" id="prod1">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" id="product2">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum2"></td>
<td>
<select class="product1" id="prod2">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum3"></td>
<td>
<select class="product1" id="prod3">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum4"></td>
<td>
<select class="product1" id="prod4">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
</table>
Every option in dropdown must have unique ID. When you select option "house" from dropdown menu "menu1", then remove/hide same option(option with same ID) from "menu2".
Another way to do it is that every option has onClick that will call some function.
Example:
<option value="" onclick="hideOption("menu2-option1")" id="menu1-option1">Option 1</option>
<!-- JS CODE -->
function hideOption(hideOptionID)
{
document.getElementById(hideOptionID).style.display = "none";
}
It is better to disable an option than remove it from the ui.
try to change
$('select').change(function() {
var $sel = $(this),
val = $sel.val();
$sel.parent().siblings().find('.product2 option[value=' + val + ']').remove()
});
To
$('select').change(function() {
var $sel = $(this),
val = $sel.val();
//$('select').not($sel).find('option').removeAttr('disabled');
$sel.parent().siblings().not($sel).find('option').removeAttr('disabled');
$sel.parent().siblings().find('select option[value=' + val + ']').attr('disabled',true);
});
DEMO HERE
hope this helps.
I have a HTML code that can select different options. Depending on the selection the rows or the data in the table changes. Here is my html code :
Select here <select name='set' id="set" class="selectpicker" onchange='displayFields(this.value);'>
<option disabled selected>-- select an option --</option>
<option>Selection 1</option>
<option>Selection 2</option>
<option>Selection 3</option>
<option>Selection 4</option>
</select>
<table class="root-table" id="table-root">
<br/>
<tr>
<td><p>foo Name:</p></td>
<td><p>fooo Name:</p></td>
<td><input type="text" id="foo" name="foo" value=""/></td>
</tr>
<tr>
<td><p>bar:</p></td>
<td><p>bar2:</p></td>
<td><p>bar3:</p></td>
<td><input type="text" id="bar" name="bar" /></td>
</tr>
<tr>
<td><p>foo1:</p></td>
<td><input type="text" id="foo1" name="foo1" value=""/></td>
</tr>
<tr>
<td id="user"><p>UserName :</p></td>
<td><input type="text" id="uid" name="uid" style='display:none;'/></td>
</tr>
<tr>
<td id="pass"><p>Password :</p></td>
<td><input type="password" id="pwd" name="pwd" /></td>
</tr>
</table>
Here the table data changes when different option is selected. Please see the required output :
When Selection 1 is selected
row 1 : foo name : and text field
row 2 : bar : and text field
row 3 : foo1: and text field
row 4 : not displayed
row 5 : Password : and password field
When Selection 2 is selected
row 1 : fooo Name : and text field
row 2 : bar2 : and text field
row 3 : not displayed
row 4 : username and text field
row 5 : Password : and password field
When Selection 3 is selected
row 1 : foo name : and text field
row 2 : bar3 : and text field
row 3 : foo1: and text field
row 4 : username and text field
row 5 : Password : and password field
When Selection 4 is selected
row 1 : foo name : and text field
row 2 : not displayed
row 3 : not displayed
row 4 : username and text field
row 5 : Password : and password field
and in my javascript code :
<script type="text/javascript">
function displayFields(setType){
setValue = setType;
...
...
...
</script>
The rows which are not display should not be displayed in the page even if the css for that table is been used.
I tried to use display=block and document.getElementById("").style.visibility = 'visible' or 'none'; but this has too many holes and i find it unreliable.
Can you help me find a solution for this problem.
NOTE : it doesn't matter the solution is javascript or JQuery anything that works without any issues.
Here's a solution using jQuery. It's fairly flexible, based on using CSS classes to group elements, so if you add more options or more rules, you just need to put the appropriate classes on the elements affected - without changing the javascript code. The system is very simple: on the affected elements, there's a class of the form "display-x" where "x" is the value of the option in the select. If an option is selected, then all elements within the table with that class will be set visible, all others will be hidden.
(Note some elements, e.g. <tr>s have got classes, because they contain elements that need to be shown, and that tr might have been hidden by an earlier selection).
Select here <select name='set' id="set" class="selectpicker">
<option value="" selected>-- select an option --</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
<option value="4">Selection 4</option>
</select>
<br/>
<table class="root-table" id="table-root">
<tbody>
<tr class="display-1 display-2 display-3 display-4">
<td class="display-1 display-3 display-4"><p>foo Name:</p></td>
<td class="display-2"><p>fooo Name:</p></td>
<td class="display-1 display-2 display-3 display-4" ><input type="text" id="foo" name="foo" value=""/></td>
</tr>
<tr class="display-1 display-2 display-3">
<td class="display-1"><p>bar:</p></td>
<td class="display-2"><p>bar2:</p></td>
<td class="display-3"><p>bar3:</p></td>
<td class="display-1 display-2 display-3"><input type="text" id="bar" name="bar" /></td>
</tr>
<tr class="display-1 display-3">
<td class="display-1 display-3"><p>foo1:</p></td>
<td class="display-1 display-3"><input type="text" id="foo1" name="foo1" value=""/></td>
</tr>
<tr class="display display-2 display-3 display-4">
<td id="user" class="display display-2 display-3 display-4"><p>UserName :</p></td>
<td class="display display-2 display-3 display-4"><input type="text" id="uid" name="uid"/></td>
</tr>
<tr class="display-1 display-2 display-3 display-4">
<td id="pass" class="display-1 display-2 display-3 display-4"><p>Password :</p></td>
<td class="display-1 display-2 display-3 display-4"><input type="password" id="pwd" name="pwd"/></td>
</tr>
</tbody>
</table>
<script language="javascript">
$(function() {
$("#table-root tbody").find("tr, td").hide(); //hide all row and cell elements to begin with
$("#set").change(function() {
$("#table-root tbody").find("tr, td").hide(); //hide all row and cell elements
$("#table-root .display-" + $(this).val()).show(); //show only those elements which match the current selection
});
});
</script>
Exactly what the comment on your question says. I'll just give you a small example with an option for displaying one row.
Select here
<select name='set' id="set" class="selectpicker" onchange='displayFields(this.value);'>
<option disabled selected>-- select an option --</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
<option value="4">Selection 4</option>
</select>
.
.
.
<tr id="row1">
<td><p>foo Name:</p></td>
<td><p>fooo Name:</p></td>
<td><input type="text" id="foo" name="foo" value=""/></td>
</tr>
.
.
.
<script>
$(document).ready(function(){
$('#row1').hide();
$('#set').change(function(){
if(("#set").val()==1){
$('#row1').show();
}
}
}
Do the same for the rest. Should work.
I'm a beginner with jQuery language and I've got a question.
I've got a Table in my website like this:
<table id="filter-table" class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Typology</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>IYCE8</td>
<td>NAME</td>
<td>
<input class='typology' type='hidden' value='1'>TYPE1
<input class='typology' type='hidden' value='2'>TYPE2
<input class='typology' type='hidden' value='3'>TYPE3
</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>IYCE9</td>
<td>NAME2</td>
<td>
<input class='typology' type='hidden' value='1'>TYPE1
<input class='typology' type='hidden' value='2'>TYPE2
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
as you can see rows have an hidden input associated to a typology (type1=>1).
with a dropdown selector i choose a value:
<select id="filter" name="filter">
<option value="">SELECT ONE</option>
<option value="1">TYPE1</option>
<option value="2">TYPE2</option>
<option value="3">TYPE3</option>
</select>
With the event OnChange in a filter i want to select all the rows in the table that have the input field value = to the one selected in the dropdown
How i can do this with Jquery?
Thanks in advance for all the help
You could combine an attribute selector and the :has() selector:
Example Here
$('#filter').on('change', function () {
var $tr = $('#filter-table tr:has(.typology[value="' + this.value + '"])');
});
In the snippet above, $tr is a jQuery object that contains all the desendant tr elements that contain an element with a class of .typology and a value attribute corresponding to the selected value.
You can first get the value needed and then use it for whatever you need to find:
$('#filter').on('change', function () {
var selected_val = this.value;
var els_needed = $('#filter-table').children().find('input.typology[value="'+selected_val+'"]');
});
I am trying to:
1. Hide and display fields based on SELECT a field
2. Populate a field based on check boxes
However neither is working. Both were based on working solutions from others. The only difference I can think of is that I am using TABLE to format them. But I don't know if that makes a difference.
The HTML code:
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td><select id="business" name="business" >
<option value="1">Sell</option>
<option value="2">Buy</option>
<option value="3">Both</option>
<option value="4">Trade</option>
<option value="5">Freight</option>
<option value="6">Customs</option>
</select>
</td>
</tr>
<div id="freight">
<tr>
<td><b>Service Type:</b></td>
<td><select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b></td>
<td><input type="text" name="tollfree" />
</td>
</tr>
</div>
<tr>
<td valign="top"><b>Your Email Address:</b></td>
<td><input type="text" name="email" /></td>
</tr>
<div id="customs">
<tr>
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder<br />
</td>
</tr>
</div>
<tr>
<td><b>Products/Services:</b></td>
<td><input type="text" name="products" /></td>
</tr>
<div id="brand">
<tr>
<td><b>Brand Names:</b></td>
<td><input type="text" name="brands" /></td>
</tr>
</div>
</table>
</form>
The jQuery code for doing these:
$(':checkbox').click(function() {
$('input[name=products]').val(
$(':checkbox:checked').map(function() {
return $(this).val();
}).get().join(',')
);
});
$(document).ready(function () {
toggleFields();
$("#business").change(function () {
toggleFields();
});
});
function toggleFields() {
if ($("#business").val() == 1 || ($("#business").val() == 2 || ($("#business").val() == 3)
$("#brand").show();
$("#freight").hide();
$("#customs").hide();
else
if ($("#business").val() == 5)
$("#brand").hide();
$("#freight").show();
$("#customs").show();
else
if ($("#business").val() == 6)
$("#brand").hide();
$("#freight").hide();
$("#customs").show();
else
$("#brand").hide();
$("#freight").hide();
$("#customs").hide();
}
For example when you select "Sell", "Buy" or "Both" (in Business), the SERVICE TYPE and TOLLFREE NUMBER fields are supposed to be hidden, as well as SERVICES field. They are wrapped in DIV id "freight" and "customs" and supposed to be invisible. But they are not. All fields are shown regardless.
Second problem is if you select Customs (in Business) the Services field which is composed of checkboxes is supposed to be shown and when click on the check boxes, the value in these checkboxes is supposed to populate the Products/Services field. It is not doing that either.
Here is the jsfiddle for this code:
http://jsfiddle.net/5SArB/571/
which is based on the working version of both
jsfiddle.net/5SArB/ (toggle fields based on form values)
and
jsfiddle.net/dTrVt/ (populate input field based on checkbox id values)
I am pulling my hair on this and just can't understand why it is not working. Any help is appreciated. Thank you in advance.
There are several issues with the code, the first of which is that the javascript is poorly formed.
You can't write if statements without curly braces if they take more than one line
The first if statement in toggleFields is missing some parentheses
Once you get that fixed, the other problem concerns the formation of your html table. Don't wrap the table rows with divs, since that's improper html table structure. Instead, you might take out the divs, and assign the "id"s to the table rows instead. Essentially what you would be doing then is showing/hiding table rows rather than showing/hiding divs containing the table rows.
The resulting HTML would be then:
<tr id="freight">
...
</tr>
Rather than:
<div id="freight">
<tr>
...
</tr>
</div>
Here's a fiddle with the proposed changes.
Hope that helps!
Edit: In case somebody comes across this in the future, the problem was a simple issue with load order -- the document wasn't ready when the click event was bound. The solution is as simple as moving the click event inside the document.ready callback.
As already mentioned, you have syntax errors and you can't have div as a child of table.
In the if...else if statements you are missing the block definitions...
Also assign the ids to the tr instead of nesting it in a div.
Also the code can be simplified as
$(':checkbox').click(function () {
$('input[name=products]').val($(':checkbox:checked').map(function () {
return $(this).val();
}).get().join(','));
});
jQuery(function ($) {
$("#business").change(toggleFields).change();
});
function toggleFields() {
var el = $('#business option:selected').data('el'),
els = el ? '#'+el.split(/,\s*/).join(', #'):'';
var $els =els? $(els).show():$();
$('.bussiness-field').not($els).hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td>
<select id="business" name="business">
<option value="1" data-el="brand">Sell</option>
<option value="2" data-el="brand">Buy</option>
<option value="3" data-el="brand">Both</option>
<option value="4">Trade</option>
<option value="5" data-el="freight, customs">Freight</option>
<option value="6" data-el="customs">Customs</option>
</select>
</td>
</tr>
<tr id="freight" class="bussiness-field">
<td><b>Service Type:</b>
</td>
<td>
<select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b>
</td>
<td>
<input type="text" name="tollfree" />
</td>
</tr>
<tr>
<td valign="top"><b>Your Email Address:</b>
</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr id="customs" class="bussiness-field">
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent
<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder
<br />
</td>
</tr>
<tr>
<td><b>Products/Services:</b>
</td>
<td>
<input type="text" name="products" size="40" />
</td>
</tr>
<tr id="brand" class="bussiness-field">
<td><b>Brand Names:</b>
</td>
<td>
<input type="text" name="brands" />
</td>
</tr>
</table>
</form>
I was working to grab the drop down selected value dynamically using dynamic identifiers. I have done it in static way. Can anybody suggest how can I make 'id' dynamic for each 'button' and 'select' tags and On click of each GO button the value should be displaying from the same row's select drop down. Thanks in advance.
=================
$(".button").click(function() {
var dataItem = $(this).data('item'),
contentID = $('#'+dataItem);
$('#output').html(contentID.val())
});
=============
<table cellspacing="10" cellpading="10" border="0">
<tr>
<td>Application Name</td>
<td>
<select id="country">
<option>Select Any Country</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="England">England</option>
<option value="Singapore">Singapore</option>
<option value="Canada">Canada</option>
</select>
</td>
<td><input type="button" data-item="country" class="button" value="Go" /></td>
</tr>
<tr>
<td>Application Name</td>
<td>
<select id="country1">
<option>Select Any Country</option>
<option>China</option>
<option>Russia</option>
<option>France</option>
<option>Paris</option>
<option>Germany</option>
</select>
</td>
<td><input type="button" data-item="country1" class="button" value="Go" /></td>
</tr>
<tr>
<td>Application Name</td>
<td>
<select id="country2">
<option>Select Any Country</option>
<option>Sri Lanka</option>
<option>South Africa</option>
<option>Ireland</option>
<option>Spain</option>
<option>Serbia</option>
</select>
</td>
<td><input type="button" data-item="country2" class="button" value="Go" /></td>
</tr>
</table>
<div id="output" style="color:red"></div>
Assign dynamic "id" for select and button
var n =1;
$("table tr input.button").each(function(n){
$(this).attr("id" , "button"+n);
$(this).parent().find("select").attr("id" , "country"+n);
});
Now on click
var y =1;
$("table tr input.button").each(function(y){
$("#button"+y).live('click', function(){
alert($("#country"+y+" option:selected").index());
});
});
I hope this is what u expecting ...try this
$("table tr td").each(function(n){
var id = $(this).find("select").attr("id");
if(id)
$("#output").append($("#"+id+" :selected").val()+"<br>");
});
}
check with fiddle:http://jsfiddle.net/tamilmani/QrbWy/