i want to hide the table rows when i select the dropdown option
In first table drop down is there.options are
1.current state
2.future state
If i select current state according to that the in 2nd and 3rd table rows should be show & hide.. for that i am using id for that tr..as current as well as future.
< script >
$(document).ready(function() {
$("#curfut").on("change",
function() {
$("#future").hide();
$("#current").show();
});
}); < /script>
<table>
<tr>
<td>
<select id="curfut">
<option value="select"></option>
<option value="Current">current</option>
<option value="Future">future</option>
</select>
</td>
</tr>
</table>
<table>
<div id="current"
<tr>
<td>
<INPUT TYPE=RADIO NAME="REDITBlue" VALUE="REDITBlueY" required />Yes
<INPUT TYPE=RADIO NAME="REDITBlue" VALUE="REDITBlueN" />No
</td>
</tr>
<div id="future">
<tr>
<td>
<INPUT TYPE=RADIO NAME="implementationplan" VALUE="implementationplanY" required />Yes
<INPUT TYPE=RADIO NAME="implementationplan" VALUE="implementationplanN" />No
</td>
</tr>
</div>
</tr>
</table>
<table>
<div id="current>
<tr>
<td>What is the potential Cognizant BI identified from this VSM?($MM)</td>
<td><input type=" text " name="clientBI " id="clientBI " required> </td>
</tr>
</div>
You need make some correction in your html and javascript.
i have prepare Demo. please check JSfiddle
Check out below code you might want something like this:
Note : initially both option will be enable. you can make changes according to your requirement.
Html :
<table>
<tr>
<td>
<select id="curfut">
<option value="select"></option>
<option value="Current">current</option>
<option value="Future">future</option>
</select>
</td>
</tr>
</table>
<table id="current">
<tr>
<td>
<INPUT TYPE=RADIO NAME="REDITBlue" VALUE="REDITBlueY" required />Yes
<INPUT TYPE=RADIO NAME="REDITBlue" VALUE="REDITBlueN" />No
</td>
</tr>
<tr>
<td>
<INPUT TYPE=RADIO NAME="implementationplan" VALUE="implementationplanY" required />Yes
<INPUT TYPE=RADIO NAME="implementationplan" VALUE="implementationplanN" />No
</td>
</tr>
</table>
<table id="future">
<tr>
<td>What is the potential Cognizant BI identified from this VSM?($MM)</td>
<td><input type="text" name="clientBI " id="clientBI " required> </td>
</tr>
</table>
Javascript :
$(document).ready(function() {
$("#curfut").on("change",
function() {
if($(this).val()=="Current")
{
$("#future").hide();
$("#current").show();
}
else if($(this).val()=="Future")
{
$("#future").show();
$("#current").hide();
}
});
});
You should get value of dropdown and show/hide according to the selection. If Current is selected than show div with id current and if Future option is selected than show div with id future
$(document).ready(function() {
$("#curfut").on("change",
function() {
if($(this).val()=="Current")
{
$("#future").hide();
$("#current").show();
}
else if($(this).val()=="Future")
{
$("#future").show();
$("#current").hide();
}
});
});
Id be unique in Html you used same id 'current' many times please be correct it down.
And your code be like for your context
$("#curfut").on("change",function(){
var getId = $(this).find('options:selected').text();
$('#current, #future').hide();
$('#' + getId).show()
});
Related
I have a dynamic table where the select option has multiple attributes. What i want to do is to get these multiple attributes populated to adjusent cells in the same row next to the select element.The select element is in the first cell in the dynamic row.
<!DOCTYPE html>
<html>
<td>
<select name="savings_account_number[]" id="savings_account_number" class="form-control">
<option value="610005" pro_id="6" available_bal="4500" cap_gl="10101" account_number="610005">610005</option>
<option value="510006" pro_id="5" available_bal="8900" cap_gl="10102" account_number="510006">510006</option>
</select>
</td>
<td>
<input name="pro_id[]" id="pro_id"/>
</td>
<td>
<input name="available_bal[]" id="pro_id"/>
</td>
<td>
<input name="cap_gl[]" id="cap_gl"/>
</td>
<td>
<input name="account_number[]" id="account_number"/>
</td>
</html>
I want this to happen for the onchange activity
If correctly understood, this is a possible solution using jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<select name="savings_account_number[]" class="form-control">
<option value="610005" pro_id="6" available_bal="4500" cap_gl="10101" account_number="610005">610005</option>
<option value="510006" pro_id="5" available_bal="8900" cap_gl="10102" account_number="510006">510006</option>
</select>
</td>
<td>
<input name="pro_id[]" id="pro_id"/>
</td>
<td>
<input name="available_bal[]" id="available_bal"/>
</td>
<td>
<input name="cap_gl[]" id="cap_gl"/>
</td>
<td>
<input name="account_number[]" id="account_number"/>
</td>
</tr>
<tr>
<td>
<select name="savings_account_number[]" class="form-control">
<option value="1245" pro_id="5" available_bal="454" cap_gl="3659" account_number="65987">1245</option>
<option value="6598" pro_id="43" available_bal="3215" cap_gl="64545" account_number="645444">6598</option>
</select>
</td>
<td>
<input name="pro_id[]" id="pro_id"/>
</td>
<td>
<input name="available_bal[]" id="available_bal"/>
</td>
<td>
<input name="cap_gl[]" id="cap_gl"/>
</td>
<td>
<input name="account_number[]" id="account_number"/>
</td>
</tr>
<tbody>
</table>
<script>
$(document).ready(function(){
$("table select").change(function(){
var select = $(this);
var option = select.find("option[value=" + select.val() + "]");
var tr = select.parents("tr:first");
if(option.length > 0){
tr.find("#pro_id").val(option.attr("pro_id"));
tr.find("#available_bal").val(option.attr("available_bal"));
tr.find("#cap_gl").val(option.attr("cap_gl"));
tr.find("#account_number").val(option.attr("account_number"));
}
else{
tr.find("#pro_id").val("");
tr.find("#available_bal").val("");
tr.find("#cap_gl").val("");
tr.find("#account_number").val("");
}
}).change();
});
</script>
Note that I've corrected the second input's id, which had the same identifier as the first one.
Also, the select change eventhandler is raised explicetly to load the current value on load.
I have an issue with my code. How to substract checkbox value when combobox change. I hope anybody here can help me.
Here is my js code:
//javascript for adding checkbox value and display in text.
<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function(e){
$('#txtInput').val($(this).val())
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i,ch) {
total += parseFloat($(this).val());
});
$("#txtInput").val(total);
});
});
</script>
//javascript for substract checkbox value when combobox change
<script>
$(document).ready(function(){
$('.xyz').change(function(){
var tmp = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var substract = 0;
$('#'+tmp+'').prop("checked",false)+(substract -= parseFloat($('#'+tmp+'').val()));
$("#txtInput").val(substract);
});
});
And here is my HTML code:
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td><select class="xyz" name="xyz1" id="xyz1"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check1" id="check1" value="1" /></td>
<td>French Fries</td>
</tr>
<tr>
<td><select class="xyz" name="xyz2" id="xyz2"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check2" id="check2" value="3" /></td>
<td>Pizza</td>
</tr>
<tr>
<td><select class="xyz" name="xyz3" id="xyz3"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check3" id="check3" value="5" /></td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
First, if I select "Take" in combobox and click checkbox the value will be shown into text.
Second, if I do it again the checkbox will be add the value and show the result into text.
Third, this my problem. If I change combobox into "Cancel" the checkbox only uncheck but can't decrease the value. I want if I change combobox into "Cancel" the value decrease according checkbox selection value and checkbox uncheck.
For any help, I really appreciate it. Thanks.
Make a common function which will read the state of the input elements and do the calculations accordingly.
.parents(selector) will traverse up and will returned matched element.
Try this:
var doCalc = function() {
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i, ch) {
if ($(this).parents('tr').find('select option:selected').text() == 'Take') {
total += parseFloat($(this).val());
}
});
$("#txtInput").val(total);
}
$('input[type=checkbox]').change(doCalc);
$('.xyz').change(function() {
if ($(this).find('option:selected').text() == 'Cancel') {
$(this).parents('tr').find('input[type="checkbox"]').prop('checked', false);
}
doCalc();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td>
<select class="xyz" name="xyz1" id="xyz1">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" id="check1" value="1" />
</td>
<td>French Fries</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz2" id="xyz2">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" id="check2" value="3" />
</td>
<td>Pizza</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz3" id="xyz3">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" id="check3" value="5" />
</td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
Fiddle here
I have an issue with my code. I hope anybody here can help me to fix it. I have problem in remove value from text on change event of select input .
Here is my js code:
$(document).ready(function() {
$('.select').change(function() {
var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
$('#' + check + '').prop("checked", false);
var txt = $(this).closest('tr').find("input[type='text']").attr('id');
$('#' + txt + '').val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<th>SELECT TYPE</th>
<th>TAKE IT</th>
<th>YOUR CHOOSEN</th>
</tr>
<tr>
<td>
<select class="select" name="select1">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" />
</td>
<td>
<input type="text" name="input1" />
</td>
</tr>
<tr>
<td>
<select class="select" name="select2">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" />
</td>
<td>
<input type="text" name="input2" />
</td>
</tr>
<tr>
<td>
<select class="select" name="select3">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" />
</td>
<td>
<input type="text" name="input3" />
</td>
</tr>
</table>
Note: I am loading data from database and showing the result into text and check-box automatically checked according to customer choice. When the customer want to edit data so, they will change the select input and the text and check-box should be clear. I only can remove the checked check-box but can't clear the text. Anybody please help. I really appreciate for any help.
I think you are having a problem to get how the script is working.
var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var txt = $(this).closest('tr').find("input[type='text']").attr('id');
this two code look for the id of input checkbox and the input text.
As I see there is no id defined for these two element. So those variable will have nothing in them (undefined) hence the code will not work.
One solve is:
You can add id to those field. Like
<tr>
<td><select class="select" name="select1">
<option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
</select> </td>
<td><input type="checkbox" name="check1" id="check1" /></td>
<td><input type="text" name="input1" id="input1" /></td>
</tr>
<tr>
<td>
<select class="select" name="select2"><option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
</select></td>
<td><input type="checkbox" name="check2" id="check2" /></td>
<td><input type="text" name="input2" id="input2" /></td>
Another Solve:
You can modify you script like this.
$(document).ready(function(){
$('.select').change(function(){
var check = $(this).closest('tr').find("input[type='checkbox']");
$(check).prop("checked",false);
var txt = $(this).closest('tr').find("input[type='text']");
$(txt).val("");
});
});
$(document).ready(function(){
$('.select').change(function(){
$(this).parent().parent().find("input[type='text']").val(""); $(this).parent().parent().find("input[type='checkbox']").prop("checked",false);
});});
Please try this friend i will work fine
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'm looking for a Javascript or jQuery solution, either works.
Anyway, when a user selects one of the choices for the radio buttons, I want a different set of checkboxes to show up. So, if a user chooses By Name, the name checkboxes will show up. And then when the user chooses By Title, the name checkboxes will disappear and the title checkboxes will show up.
When a page loads, and an option is not chosen, no checkboxes should appear
Here is what the HTML looks like:
<table>
<tr>
<td><input type="radio" name="selectType" value="byName" />By Name</td>
<td><input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle2" />Title 2</td>
</tr>
</table>
What would this code look like?
I would use data attributes to reference groups of checkboxes. This way you can make your code really flexible and unobtrusive:
$('.type-check').change(function() {
$('.type-group').hide().filter('.type-group-' + $(this).data('type')).show();
});
HTML sample:
<tr>
<td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td>
<td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td>
</tr>
http://jsfiddle.net/D8s9G/
First give your checkboxes classes..
<input type="checkbox" name="selectName1" class="name"/>Name 1
<input type="checkbox" name="selectName2" class="name"/>Name 2
do the same for titles and give them a class name of 'title' and for your radios too..
<input type="radio" name="selectType" value="byName" class="radioName" />
then;
$(document).ready(function () {
$('.radioName').click(function () {
$('.name').show();
$('.title').hide();
});
//same logic for titles..
});
Here is a working solution - http://jsfiddle.net/FloydPink/fkvSg/
jQuery:
$('.name').closest('tr').toggle(false);
$('.title').closest('tr').toggle(false);
$('input[name=selectType]').change(function () {
var byNameSelected = $(this).val() == 'byName';
$('.name').closest('tr').toggle(byNameSelected);
$('.title').closest('tr').toggle(!byNameSelected);
});
HTML:
<table>
<tr>
<td>
<input type="radio" name="selectType" value="byName" />By Name</td>
<td>
<input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName2" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle2" />Title 2</td>
</tr>
</table>
I have added css classes to all the four checkboxes, so that the group of 'Name' and 'Title' checkboxes could be grouped.
You can select the inputs with their name and show or hide the relevant inputs:
$('input[value*="byName"]').click( function() {
$('input[name*="selectName1"]').show();
$('input[name*="selectTitle1"]').hide();
}
$('input[value*="byTitle"]').click( function() {
$('input[name*="selectName1"]').hide();
$('input[name*="selectTitle1"]').show();
}