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.
Related
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 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>
All I want is filter the table with radio inputs.
This is my jsfiddle
I am using this inputs and table:
<div style="border:1px solid;">
<input type="radio" id="Bob" name="name" />Bob
<input type="radio" id="Jay" name="name" />Jay
</div>
<div style="border:1px solid; margin:5px 0;">
<input type="radio" id="developer" name="position" />Developer
<input type="radio" id="itManager" name="position" />Manager
</div>
<table border="1" style="text-align:center;">
<tr>
<th>Name</th><th>Position</th>
</tr>
<tr>
<td>Bob</td><td>Developer</td>
</tr>
<tr>
<td>Jay</td><td>Manager</td>
</tr>
<tr>
<td>Bob</td><td>Manager</td>
</tr>
<tr>
<td>Jay</td><td>Developer</td>
</tr>
</table>
and this js:
$('#Bob').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Bob"))').hide();
});
$('#Jay').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Jay"))').hide();
});
$('#developer').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Developer"))').hide();
});
$('#itManager').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Manager"))').hide();
});
All I need is double filter, when I select Bob, its shows only bobs than when I select Developer I want to see Bob - Developer tr.
I know js code is wrong but I wanted you make understand what I want to do.
Try this, more simple:
$('input[type="radio"]').change(function () {
var name = $('input[name="name"]:checked').prop('id') || '';
var position = $('input[name="position"]:checked').prop('id') || '';
$('tr').hide();
$('tr:contains(' + name + ')').show();
$('tr').not(':contains(' + position + ')').hide();
});
Demo here
The only change in the HTML you need is to have the ID of the position radio buttons to be the same as the table. The that information can be used in the tr show/hide. Like:
<input type="radio" id="Developer" name="position" />Developer
<input type="radio" id="Manager" name="position" />Manager
I am attempting to return the hidden input field value above a checked checkbox. As it is at the moment I am finding a value of undefined.
This is what I have tried.
var checkedTopics = document.getElementsByName("chkRelatedTopics");
for (var i = 0; i < checkedTopics.length; i++) {
if (checkedTopics[i].checked) {
var uniqueKeyTopic = $(this).parent().
find("input[name=hidTopicsDomain]").val();
console.log(uniqueKeyTopic);
}
}
this is the markup
{{each Items}}
<tr>
<td>
<input type='hidden'
name='hidTopicsDomain' value='${DomainObjectKey}'/>
<input type='checkbox'
name='chkRelatedTopics' value='${subject}'/>
</td>
<td><label id='labRelatedTopicDisplay'>${subject}</label>
</tr>
{{/each}}
How can I retrieve this hidden input field value?
Thanks
Try this:
$('input[type=checkbox]:checked').each(function(){
$(this).prev('input[name=hidTopicsDomain]').val();
});
or if you want to control checked and unchecked then use this:
$('input[type=checkbox]').each(function(){
if($(this).is(':checked')){
//perform something if checked
}
else{
//perform something if not checked.
}
});
You can't use this in the for loop, use .each() and use siblings to find the input
var checkedTopics = document.getElementsByName("chkRelatedTopics");
$(checkedTopics).each(function(){
if (this.checked) {
var uniqueKeyTopic = $(this).siblings("input[name=hidTopicsDomain]").val();
console.log(uniqueKeyTopic);
}
});
Check below if this helps.
http://jsfiddle.net/sandeep605085/28peQ/2/
html:
<table>
<tr>
<td>
<input type='hidden' name='hidTopicsDomain' value='HiddenFieldValue1'/>
<input type='checkbox' checked name='chkRelatedTopics' value='checkbox1'/>
</td>
<td>
<label id='labRelatedTopicDisplay'>label1</label>
</td>
</tr>
<tr>
<td>
<input type='hidden' name='hidTopicsDomain' value='HiddenFieldValue2' />
<input type='checkbox' checked name='chkRelatedTopics' value='checkbox2'/>
</td>
<td>
<label id='labRelatedTopicDisplay'>label2</label>
</td>
</tr>
<tr>
<td>
<input type='hidden' name='hidTopicsDomain' value='HiddenFieldValue3'/>
<input type='checkbox' name='chkRelatedTopics' value='checkbox3' />
</td>
<td>
<label id='labRelatedTopicDisplay'>label3</label>
</td>
</tr>
<tr>
<td>
<input type='button' id='buttonclick' value='Click to Test' />
</td>
</tr>
</table>
js:
$('#buttonclick').click(function(){
var checkedTopics = $('input[name="chkRelatedTopics"]');
checkedTopics.each(function(){
if ($(this).is(':checked')) {
var uniqueKeyTopic = $(this).prev().val();
alert(uniqueKeyTopic);
}
});
});
Thanks.
I have a drop down box and some text input fields below it. Based on which item from the drop down menu the user selects, I would like to disable some of the fields. I think I am failing to target the input fields correctly but I can't figure out what the problem is:
Here is the script I have gotten so far:
$(document).ready(function(){
var customfield = $('#customfields-tf-19-tf');
var customfield1 = $('#customfields-tf-20-tf');
var customfield2 = $('#customfields-tf-13-tf');
$(function() {
var call_table = {
'Condominium': function() {
customfield.attr("disabled");
},
'Co-Op': function() {
customfield1.attr("disabled");
},
'Condop': function() {
customfield2.attr("disabled");
}
};
$('#customfields-s-18-s').change(function() {
call_table[this.value]();
});
});
});
And the layout for my form:
<td width="260" class="left">
<label for="customfields-s-18-s">Ownership (Required):</label>
</td>
<td class="right">
<select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" size="" >
<option value="Condominium"> Condominium</option>
<option value="Co-Op"> Co-Op</option>
<option value="Condop"> Condop</option>
</select>
</td>
</tr>
<tr>
<td width="260" class="left">
<label for="customfields-tf-19-tf">Maintenance:</label>
</td>
<td class="right">
<input type="text" title="Maintenance" class="textInput" name="customfields-tf-19-tf" id="customfields-tf-19-tf" size="40"/>
</td>
</tr>
<tr id="newsletter_topics">
<td width="260" class="left">
<label for="customfields-tf-20-tf">Taxes:</label>
</td>
<td class="right">
<input type="text" title="Taxes" class="textInput" name="customfields-tf-20-tf" id="customfields-tf-20-tf" size="40" />
</td>
</tr>
<tr>
<td width="260" class="left">
<label for="customfields-tf-13-tf" class="required">Tax Deductibility:</label>
</td>
<td class="right">
<input type="text" title="Tax Deductibility" class="textInput" name="customfields-tf-13-tf" id="customfields-tf-13-tf" size="40" />
</td>
</tr>
I believe that in order to disable an input you need to use:
$(input).attr("disabled", "disabled");
Also, some of these functions might prove useful for you:
$.fn.enable = function() {
return this.removeAttr('disabled');
}
$.fn.disable = function() {
return this.attr('disabled', 'disabled');
}
$.fn.disenable = function(val) {
if (val)
return this.enable();
else
return this.disable()
}
$.fn.toggleEnabled = function() {
if (this.attr('disabled') == 'disabled')
return this.enable();
else
return this.disable();
}
once they've been defined, you can then use them on any jQuery variable, like so:
$(input).toggleEnabled();