I want to display contact information by choosing different checkbox, like this picture:
Here is my code:
$(document).ready(function() {
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
$(this).closest('div').css("display", "block");
});
});
.receipt_info{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<td>
<input type="checkbox" name="receipt[]"/>
</td>
<td>Option1
<div class="receipt_info">
<div>
<label>name1</label>
</div>
<div>
<label>phone1</label>
</div>
<div>
<label>address1</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="receipt[]"/>
</td>
<td>Option2
<div class="receipt_info">
<div>
<label>name2</label>
</div>
<div>
<label>phone2</label>
</div>
<div>
<label>address2</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
I think I'm selecting wrong div, but I don't know how to fix it.
Through your div and the checkbox are seperated by td you should use jQuerys parents to get the parent tr and from there start searching for the corresponding receipt_info.
Like so:
$(this).parents('tr').find('.receipt_info').show();
I edited your jsfiddle here.
Try this,
You need to first find the parent tr in which the required div is,
$(document).ready(function() {
$('input[type=checkbox]').on('change', function() {
if ($(this).is(':checked')) {
$(this).closest('tr').find('div.receipt_info').css("display", "block");
}
else
{
$(this).closest('tr').find('div.receipt_info').css("display", "none");
}
});
});
Fiddle : https://jsfiddle.net/9n9pfhe5/1/
Use $(this).closest('tr').find('div.receipt_info') selector!
this refers to element on which event is invoked.
jQuery.closest will traverse up in DOMTree and returned matched element.
jQuery.find will find all the child of he current element.
$(document).ready(function() {
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
$('.receipt_info').hide();
$(this).closest('tr').find('div.receipt_info').show();
});
});
.receipt_info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<td>
<input type="checkbox" name="receipt[]" />
</td>
<td>Option1
<div class="receipt_info">
<div>
<label>name1</label>
</div>
<div>
<label>phone1</label>
</div>
<div>
<label>address1</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="receipt[]" />
</td>
<td>Option2
<div class="receipt_info">
<div>
<label>name2</label>
</div>
<div>
<label>phone2</label>
</div>
<div>
<label>address2</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Related
I would like to have a table which some of rows include another tables. My html file is as:
HTML: Updated after answers
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two tables:</h2>
<table>
<tr>
<th>Name:</th>
<td>Rows including tables</td>
</tr>
<tr>
<th rowspan="4">Telephone:</th>
<td>row1 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>row3 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr class="red">
<td>
<div class='redTable'>
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS:
#mouse { cursor: pointer; }
.fieldsetContainer { height: 0;overflow: hidden;transition: height 400ms linear; }
#toggle { display: none; }
#toggle:checked~.fieldsetContainer { height: auto; }
label .arrow-dn { display: inline-block; }
label .arrow-up { display: none; }
#toggle:checked~label .arrow-dn { display: none; }
#toggle:checked~label .arrow-up { display: inline-block; }
But the problem is that the second collapsing does not work, it makes collapse the second first row rather than the second one.
I searched through the Internet about the problem, but I failed. How I could handle the problem?
By the way, I have added the complete code here in jsfiddle.
Update:
thanks a lot for your great answers. Well as you mentioned I should change the id's and for attribute of <label> which they should be unique. But not problem for is that I have thousands of such a tables and then I could not do it manually. I wonder if you please let me know if I could do systematically via CSS or JS. I will add them to the XSLT file. I can Thanks a lot again for your comments!
here is some lines from xslt file, related to the main point.
<tr class="yellow">
<td>
<div id="yellowTable">
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
<tr class="red">
<td>
<div id="redTable">
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
(I have deleted end tags because of saving long question.)
Update2:
I am attaching JavaScript code for assigning id's and attribute for as I've mentioned above.
JS:
function assignIdAndForAttribute()
{
var redTable= document.getElementById("redTable");
var redInputTag = redTable.getElementsByTagName("input");
var redLabelTag = redTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableError.length; i++) {
redInputTag [i].setAttribute("id", 'toggleRed' + i);
redLabelTag [i].setAttribute("for", 'toggleRed' + i);
}
//]]>
var yellowTable = document.getElementById("detailedTable");
var yellowInputTag = yellowTable.getElementsByTagName("input");
var yellowLabelTag = yellowTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableWarning.length; i++) {
yellowInputTag [i].setAttribute("id", 'toggleyellow' + i);
yellowLabelTag [i].setAttribute("for", 'toggleyellow' + i);
}
//]]>
}
The error stems from the fact that you are using ids which are supposed to be unique. If you change toggle to a class instead of id, and update your css from #toggle to .toggle you'll almost have it.
If you don't hide the input.toggle elements at that point, you'll see it working fine.
The labels' for attribute will also need to be updated so you can interact with the label when you hine the input. Just use a unique id on each toggle to place in the for attribute of the label and use a class for styling and functionality.
You have set two ids that are "toggle" and both labels for "toggle". Change them to something else:
<input type="checkbox" class="toggle" id="toggle2"/>
DEMO
To achieve expected result, use below option
Use same class instead of same id for toggle (as id has to be unique)
Use Opacity:0 instead of display:none (as it will be not available on DOM for events)
HTML:
<input type="checkbox" class="toggle" />
CSS:
.toggle {
opacity:0
}
.toggle:checked~.fieldsetContainer {
height: auto;
}
.toggle:checked~label .arrow-dn {
display: none;
}
.toggle:checked~label .arrow-up {
display: inline-block;
}
https://jsfiddle.net/Nagasai_Aytha/juoy75rg/84/
HTML:
<tr>
<td>
<div class="input">
<p>Room 1: </p>
</div>
</td>
<td>
<div class="revenue-input">
<input type="number" min="0" id="room1rev" size="1" placeholder="0">
</div>
</td>
<td>
<button id="btn-del-rev" class="btn-del">-</button>
</td>
</tr>
<tr>
<td>
<div class="input">
<p>Room 2: </p>
</div>
</td>
<td >
<div class="revenue-input">
<input type="number" min="0" id="room2rev" size="1" placeholder="0">
</div>
</td>
<td>
<button id="btn-del-rev" class="btn-del">-</button>
</td>
</tr>
jQuery:
<!-- Delete Element -->
<script>
$(document).ready(function() {
$("#btn-del-rev").click(function() {
$(this).parent().parent().remove()
});
});
</script>
When the button with the #btn-del-rev id is clicked it removes the entire tr structure (parent, etc.) However, clicking the same button on the next row doesn't remove the next tr.
I understand that it's a problem with reusing an id, but I'm having a hard time figuring out how to have the button work across all tr that I want deleted without creating a unique id, and redundant jQuery code.
Any help is appreciated!
An ID must be unique !
Change or remove the ID attribute in your HTML
<button class="btn-del">-</button>
And use the .class attribute instead
$(".btn-del").click(function() {
By the way, instead of .parent().parent(), you should use .closest()
$(this).closest('tr').remove()
get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
jQuery Closest documentation
ID's can't be repeated in a page, they are unique by definition.
You need to change that to a class instead
You're using IDs and for multiple buttons you should use CLASS names. So you better transform that btn-del-rev to a class.
The IDs must be unique, so you may change them to class.
In order to remove only the parent div you need to change this line:
$(this).parent().parent().remove()
to:
$(this).closest('tr').find('div.revenue-input').remove()
The .closest('tr') selects the parent row, while the find selects the div.
The snippet:
$(document).ready(function () {
$(".btn-del-rev").click(function () {
$(this).closest('tr').find('div.revenue-input').remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<div class="input">
<p>Room 1: </p>
</div>
</td>
<td>
<div class="revenue-input">
<input type="number" min="0" id="room1rev" size="1" placeholder="0">
</div>
</td>
<td>
<button class="btn-del-rev btn-del">-</button>
</td>
</tr>
<tr>
<td>
<div class="input">
<p>Room 2: </p>
</div>
</td>
<td>
<div class="revenue-input">
<input type="number" min="0" id="room2rev" size="1" placeholder="0">
</div>
</td>
<td>
<button class="btn-del-rev btn-del">-</button>
</td>
</tr>
</tbody>
</table>
Make the id a class
<button class="btn-del-rev btn-del">-</button>
Use the class, then get closest row
$(document).ready(function() {
$(".btn-del-rev").on('click',function() {
$(this).closest("tr").remove();
});
});
I am trying to find all form input elements and iterate through them, unfortunately Each iterator do not work. I have checked the $inputs variable and it has 5 elements in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page - My ASP.NET MVC Application</title>
<script src="/Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<script>
$(document).on('click', '#test-endpoint', function () {
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function () {
//The code never executed
});
}
</script>
<form action="http://do.convertapi.com/Word2Pdf" method="post" accept-charset="utf-8" enctype="multipart/form-data" id="test-form">
<input type="button" name="submitButton" id="test-endpoint" value="Submit1">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Endpoints</h3>
</div>
<div class="panel-body">
POST http://do.convertapi.com/Word2Pdf
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Authentication</h3>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Authentication</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>ApiKey</strong>
<p>Optional</p>
</td>
<td>
<strong>String</strong>
<p>API Key should be passed if you purchased membership with credits. Please login to your control panel to find out your API Key http://www.convertapi.com/a</p>
</td>
<td>
<input type="text" name="ApiKey" placeholder="Optional">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Parameters</h3>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>File</strong>
<p>Required</p>
</td>
<td>
<strong>Binary</strong>
<p>Supported source file formats.</p>
</td>
<td>
<input type="file" name="File">
</td>
</tr>
<tr>
<td>
<strong>DocumentTitle</strong>
<p>Optional</p>
</td>
<td>
<strong>String</strong>
<p>Set the title of the generated Pdf file. If value is not set a source document title is used instead.</p>
</td>
<td>
<input type="text" name="DocumentTitle" placeholder="Optional">
</td>
</tr>
<tr>
<td>
<strong>DocumentSubject</strong>
<p>Optional</p>
</td>
<td>
<strong>String</strong>
<p>Set the subject of the generated Pdf file. If value is not set a source document subject is used instead.</p>
</td>
<td>
<input type="text" name="DocumentSubject" placeholder="Optional">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Output</h3>
</div>
<div id="test-output" class="panel-body">
</div>
</div>
</form>
</body>
</html>
I use jQuery 1.9.1
Try surrounding it with $(document).ready(), like:
$(document).ready( function() {
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function () {
//The code never executed
});
});
Probably your elements do not exist when you call the .each?
You have a missing )
$(document).on('click', '#test-endpoint', function () {
var $form = $'#test-form');
var $inputs = $form.find('input, textarea');
console.log($inputs.get());
$inputs.each(function () {
console.log(this)
//The code never executed
});
});//missing ) here
Demo: Fiddle
Your code as quoted has a syntax error, I can't see how you would ever see $inputs having anything:
$(document).on('click', '#test-endpoint', function () {
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function () {
alert("Got: " + this.tagName);
});
} // <================= Missing ); here
Here's your original code live, which doesn't work.
Here's a copy with ); added, which does work.
In your web console, there will be an error:
Uncaught SyntaxError: Unexpected end of input
Here is the full code:
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function ( idx, value) {
//The code never executed
});
Tried to get the text box value and display into the h3 element in above the textbox field
Here is my HTML Code :
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to get the input field value <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]"> and display the value into the "
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">"**Here the text box value"</strong> </h3>
" on blur function and this was dynamic text box
My Jquery :
$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});
I added an id attribute to the h3 where you want to display it and use that as reference on the blur event callback: DEMO HERE
HTML
<strong class="attribute_name" id="output">**Here Text box value should be displayed**</strong> </h3>
jQuery
$("input").blur(function () {
var string = $(this).val();
$('#output').html(string);
});
See a working demo here: http://jsfiddle.net/wPCZ5/
You need to do this in your handler:
$(this).closest('div').find('h3 > strong').html(string);
for all text boxes to work. The closest() call looks up the DOM hierarchy and returns the first matching element. In your case, it is the accordion div. The find() call then looks down the DOM hierarchy for the matching element. Finally html() replaces the current HTML within the element with the supplied string. Your original call to append() would add the string to whatever is already present.
There's a working fiddle here: http://jsfiddle.net/u63CU/ but I think you should not reuse class and ID names like you have. It can lead to many undesired results, as jquery selects by id or class name.
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong id="text-value" class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
$( "#attribute_name" ).blur(function() {
var string = $(this).val();
$('#text-value').text(string);
});
try something like this
$( "input" ).blur(function() {
$(this).closest('strong.attribute_name').text(this.value);
});
If you want to place text box value in place of **Here Text box value should be displayed**, please try this:
$( "input" ).blur(function() {
var string = $(this).val();
$(".attribute_name").text(string);
});
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
How can i use jQuery/Javacript to find link with "abc" inside #name div of #posts table.
and after locating it (the link with abc). jQuery will add html content to #post-content #load div of that table that has link with "abc" inside ,using the html(); function in jQuery.
that means after adding my code will look like this :
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
Some stuff is added here using html()
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
while the #name with no link with "abc" which is the link with "user2" will not be affected or modifeid.
How can i do this?
I hope you understand.
Assuming you fix the html and use classes:
$('.name a[href*="abc"]').closest('tr').find('.load').html('Some stuff is added here using html()');
Find a tag with href containing 'abc'
Get parent tr
Find #postcontent >#load within this element
var x = $('a[href*="abc"]');
var b = x.parents('tr');
var c = b.find('#post-content > #load');
alert(c.html());