Issue with Javascript creating identical rows with inputs - javascript

I have a table that contains a row. In that row, there is a file input that has been styled to look like a button. I need the user to choose an image, then enter some information about that image in the same row. Once they do that, if they need to add another image, they will click a button that creates a new row, which contains a new file input etc.
The problem that I have is in the JavaScript that creates the new row. The row is created fine. However, I think the issue begins with the file input not having a new id. So, I have attempted to throw it in some sort of loop with a count and then assign that file input the count number on each click of the add row button. I've failed miserably.
Here is a look at the JS:
/* add image */
$(document).ready(function() {
var clicks = 0;
$("#buttons .addimage").live('click', function() {
// Code between here will only run when the a link is clicked and has a name of addimage
$("table#dataTable tr:last").after('<tr><td><input type="checkbox" name="chk"/></td><td><span class="file-wrapper"><input type="file" name="photo" id="photo" /><span class="button">Choose a Photo</span></span></td><td></td><td><select name="imagetype" id="imagetype" class="required"><option value="thumbnail">Thumbnail</option><option value="other">Other</option></select></td></tr>');
return false;
});
});
The HTML Table:
<table id="dataTable">
<!-- All attributes will be sorted alphabetically. Default should be sorted by Status. Errors should be on top -->
<thead>
<tr>
<!-- Table Header -->
<th>Select</th>
<th>File Name</th>
<th>File Size</th>
<th>File Type</th>
</tr>
</thead>
<tbody>
<tr>
<!-- First Record / Dynamically populated/For mock up purposes only -->
<td><input type="checkbox" name="chk" /></td>
<td><span class="file-wrapper"><input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span></span></td>
<td></td>
<td><select name="imagetype" id="imagetype" class="required">
<option value="thumbnail">
Thumbnail
</option>
<option value="other">
Other
</option>
</select></td>
</tr>
</tbody>
So, you'll notice that the JS file doesn't dynamically create a new file input id. How would I go about doing this? Am I thinking about this the right way?

Related

Dynamically add columns to html table and sending input to database

I have a table in an HTML form in which the total columns depends on the user. The additional columns are added with a button click. The rows that come with the added columns are supposed to be array inputs which will be sent to MySQL database once the form is submitted.
I am new at javascript and jquery. I did some search on the internet and found a lot of 'creating HTML tables with dynamic rows/columns' related stuff but none of them were related to having input cells in the rows that came with the dynamic columns and sending them to the database.
I came across this link that gave me a headstart but I am stuck: Dynamic columns - Stack Overflow
In the image above, the columns 'Bus1 kW' etc. are added when a button is clicked, including the button in the screenshot would just make the image unnecessarily longer. The rows to all added columns are supposed to be input fields, the reason I can change the value of those fields is that I enabled 'content editable'. I tried adding input fields that are arrays but when I do so the button that adds columns stops working.
How do I make the rows that come with the dynamic columns to have input fields as arrays so that I can access them in PHP? How do I add this: <input type="text" required="required" name="Bus1_kW[]"> to the rows that come with the dynamic columns in such a way that all rows for column lets say 'Bus1 kW' are stored in an array that I can access in PHP when I submit the form?
Here is the script code that is producing the image above (jquery):
<script type="text/javascript">
var i = 1;
// This part works fine
$("#addColumn").click(function () {
$("tr:first").append("<td>Bus"+i+" kW</td>");
$("tr:not(:first)").append("<td contenteditable="+true+"> </td>");
i = i+1;
});
</script>
This is what I tried to do but it's not working:
<script type="text/javascript">
var i = 1;
// This is what I tried to do but it's not working
$("#addColumn").click(function () {
$("tr:first").append("<td>Bus"+i+" kW</td>");
$("tr:not(:first)").append("<input type="+text+" required="+required+" name="+"Bus"+i+"_kW[]"+">");
i = i+1;
});
</script>
This is the table inside the HTML form:
<table id="busDataTable" class="form-group-sm" border="1">
<tbody>
<tr>
<th>Interval Number</th>
<th>Time Interval (30min)</th>
</tr>
<tr> <td>1</td> <td>0</td> </tr> <!-- -->
<tr> <td>2</td> <td>0.5</td> </tr> <!-- -->
<tr> <td>3</td> <td>1</td> </tr> <!-- -->
<tr> <td>4</td> <td>1.5</td> </tr> <!-- -->
<!-- Table rows continue until 48 rows -->
</tbody> <button id="addColumn">Add Column</button>
</table>
I would appreciate any solution/help, jquery or javascript, I just barely got into javascript and do not know which would be preferred and why between javascript and jquery. Thank you for your time
The button to add rows shouldn't be between the closing tags </tbody> and </table> as this is invalid HTML. I just moved it before the table. I adjusted the append() function by adding a surrounding <td> for the input field and moving all static content (text and required) to the correct place as text and required are no variables.
var i = 1;
$("#addColumn").click(function() {
$("tr:first").append("<td>Bus" + i + " kW</td>");
$("tr:not(:first)").append("<td><input type='text' required='required' name='Bus" + i + "_kW[]'></td>");
i = i + 1;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addColumn">Add Column</button>
<table id="busDataTable" class="form-group-sm" border="1">
<tbody>
<tr>
<th>Interval Number</th>
<th>Time Interval (30min)</th>
</tr>
<tr>
<td>1</td>
<td>0</td>
</tr> <!-- -->
<tr>
<td>2</td>
<td>0.5</td>
</tr> <!-- -->
<tr>
<td>3</td>
<td>1</td>
</tr> <!-- -->
<tr>
<td>4</td>
<td>1.5</td>
</tr> <!-- -->
<!-- Table rows continue until 48 rows -->
</tbody>
</table>

Show / hide columns dynamically using JavaScript does not function

My mission is to appear toggle JavaScript in my DataTables but it seems not function not only the button even the functions.
Here is my Code
HTML
<div class="col-lg-12 col-md-12 col-sm-12 mb-30">
<table class="data-table stripe hover multiple-select-row nowrap" id="example">
<thead>
<tr>
<th class="table-plus datatable-nosort">No</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-plus">1</td>
<td>Michael</td>
<td>123456789</td>
<td>michael#gmail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
JS
<script>
$(function(){
$.fn.bootstrapSwitch.defaults.onColor = 'success';
$.fn.bootstrapSwitch.defaults.offColor = 'danger';
$.fn.bootstrapSwitch.defaults.size = 'mini';
$.fn.bootstrapSwitch.defaults.state = 'false';
$.fn.bootstrapSwitch.defaults.inverse = 'true';
$(".toggle-vis").bootstrapSwitch();
var table = $('#example').DataTable();
$('.toggle-vis').on('switchChange.bootstrapSwitch', function(event, state) {
event.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible( ! column.visible() );
});
});
</script>
I am trying to replicate someones code here JSFiddle unfortunately the toggle is not appear.
There are 3 reasons that I see on why it isn't running like the one you're copying.
first: The original author included links that needed for it to works. He added it in the jsfiddle left side Resources url.
second: The original author included input elements in his codes that became the toggle buttons.
third: In the original author input:checkbox he included data-label-text="Position" which the value should be equal to your column number that starts with 0.
so if you wish to used the whole functions of the author's code, You need to see every details on how it is going to work.
You can check this jsfiddle https://jsfiddle.net/u9h5k048/10/
this is the link you need to add in jsfiddle resources
https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js
https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js
you should add the toggle-vis element
<input
type="checkbox"
data-column="0"
class="toggle-vis"
data-label-text="ID"
checked/>
<input
type="checkbox"
data-column="1"
class="toggle-vis"
data-label-text="Name"
checked>
<input
type="checkbox"
data-column="2"
class="toggle-vis"
data-label-text="Position"
checked/>

How to take the Dynamic-table cell value in JavaScript

This is a table of one of my jsp page. I want to take the selected value of the column empId for a javascript method.
<table class="table table-bordered">
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Casual Leave Balance</th>
<th>Annual Leave Balance</th>
<th>Sick Leave Balance</th>
</tr>
</thead>
<tbody>
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td><dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev></td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
</tbody>
</table>
my javascript code segment
function selectempId(emp){
alert(emp);
}
But It (onclick) doesn't work. There are only methods to get selected values of dynamic dropdowns. Please tell me how to do this.
Thank you.
<dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev>
You don't need ()
You can pass value to javascript. But I don't know the dev tag in html. I think it is div.
<td><div class="correct" name="empId" onclick="selectempId(${leavebalances.empId})"> ${leavebalances.empId}</div></td>
Or you can pass to td's onclick action.
<td onclick="selectempId(${leavebalances.empId})">${leavebalances.empId}</td>
Here, my problem was being unable to pass td's values to javascript function, because there were no unique id's assigned for required td tags (dynamic table). So I gave dynamic ids.
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td id ="${leavebalances.empId}" class="correct" name="empId" onclick="selectEmpId(this.id)">${leavebalances.empId}</td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
/////////////////////javascript function///////////////////////////////
function selectEmpId(val) {
alert(val);
}

jQuery Select Checkbox When Text Exists, Hide Unselected Rows from Print

I have a dynamically generated table that contains a checkbox for each row, some data, and a text input field.
I want to automatically check the checkbox for a selected row once text is entered in that row's textbox. Finally, when the 'Finish' button is pressed, I want any unselected rows to be hidden from printing. Final output will be the table containing only the selected rows (i.e. those with a check in the checkbox) and their values.
Here's the css print class to hide the unselected rows:
<style type="text/css" media="print">
.grid .hidden tr {
display:none;
}
</style>
Here's the HTML:
<table id="data" class="grid">
<thead>
<tr>
<th> </th>
<th>Part Number</th>
<th>Description</th>
<th>Qty to Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check"></td>
<td>1234</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>3454</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>6787</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
</tbody>
</table>
<button id="clicker">Finish</button>
Finally, here's the jQuery. This is selecting all the checkboxes when text is entered in a text field, not just the one for that row (which I don't understand), and not assigning the "hidden" class to the rows without a checkbox - the class is not being assigned at all.
$(document).ready(function() {
//Check for input in text field
$('#data > tbody > tr').each(function() {
$(".inputData").change(function() {
if ($(this).val().length > 0) {
$(".check").prop("checked",true);
} else {
$("tr").addClass("hidden");
}
});
});
$("#clicker").click(function() {
window.print();
return false;
});
});
</script>
My logic in constructing this was to make sure we're only selecting rows in the table with an id of data. The first function will iterate over each row looking at the text field, and if the length of that field is greater than 0, check the box. Otherwise, assign the class of "hidden", which will prevent it from printing. Finally, simply assign a click event to the button.
Any help is greatly appreciated.
Here's a jsFiddle
This checks or unchecks the appropriate box based on whether the input has a value:
$(".inputData").on('input', function () {
var checkbox= $(this).closest('tr').find('[type="checkbox"]');
checkbox.prop('checked', $(this).val());
});
It doesn't need to be within an each() method.
This hides all rows in which the checkboxes are not checked:
$('[type="checkbox"]:not(:checked)').closest('tr').hide();
It makes sense to put that within the $("#clicker").click() function.
Updated Fiddle

Datatable's row click call javascript function using JQuery

Table contains 2 columns. each column have form elements like text box and dropdown box. what i want is , when i click the row i have to call javascript function. My problem is, when i enter value in textbox or select value from dropdown that time also javascript function has called. How to prevent this. i dont want to fire the javascript function when entering text box and select the value from dropdown.
jQuery("#testParam tbody tr").on("click", function(event) {
var position = paramTable.fnGetPosition(this); // getting the clicked row position
//alert(position);
createTable();
});
function createTable(){
alert("clicked");
}
<table id="testParam">
<thead>
<tr>
<th class="no-sort">
Name
</th>
<th class="no-sort">
Type
</th>
</tr>
</thead>
<tbody>
<tr id="paramRow1">
<td><g:textField name="name1" id="name1" required="" value="${testName}" /></td>
<td><g:select name="type1" noSelection="['':'-Select-']"
id="type1"
from="${testParameterInstance?.constraints?.type?.inList}"
required="" value="${testParameterInstance?.type}"
valueMessagePrefix="testParameter.type" /></td>
</tr>
</tbody>
</table>
try this way
$('#name1,#type1').on('click',function(event){
event.stopPropagation();
});
Happy Coding :)

Categories