How do I fill a cell in the table dynamically after the user selects an option within the column?
Inside the select there is an update function and it is working, but I can't update column two of the line with the data given value of the select.
function update(line) {
// update in the col of mytable for next col.
// whats wrong with this code?
// Why not working?
var td = line.closest('td');
td.nextSibling.innerText = line.value;
}
<table id="myTable">
<thead>
<tr>
<td>Selection</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td id='emilio'>
1
</td>
</tr>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td>
2
</td>
</tr>
</tbody>
</table>
Since the onChange is working, you need to select the containing td then update then next one like:
function onChange(update) {
var td = update.closest('td');
td.nextElementSibling.innerText = update.value;
}
Your function name should be update, try this
function update(e) {
//update in the col of mytable for 0
if( e.id ==='item1'){
document.getElementById('selection1').innerHTML= e.value
}else{
document.getElementById('selection2').innerHTML= e.value
}
}
<table id="myTable">
<thead>
<tr>
<td>Selection</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='1'>option1</option>
<option value='2'>option2</option>
<option value='3'>option3</option>
<option value='4'>option4</option>
</select>
</div>
</td>
<td id='selection1'>
1
</td>
</tr>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item2" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td id='selection2' ></td>
</tr>
</tbody>
</table>
Related
Why jquery parent child selector is not working here :
$(document).on('change', 'select[name="slct_sec"]', function() {
var cls_1 = $(this).closest('article').find('select[name="slct_cls"]').val();
console.log(cls_1);
var cls_1_bis = $(this).parent().siblings().find('select[name="slct_cls"]').val();
console.log(cls_1_bis);
});
$("#productTableServerSide").on('change', '.server-dropdown', function(event) {
//ancienne valeur
var oldValue = $.data(this, 'itemValue');
//nouvelle valeur
var newValue = $(this).val();
console.log('break1');
//not working
var itemName = $(this).closest('tbody').find('.col-name').val();
console.log('itemName : ', itemName);
//not working
var itemName1 = $(this).parent().children('.col-name').val();
console.log('itemName1 : ', itemName1);
//not working
var itemName2 = $(this).parent().siblings().find('select[name="values"]').val();
console.log('itemName2 : ', itemName2);
//not working
var itemName3 = $(this).parent().children('.col-name').find('select[name="values"]').val();
console.log('itemName3 : ', itemName3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Example from Internet which is working</p>
<article>
<section>
<select name='slct_cls'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</section>
<br/>
<section>
<select name='slct_sec'>
<option value='1'>A</option>
<option value='2'>B</option>
</select>
</section>
</article>
<br/>
<p>My Example</p>
<table id="productTableServerSide" class="table table-bordered" style="width:100%;">
<thead class="thead-dark text-white">
<tr>
<th>Check</th>
<th>#</th>
<th>The product name</th>
<th>The product value</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="col-checkbox sorting_1">
<input id="check0" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 0</td>
<td class=" col-value">3</td>
<td class=" col-dropdown">
<select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
<option value="2130554612">2130554612</option>
</select>
</td>
</tr>
<tr role="row" class="even">
<td class="col-checkbox sorting_1">
<input id="check1" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 1</td>
<td class=" col-value">1436184776</td>
<td class=" col-dropdown">
<select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="1436184776" selected="">1436184776</option>
</select>
</td>
</tr>
</tbody>
</table>
I've used an example from here : Jquery selecting a parents child which didn't work for me.
The console.log returns undefined => which means that either the variable is undefined or something else
Could you help me?
Thanks for your help. After searching an answer to my question here is the solution of my problem :
$("#productTableServerSide").on('change', '.server-dropdown', function (event) {
//ancienne valeur
var oldValue = $.data(this, 'itemValue');
//nouvelle valeur
var newValue = $(this).val();
console.log('break1');
//working
var itemName = $(this).closest('tr').find('.col-name').text();
console.log('itemName : ', itemName);
alert(itemName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>My Example</p>
<table id="productTableServerSide" class="table table-bordered" style="width:100%;">
<thead class="thead-dark text-white">
<tr>
<th>Check</th>
<th>#</th>
<th>The product name</th>
<th>The product value</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="col-checkbox sorting_1">
<input id="check0" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 0</td>
<td class=" col-value">3</td>
<td class=" col-dropdown">
<select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
<option value="2130554612">2130554612</option>
</select>
</td>
</tr>
<tr role="row" class="even">
<td class="col-checkbox sorting_1">
<input id="check1" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 1</td>
<td class=" col-value">1436184776</td>
<td class=" col-dropdown">
<select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="1436184776" selected="">1436184776</option>
</select>
</td>
</tr>
</tbody>
</table>
I pulish it for the others, in case they have the same issue.
Have a nice day!
var itemName = $(this).closest('tbody').find('.col-name').text();
try this,
is not an input elelment so I dont think you'll get anything with val()
instead I've used text(), or you can try other functions jquery provides, like html()
And out of all selectors you've tried to target <td class="col-name"> , above seems to work fine, second one wont work, I didnt try every one of them.
Depending on the value selected with the 3 selectors I only have to display the rows that contain those values selected earlier at the same time.
I currently have this and it works for one selector. How can I extend it for all the 3 selectors to affect the rows displayed?
<select id="selA">
<option value="0">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="0">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="0">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C1</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C2</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C3</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B2</td>
<td class="choice one">C4</td>
</tr>
</tbody>
</table>
AND JS:
$(document).ready(function(){
$("#selA").change(function(){
var textselected = document.getElementById("selA").value ;
target = '.' + textselected;
$('.choice').hide();
$(target).show();
});
});
How can I make it so it doesn't depend on the class and hides the rows that don't have ALL the values in the selectors?
K, I think you want something like this:
https://jsfiddle.net/agkh7f3w/2/
HTML:
<div id="filtru">filtru:
<select id="selA">
<option value="">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C2</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C3</td>
</tr>
<tr>
<td>A1</td>
<td>B2</td>
<td>C4</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() {
$('#filtru select').change(function() {
const filtru = [$('#selA').val(), $('#selB').val(), $('#selC').val()];
$('#table tr').each(function() {
$(this).show();
$('td', this).each(function(i) {
const text = $(this).text().toLowerCase();
if (text.indexOf(filtru[i]) === -1) {
$(this).closest('tr').hide();
}
})
})
});
});
I have an HTML table which has "Mortgage Type" column as an editable field where the user can select a value in the dropdown and enter some text in the input field available.
Default value shown in the Mortgage Type dropdown list is "Auto". When the user enters some data in any rows (ex.,1st row, and 4th row) and clicks on the submit button, I'm clearing the fields and displaying the data which I got from backend. It works as expected.
Issue I'm facing is when user click on GetData button. I'm clearing the input entered by user and showing the data which I got from the backend, but it is clearing
the default value, shown in the Mortgage Type dropdown, which should be "Auto" for all the fields except for the values which I got from the database(var mortageType - shown in the first two rows of the table..)
$('.mortgageType').val(''); //clearing all the dropdown values and showing blank as the code suggests..
Another issue is word-wrap: break-word; is not working for the columns. I don't want to extend the column size when the value is long, instead, I want to do word-wrap: break-word;. But in my code when the user clicks on the GetData button, the value in the Status field for the first row is long and it is extending the column.
I tried to use the below CSS in the style attribute which is not working.
<div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>
Demo code (also on Plnkr.co):
function submitData() {
var flag = true;
$('#loanTable input[type="text"]').val('');
$('.mortgageType').val(''); //to clear the dropdown value
$('.order').val('');
var enablingFlag = true;
if (flag) {
//values from backend
var mortageType = [{
"code": "Home",
"description": "Home"
}, {
"code": "Car",
"description": "Car"
}];
var loanNum = [{
"code": "23432",
"description": "23432"
}, {
"code": "12123",
"description": "12123"
}];
var status = [{
"code": "Approved",
"description": "Approved"
}, {
"code": "Pending, need more documents",
"description": "Pending, need more documents"
}];
var j = 0;
//iterate and show the jsonData in the table2 when user click on submit button
for (var i = 0; i < mortageType.length; i++) {
j = j + 1;
document.getElementById("mortageType" + j).value = mortageType[i].code;
document.getElementById("loanNum" + j).innerText = loanNum[i].code;
document.getElementById("status" + j).innerText = status[i].code;
if (loanNum[i].code == null || mortageType[i].code == null || status[i].code == null) {
console.log("row has null value");
$('#status' + j).parent().parent().css({
'border': 'red'
});
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="loanTable" id="loanTable" border="1">
<tbody>
<tr>
<th> <label for="show"><span name="3765" maxlength="1"class="message">Year</span></label> </th>
<th> <label for="show"><span name="568" maxlength="1" class="message">Mortgage Type</span>
<span name="496" maxlength="1" class="message"></span>
</label>
</th>
<th> <label for="show"><span name="3702" maxlength="1" class="message">Loan Num</span></label> </th>
<th> <label for="show"><span name="2366" maxlength="1" class="message">Status</span></label> </th>
<th> <label for="show"><span name="179" maxlength="1" class="message">Comments</span></label> </th>
</tr>
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType1" name="mortageType1" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord1" id="ord1" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum1"></div>
</td>
<td>
<div class="cloneX10 indField" id="status1" style="word-wrap: break-word;"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments1"></div>
</td>
</tr>
<!--Second row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType2" name="mortageType2" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord2" id="ord2" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum2"></div>
</td>
<td>
<div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments2"></div>
</td>
</tr>
<!--Third Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType3" name="mortageType3" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord3" id="ord3" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum3"></div>
</td>
<td>
<div class="cloneX10 indField" id="status3" style="word-wrap: break-word;"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments3"></div>
</td>
</tr>
<!--Fourth Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType3" name="mortageType4" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord4" id="ord4" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum4"></div>
</td>
<td>
<div class="cloneX10 indField" id="status4"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments4"></div>
</td>
</tr>
<!--Fifth Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType3" name="mortageType5" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord5" id="ord5" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum5"></div>
</td>
<td>
<div class="cloneX10 indField" id="status5"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments5"></div>
</td>
</tr>
</tbody>
</table><br>
<input type="submit" value="GetData" onclick="submitData()">
Instead of clearing that, set it as "Auto" default
replace $('.mortgageType').val(''); with $('.mortgageType').val('Auto');
You can use style="max-width:100px;" for those th tags
There is no need to clear value of all select elements. So a simple solution is comment this line of code:
JS:
//$('.mortgageType').val('');
// or something simple like line below
$('.mortgageType').val('Auto'); //So you'll set "Auto" to all selet elements and in the loop you'll change them based on what database returns.
And to preventing extending column you have a solution like below:
HTML/CSS:
<table class="loanTable" id="loanTable" border="1" style="table-layout:fixed;">
...
<td><div class="cloneX10 indField" id="status2" style="white-space: nowrap;overflow: hidden;"></div></td>
Or you can use overflow-x: scroll; instead of overflow: hidden; to have a scrollbar to reading extended content. Check this link out: Plnkr.co
P.S. If you have any further questions, or you think this is not your answer just let me in comment sections down below.
Another solution for preventing columns to be extended, answered in this thread:
Display limit for table column
Here's what I am trying to do: If I select something from the dropdown list "selectOption1", I want to set an option in the other dropdown list "selectOption2" to "invisible". Unfortunately, I cannot address the element correctly in the other list.
multiCapture.html
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
var ddl = document.getElementById("selectOption2");
var selectedValue2 = ddl.options[ddl.selectedIndex].value;
if (selectedValue1 == 'Männlich') {
selectedValue2.options[2].style.display = "none";
}
}
<form>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable">
<tr>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Titel</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
<tr>
<td>
<div class="input-field">
<select id="selectOption1" required onchange="setAnrede()">
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
<label>Geschlecht angeben:</label>
</div>
</td>
<td>
<div class="input-field">
<select id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Lieber">Lieber</option>
<option value="Werter">Werter</option>
<option value="Hallo">Hallo</option>
</select>
<label>Anrede angeben:</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>
You could attach the change event in your JS code instead, then use eq() to select the option you want based on the index, like:
jQuery solution :
$('#selectOption1').on('change', setAnrede);
function setAnrede() {
var ddl = $("#selectOption1");
var dd2 = $("#selectOption2");
if ($(this).val() === 'Männlich') {
dd2.find('option:eq(2)').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable" border=1>
<tr>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Titel</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
<tr>
<td>
<div class="input-field">
<select id="selectOption1" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
<label>Geschlecht angeben:</label>
</div>
</td>
<td>
<div class="input-field">
<select id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Lieber">Lieber</option>
<option value="Werter">Werter</option>
<option value="Hallo">Hallo</option>
</select>
<label>Anrede angeben:</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>
Pure Js solution
document.getElementById("selectOption1").addEventListener("click", setAnrede);
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var dd2 = document.getElementById("selectOption2");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
if (selectedValue1 == 'Männlich') {
dd2.options[2].style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable" border=1>
<tr>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Titel</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
<tr>
<td>
<div class="input-field">
<select id="selectOption1" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
<label>Geschlecht angeben:</label>
</div>
</td>
<td>
<div class="input-field">
<select id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Lieber">Lieber</option>
<option value="Werter">Werter</option>
<option value="Hallo">Hallo</option>
</select>
<label>Anrede angeben:</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>
You need to change your javascript code
<script type="application/x-javascript">
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
var ddl2 = document.getElementById("selectOption2");
var selectedValue2 = ddl.options[ddl.selectedIndex].value;
if (selectedValue1 == 'Männlich') {
ddl2.options[2].style.display = "none";
}
}
</script>
I want a drop down menu at the top of the page to determine how many boxes are then showing on the page.
If the user selects 1, only 1 table shows
If the user selects 2, 2 tables show
I have added the code so hopefully it makes more sense
<body>
<p>Please select number of puppies:</p>
<p>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td>
<input name="PuppyMicrochipNum2" type="text"
id="PuppyMicrochipNum2" />
</td>
</tr>
</table>
jsFiddle: http://jsfiddle.net/h3XLP/
very common to get jQuery answers but it's really not that comprehensive with standalone JavaScript
note: add the attribute style="display:none;" to the second table
var select = document.getElementsByTagName("select")[0];
select.onchange=function(){
if(select.value=="2"){
document.getElementsByTagName("table")[1].style.display="inline";
}else{
document.getElementsByTagName("table")[1].style.display="none";
}
}
however you should alternatively use below, as you may have more select and table elements in your document
http://jsfiddle.net/h3XLP/1/
var select = document.getElementById("selectnopuppies");
select.onchange=function(){
if(select.value=="2"){
document.getElementById("secondpuppytable").style.display="inline";
}else{
document.getElementById("secondpuppytable").style.display="none";
}
}
<p>Please select number of puppies:</p>
<p>
<select id="selectnopuppies">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1:</p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName1" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour1" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td> </td>
</tr>
</table>
<div id="secondpuppytable" style="display:none;">
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName2" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour2" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td>
<input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" />
</td>
</tr>
</table>
</div>
Given that option 1 should show table 1, option 2 show table 1 and 2, and so on.
Try this:
$('#dropdown').change(function(){
var dropdown = $(this);
var tables = $('.tableSelector');
tables.hide();
tables.slice(0,dropdown.val()).show();
});
Working jsfiddle: http://jsfiddle.net/v5TTz/
I have tagged all tables with a css class "tableSelector", then everytime the dropdown changes value, I show the number of tables corresponding to the current value of the dropdownlist. This solution requires the tables to be positioned in the correct order in the DOM.
However, in my ears, this sounds like a case for templates, like jQuery templates or Hoganjs.
I have modified your code... It's working now... try this...
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function go()
{
var Count = document.getElementById("selCount").options[document.getElementById("selCount").selectedIndex].value;
if(Count==1)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = 'none';
}
if(Count==2)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = '';
}
}
</script>
</head>
<body>
<p>Please select number of puppies:</p>
<p>
<select onchange = "go()" id="selCount">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0" id="Puppy1">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0" id="Puppy2">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td><input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" /></td>
</tr>
</table>
</body>
</html>
You can do something like this:
When you select 1st option, it will show you firSt table and for 2nd it will show you both tables.
$("table").hide();
$("select option").change(function(){
Val = $(this).val();
If(Val ==1) {
$("table")[0].show();
$("table")[1].hide();
} else {
$("table").show();
}
});
A little bit of javascript:
<script>
function showtable(o){
if(o.value==2){document.getElementById('table2').style.display='block';}
else{document.getElementById('table2').style.display='none';}
}
</script>
<p>Please select number of puppies:</p>
<p>
<select onchange="showtable(this)">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<table id='table2' width="330" border="0" style="display:none">
HTML Changes
<select onchange="showForm(this.options[this.selectedIndex]);">
Why it's needed ?
For listening the select box value change .
<table width="330" border="0" class="puppy">
Added class=puppy attribute for readability . For hiding table element will be generic and error prone.
Javascript Changes
function showForm(option){
//option user has selected.
var val = parseInt(option.value);
//form elements in a document.
var forms = document.getElementsByClassName("puppy");
for(var i=0,total=forms.length;i<total;i++){
var form = forms[i];
var display = form.style.display;
if(i<val && display == "none"){
form.style.display = "block";
}else if(i >= val && display != "none"){
form.style.display = "none";
}
}
}
Live Demo # http://jsfiddle.net/A3eFz/31/
Please try with following example, hope this helps.
<label for ="amount">Please select number of parameter</label><br/>
<select name="amount" id="amount" title="amount">
<option value="00">0</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
</select>
<form name = "AddQuery" id = "AddQuery" method = "POST" action = "submit.php">
<div id="groups">
</div>
<div id="other">
</div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#amount').change(function(){
$('#groups').empty();
var group = '';
var number = parseInt($(this).val());
for(var i=0;i<number;i++){
group += '<div id="group">' +
'<label for="name['+i+']">Name'+i+'</label> '+
'<input name="name'+i+'" type="text" id="name'+i+'" value="">' +
'<label for="type['+i+']">Type'+i+'</label> '+
'<input name="type'+i+'" type="text" id="type'+i+'" value="">' +
'</div>';
}
$('#groups').append(group);
$('#other').empty();
var other = '';
other +='<div id="other"><input type="hidden" name="n" id ="n" value="'+number+'"/></div>';
$('#other').append(other);
});
});
</script>