I have this code to show <tr> in my table but with every click, it hides the textbox that must be shown when the button is clicked.
Below is my jQuery code to show the textbox:
$(function() {
$('#btnAdd').click(function() {
$('.td1').show();
});
});
And this is my code in <table>:
<button id="btnAdd" name="btnAdd" onclick="toggle();" class="span1">ADD</button>
<tr class="td1" id="td1" style="">
<td><input type="text" name="val1" id="val1"/></td>
<td><input type="text" name="val2" id="val2"/></td>
</tr>
You have invalid markup. You need to wrap tr in table.something like this:
<button id="btnAdd" name="btnAdd" class="span1" >ADD</button>
<table class="td1" style="display: block;" >
<tr id="td1" >
<td><input type="text" name="val1" id="val1"/></td>
<td><input type="text" name="val2" id="val2"/></td>
</tr>
</table>
And js would be:
$('#btnAdd').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.td1')
elem.toggle('slow');
});
Working Demo
It will help you
$(function() {
$('#btnAdd').click(function() {
$('.td1').toggle();
});
});
HTML
<button id="btnAdd" name="btnAdd" class="span1">ADD</button>
<table>
<tr class="td1" id="td1" style="">
<td><input type="text" name="val1" id="val1"/></td>
<td><input type="text" name="val2" id="val2"/></td>
</tr>
</table>
Demo
hope it is help you.
you can see my Example
$('#btnAdd').click(function() {
$('.td1').toggle('show');
});
You need to hide your element by default to make show() method works:
.td1 {
display: none;
}
Fiddle Demo
or you can use toggle() here:
$(function () {
$('#btnAdd').click(function (e) {
e.preventDefault();
$('.td1').toggle();
});
});
Fiddle Demo
Add button like So:
<td>
<button id="btnAdd" name="btnAdd">ADD</button>
</td>
and Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btnAdd").click(function () {
$('.td1').toggle();
});
});
</script>
Related
I have a array of textbox and labels which are toggled in a html table, say the label vl be visible on first and then on the row click the text box are visible , but the problem is on that row if i change the text box value the label value should also change but hear in my case am not able to do it.
JS Fiddle demo
HTML:
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td>
<label>data1</label>
<input type="text" value="data1" />
</td>
<td>
<label>data2</label>
<input type="text" value="data2" />
</td>
<td>
<label>data3</label>
<input type="text" value="data3"/>
</td>
<td>
<label>data4</label>
<input type="text" value="data4"/>
</td>
<td>
<label>data5</label>
<input type="text" value="data5"/>
</td>
</tr>
<tr>
<td>
<label>data6</label>
<input type="text" value="data6" />
</td>
<td>
<label>data7</label>
<input type="text" value="data7"/>
</td>
<td>
<label>data8</label>
<input type="text" value="data8" />
</td>
<td>
<label>data9</label>
<input type="text" value="data9" />
</td>
<td>
<label>data10</label>
<input type="text" value="data10" />
</td>
</tr>
</table>
<input id="printdata" type="button" value="printdata" />
<div class="showresult">1: <span></span></div>
<div class="showresult">2: <span></span></div>
<div class="showresult">3: <span></span></div>
<div class="showresult">4: <span></span></div>
<div class="showresult">5: <span></span></div>
JS:
$('#table1 input').hide();
$('#printdata').fadeTo(0, 0);
// This shows or hides the button deppending on the inputs
$('#table1 tr').on('change keyup click', function() {
var text = '';
$('input', this).each(function(){
text += $(this).val();
});
if (text !='')
{
$('#printdata').fadeTo(0, 100);
}
else
{
$('#printdata').fadeTo(0, 0);
}
});
$('#table1 tr').on('click', function (e) {
if ($( e.target ).is("input") || $( e.target ).is("th") ) {
return;
} else if ($(this).hasClass('selected')) {
$(this).toggleClass('selected');
$('input', this).toggle();
$('label', this).toggle();
} else {
$('tr.selected input').hide();
$('tr.selected label').toggle();
$('tr.selected').toggleClass('selected');
$(this).toggleClass('selected');
$('label', this).toggle();
$('input', this).toggle();
}
});
$('#printdata').click(function () {
$('.showresult').each(function (index) {
$('span', this).html('');
$('span', this).html($('#table1 .selected input').eq(index).val());
});
});
try to add this code:-
$('#table1 tr').on('change','[type="text"]', function(e) {
$(this).prev('label').text($(this).val());
});
Demo
Well, that's what you need to add to make your code working:
$('#table1 input').each(function(idx, input) {
var jqInput = $(input);
var label = jqInput.parent().find("label")
jqInput.change(function() {
label.text(jqInput.val())
})
})
However, this is a slippery road.
You're trying to maintain some state, display it in different views...
You will always have some sort of data synchronization bug with this approach.
You need to use some sort of MVC to make your life easier and code more stable.
I am a complete beginner with Javascript.
I have 4 radio buttons:
House
Flat / Apartment
Bungalow
Commercial
And 2 input fields:
Rooms:
Bedrooms:
on click of House, Flat, Bungalow, I want to hide Rooms and show the input field Bedrooms on click of commercial I want to hide Bedrooms and show Rooms.
Please see my code below:
HTML CODE:
<table id="CurrentProperty">
<tr>
<td colspan="3">
<label>Type of Property:</label>
<br/>
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" checked="checked" />House
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Flat / Appartment
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Bungalow
<input type="radio" id="showRooms" value="rooms" name="fromType" />Commercial</td>
</tr>
<tr class="showCta">
<td colspan="3">
<label>Rooms:</label>
<input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
</td>
</tr>
<tr class="showTr">
<td colspan="3">
<label>Bedrooms:</label>
<input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
</td>
</tr>
</table>
JAVASCRIPT:
$(window).load(function () {
$('#showBedrooms').on('click', function () {
$('.showCta').hide();
});
});
$(window).load(function () {
$('#showRooms').on('click', function () {
$('.showCta').show();
});
});
JS should be something like
function update (el) {
var $rooms = $('tr.showCta');
var $bedrooms = $('tr.showTr');
if (el.checked && el.value === 'bedrooms') {
$rooms.hide();
$bedrooms.show();
} else {
$rooms.show();
$bedrooms.hide();
}
}
$(function () {
//get initial state.
update($('input:checked')[0]);
$('input[name="fromType"]').change(function () {
update(this);
});
});
jsFiddle http://jsfiddle.net/bj4Lx7ms/
JAVASCRIPT:
$( document ).ready(function () {
$('#showBedrooms').on('click', function () {
$('.showCta').hide();
});
$('#showRooms').on('click', function () {
$('.showCta').show();
});
});
After the document loaded and set the onclick handlder
And I think you should set
<tr class="showCta">
to
<tr class="showCta" style="display:none;">
in your case, user change from jquery. Bind an event handler to the "change" JavaScript event, or trigger that event on an element (your radiobuttons). With $(this).val() you can get the value from the value attribute, to check is the value bedrooms. Then call the methode show or hide like in this example:
$(document).ready(function () {
$('input:radio[name="fromType"]').change(function(){
if($(this).val() == 'bedrooms'){
$('.showCta').hide();
$('.showTr').show();
}else if ($(this).val() == 'rooms'){
$('.showCta').show();
$('.showTr').hide();
}
});
});
And hide the showCta tr as default with:
<tr class="showCta" style="display:none">
Here my JsFiddle-example
$(window).load(function () { /* You don't need to call twice this function, just wrap all your function in it */
function hideRooms() {
$("#rooms").hide(0);
$("#bedrooms").fadeIn(250);
}
function hideBedrooms() {
$("#bedrooms").hide(0);
$("#rooms").fadeIn(250);
}
$("#label").text("House selected");
hideRooms(); /* Hidding at start of website */
$("#showBedrooms_house").change(function() {
$("#label").text("House selected");
if (this.checked) {
hideRooms();
}
});
$("#showBedrooms_flatAppart").change(function() {
$("#label").text("Flat / Appartment selecrted");
if (this.checked) {
hideRooms();
}
});
$("#showBedrooms_bungalow").change(function() {
$("#label").text("Bungalow selected");
if (this.checked) {
hideRooms();
}
});
$("#showRooms_commercial").change(function() {
$("#label").text("Commercial selected");
if (this.checked) {
hideBedrooms();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="CurrentProperty">
<tr>
<td colspan="3">
<label>Type of Property:</label>
<br/>
<input type="radio" id="showBedrooms_house" value="bedrooms" name="fromType" checked="checked" />House
<input type="radio" id="showBedrooms_flatAppart" value="bedrooms" name="fromType" />Flat / Appartment
<input type="radio" id="showBedrooms_bungalow" value="bedrooms" name="fromType" />Bungalow
<input type="radio" id="showRooms_commercial" value="rooms" name="fromType" />Commercial</td>
</tr>
<tr class="showCta" id = "rooms">
<td colspan="3">
<label>Rooms:</label>
<input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
</td>
</tr>
<tr class="showTr" id = "bedrooms">
<td colspan="3">
<label>Bedrooms:</label>
<input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
</td>
</tr>
<tr>
<td style ="color : blue">
<label id ="label"></label>
</td>
</tr>
</table>
I want to hide a table row (with input fields inside) when a checkbox is checked.
I found something that works:
HTML
<table>
<tr id="row">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox">Hide inputs</td>
</tr>
</table>
Script
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
});
Fiddle
But this only works if the checkbox is not checked already. So if the checkbox is checked at the beginning, I want the table row to be hidden. How do I do this?
Please note that I don't know much about JavaScript, but I really need this
trigger .change() event after you attach events:
$(function () {
$('#checkbox1, #checkbox2').change(function () {
var row = $(this).closest('tr').prev();
if (!this.checked)
row.fadeIn('slow');
else
row.fadeOut('slow');
}).change();
});
Note: I make code shorter.
jsfiddle
Just call the change event after you initially register it:
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
$('#checkbox').change();
});
I believe this is what you were looking for:
$(function() {
var init = true;
$('input[type="checkbox"]').change(function() {
if (this.checked) {
if (init) {
$(this).prev().hide();
init = false;
} else $(this).prev().slideUp();
} else $(this).prev().slideDown();
}).change();
});
input[type='text'] {
display: block;
padding: 3px 5px;
margin: 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="text" placeholder="Shown" />
<input type="checkbox" />Hide input
</div>
<div>
<input type="text" placeholder="Hidden" />
<input type="checkbox" checked/>Hide input
</div>
Generic solution without hardcoded ids:
$('table :checkbox').change(function(e, speed) {
speed = typeof speed == 'undefined' ? 'slow' : 0;
$(this).closest('tr').prev()[this.checked ? 'fadeOut' : 'fadeIn'](speed);
}).trigger('change', [0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="row1">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox1">Hide inputs</td>
</tr>
<tr id="row2">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox2" checked>Hide inputs</td>
</tr>
</table>
just call the change function in document.ready after it
$('#checkbox').change();
Like this
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked) $('#row').fadeIn('slow');
else $('#row').fadeOut('slow');
});
$('#checkbox').change();
});
Here is the DEMO FIDDLE
Musefan's answer is excelent, but following is also another way!
$(document).ready(function () {
($('#checkbox').prop('checked')==true) ? $('#row').fadeOut('slow'):$('#row').fadeIn('slow');
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
});
you can initially hide them if you really want the checkbox to be checked initially.
<table>
<tr id="row" style="display: none;">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" checked>Hide inputs</td>
</tr>
</table>
<script>
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
});
</script>
var showOrHideRow=fucntion(isChecked){
if (isChecked)
$('#row').fadeOut('slow');
else
$('#row').fadeIn('slow');
};
$(document).ready(function () {
showOrHideRow($('#checkbox').is(":checked"));
$('#checkbox').change(function () {
showOrHideRow(this.checked);
});
});
$('#tbl_name tr').find('input:checkbox:checked').closest('tr').show();
$('#tbl_name tr').find('input:checkbox:Unchecked').closest('tr').hide();
I would like to hide td if input value is 0 but I can't get it to work?
http://jsfiddle.net/zxpsd8x6/1/
<td><input type="radio" name="hideifvalue0" value"0"></td>
<td><input type="radio" name="hideifvalue0" value"1"></td>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("td").hide();
});
$(".btn2").click(function(){
$("td").show();
});
});
</script>
Not the way I would recommend, but this fixes the selectors:
JSFiddle: http://jsfiddle.net/swcmp2ws/
$(document).ready(function () {
$(".btn1").click(function () {
$('td:has(input[value="0"])').hide();
//or
$('input[value="0"]').parent().hide();
});
$(".btn2").click(function () {
$('td:has(input[value="0"])').show();
//or
$('input[value="0"]').parent().show();
});
});
Notes:
Your HTML was invalid - added table and tr elements
You should just use classes on common elements for simpler selectors (e.g. class="hidethese") and $('.hidethese').hide()
Change your HTML to:
<td><input type="radio" name="hideifvalue0" value="0"></td>
<td><input type="radio" name="hideifvalue0" value="1"></td>
Then your jQuery should be:
$(document).ready(function(){
$(".btn1").click(function(){
$("input[value='0']").parent().hide();
});
$(".btn2").click(function(){
$("input[value='0']").parent().show();
});
});
First of all your html elements are wrong. <td> should be inside <table><tr>
like:
<table>
<tr>
<td><input type="radio" name="hideifvalue0" value="0" /></td>
<td><input type="radio" name="hideifvalue0" value="1" /></td>
</tr>
</table>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
Then here your jQuery code goes:
$(".btn1").on('click', function () {
$("input:radio[value='0']").parent().hide();
});
$(".btn2").on('click', function () {
$("input:radio[value='0']").parent().show();
});
I have some code which I got from jquery which i modified a bit to that all checked box values
will populate a text input element.
this works perfectly on jsfiddle.. see link to demo
http://jsfiddle.net/aAqt2/
but when I try it on my out site, it does not work.. any Idea why? see my code below
<html><head>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$('input').on('change', function() {
var values = $('input:checked').map(function() {
return this.value;
}).get();
$('#output').val(values.toString());
});
</script>
</head>
<body>
<from name="test">
<table>
<tr>
<td><input type=checkbox value="1"></td>
</tr>
<tr>
<td><input type=checkbox value="2"></td>
</tr>
<tr>
<td><input type=checkbox value="3"></td>
</tr>
<tr>
<td><input type=checkbox value="4"></td>
</tr>
<tr>
<td><input type=checkbox value="5"></td>
</tr>
<tr>
<td><input type="text" id="output"></td>
</tr>
</table>
</form>
</body>
</html>
You need to wrap your code in a document ready call or place it at the end of the page before the closing body tag. JSfiddle is doing that for you automatically.
Ex:
$(document).ready(function () {
$('input').on('change', function () {
var values = $('input:checked').map(function () {
return this.value;
}).get();
$('#output').val(values.toString());
});
});
Wrap your code in a DOM ready function:
$(document).ready(function() {
//code here
});
You need to put your code inside a ready function.
$(document).ready(function () {
$('input').on('change', function() {
var values = $('input:checked').map(function() {
return this.value;
}).get();
$('#output').val(values.toString());
});
});