newTextBoxDiv.html(
'<td border="2">'+number+'</td>'+
'<td>'+grouptext+'</td>'+
'<td style="display:none">'+groupVal+'</td>'+
'<td>'+itemText+'</td>'+
'<td style="display:none">'+itemId+'</td>'+
'<td>'+cuttingText+'</td>'+
'<td style="display:none">'+cuttingId+'</td>'+
'<td>
<input type="text" class="ui-state-default ui-corner-all"
name="textbox' + counter + '" id="textbox' + counter + '" value="" size="13" />
</td>'+
'<td> <input type="checkbox" name="samples"/> </td>'+
'<td>
<input type="text" class="ui-state-default ui-corner-all" size="8"
name="textbox' + counter +'" id="textbox1' + counter + '" value="" size="13" />
</td>'
);
newTextBoxDiv.appendTo("#example");
Now how can i get the check box true false values please help me
after the edit by #Daff it seems like you can use the below code...
$("#example").on("click",function(){
var val = $(this).find(":checkbox[name='samples']").val();
});
Later within the same block of code:
var isChecked = newTextBoxDiv.find('input[name="samples"]').is(':checked');
Or, in another context:
var isChecked = jQuery('#example').find('input[name="samples"]').is(':checked');
Make use of .is(':checked') it returns boolean
$('input[type="checkbox"][name="samples"]').click(function(){
alert($(this).is(':checked'));
});
fiddle : http://jsfiddle.net/2jZM2/1/
Try this...
$(':checkbox',newTextBoxDiv).each(function(){
alert($(this).attr('checked'));
})
Related
I want to open 3 row defult after addrow and remove row and apply remove defult 3 row using javascript
please share valuable idea sir
I have need example:-
$(document).ready(function (){
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
});
You can wrap the function in a for loop and edit the for loop limit according to your needs.
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var rows = $(".jdr1").length;
var limit = 1;
// In the first click append 3 rows, then 1 row per click
if (rows < 3) limit = 3;
for (let i=0; i<limit; i++) {
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
}
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<table id="table-details"></table>
<button class="btn-add-more">Add Rows</button>
</html>
i have add dynamic row using jquery now i want to add those column of the row. Down below is my code i am not able to add the column that is created dynamically.the first textbox is calculated and answer is displayed in grandtotal textbox but the rest textbox cannot be calculated.
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="a" class="form-control a" />
</td>
<td>
<input type="text" name="b" class="form-control b" />
</td>
<td>
<input type="text" name="c" class="form-control c" />
</td>
<td>
<input type="text" name="d" class="form-control d" />
</td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Grand-Total</td>
<td>
<input data-val="true" id="grdtol1" name="grdtol1" value="" class="form-control text-box single-line" type="text">
</td>
<td>
<input data-val="true" id="grdtol" name="grdtol2" value="" class="form-control text-box single-line" type="text">
</tr>
</tfoot>
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
$(document).ready(function (e) {
$("input").change(function () {
var grdtol1 = 0;
$("input[name=c]").each(function () {
grdtol1 = grdtol1 +parseInt( $(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
});
})
First, a piece of advice, don't create multiple $(document).ready() functions in the same javascript file, you just need one.
You haven't post your html code, so I'm guessing here, but I suppose you initially have row with the inputs and you also have an input with name="grdtol1" where you want to calculate the sum of the values of the column, and it has to refresh when you change the value in any of the inputs.
According to that, I see this problems...
You need to use event delegation for the input onchange event (like you do for the .deleteContact button). You're associating the event directly, so it only applies to the elements that are in the DOM when the page loads, and not for the rows you add dinamically. You can associate the event to the table and delegate it to the input, for example.
Inside of the event, you're selecting $("input[name=c]"), but according to the previous code, your inputs will have name="c' + rowCount + '". You chould use the class to select them.
If you delete one row, you should also recalculate the sum, because the input of that row will disappear.
Putting all together...
$(document).ready(function () {
$(document).on("click",".classAdd",function() {
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
function calculateGrandtotal() {
var grdtol1 = 0;
$('input.c').each(function() {
grdtol1 += parseInt($(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
}
$('#maintable').on('click','.deleteContact',function () {
$(this).closest('tr').remove();
calculateGrandtotal()
})
.on('change','input.c',function() {
calculateGrandtotal()
});
});
I hope it helps
Hello I am trying to add a result of a checkbox into my array to add to a database when submitted.
Another user kindly changed my original code but I can't work out how to add the result of my checkbox to my array.
It now shows on the screen properly but I cant get it to copy to a field to be able to save the field to my database so that when I open the page again it will then load from the database and show if it is overtime on my hours recorded.
I want to save a Value of checked = Y and when not checked = N to the array I think I might need to copy the value to a hidden field but I can't get it to work.
<!-- this next section is to dynamically add the parts fields to the jobsheet page so more parts can be added on the page without it starting out too large. -->
<!-- this ext section is the Adding Hours on the jobsheet -->
var rownumhours = 0;
function addhours(obj, e) {
rownumhours++;
var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[' + rownumhours + ']" size="4" value="' +
$(obj).closest('span.headings').find('[name="add_start"]').val() + '"> Finish Time: <input type="time" name="add_finish[' + rownumhours + ']" value="' +
$(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[' + rownumhours + ']" value="' +
$(obj).closest('span.headings').find('[name="add_date"]').val() + '"> Overtime: <input type="checkbox" name="add_overtime_hours[' + rownumhours + ']" size="1" value="' +
$(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"' + Overtime: <input type="checkbox" name="add_overtime_hours[' + rownumhours + ']" size="1" value="' +
(($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '1') +
$(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"> <input type="button" value="Remove" onclick="removeRow(' +
rownumhours + ');"></p>';
jQuery('#hoursrow').append(hoursrow);
}
function removeRow(rnum) {
jQuery('#rownumhours' + rnum).remove();
}
</script>
Hello I finally finished the solution to my problem.
I have split the jobs out by showing the Checkbox and then also having a hidden text box of the same name that contains a value of either 1 or 0 and then this is the value i put into the Mysql Database.
var rownumhours = 0;
function addhours(obj, e) {
var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[]" size="4" value="' +
$(obj).closest('span.headings').find('[name="add_start"]').val() + '"> Finish Time: <input type="time" name="add_finish[]" value="' +
$(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[]" value="' +
$(obj).closest('span.headings').find('[name="add_date"]').val() + '"> <input type="hidden" name="show_overtime_hours[]" size="1" value="' +
(($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? '1' : '0' ) + '"> Overtime: <input type="checkbox" name="add_overtime_hours[]" size="1" value="' +
$(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"' +
(($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '') +
' "> <input type="button" value="Remove" onclick="removeRow(' +
rownumhours + ');"></p>';
jQuery('#hoursrow').append(hoursrow);
rownumhours++;
$(obj).closest('span.headings').find('[name="add_start"]').val("");
$(obj).closest('span.headings').find('[name="add_finish"]').val("");
$(obj).closest('span.headings').find('[name="add_date"]').val("");
$(obj).closest('span.headings').find('[name="show_overtime_hours"]').val("");
$(obj).closest('span.headings').find('[name="add_overtime_hours"]').removeAttr('checked');
}
function removeRow(rnum) {
jQuery('#rownumhours' + rnum).remove();
}
</script>
var disabled = '';
if(value.action.length === 0)
{
disabled = 'disabled="disabled"';
}
row += '<td><input type="checkbox" name="create" value="1" class="checkbox" data-action="'+ value.action + '" data-controller = "'+ value.controller +'" data-role="'+ role +'" document.write(disabled)></td>';
I want to print disabled="disabled" based on the truthfulness of my condition. In PHP this can be easily done by the method I used above but I failed to to it in JavaScript. The document.write() is getting printed as it is.
How can I do this in JavaScript?
You don't need document.write. Just like this:
if(value.action.length === 0)
{
disabled = 'disabled="disabled"';
}else{
disable = '';
}
row += '<td><input type="checkbox" name="create" value="1" class="checkbox" data-action="'+ value.action + '" data-controller = "'+ value.controller +'" data-role="'+ role +'" '+ disabled +'></td>';
i recieve this error when i launching my javascript below:
if(isPartOfIndex(new Array[25,20], indexClaimTypeRow) ){
//display size
listItem = '<li id="soze" data-theme="c"><h3>Size:</h3>' +
'<div data-role="fieldcontain" data-theme="c">' +
'<fieldset data-role="controlgroup" data-type="horizontal" id="recieptVat">' +
'<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1.0" />' +
'<label for="radio-choice-1">1.0</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-2" value="1.4" />' +
'<label for="radio-choice-2">1.4</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-3" value="2.0" />' +
'<label for="radio-choice-3">2.0</label>' +
'</fieldset>' +
'</div>' +
'</li>';
$('#itemFieldslist').append(listItem);
$('#itemFieldslist').listview('refresh');
}
The error message displayed is:
TypeError: 'undefined' is not a constructor (evaluating 'new
Array[25,20]')
here is the isPartOfindex which expects an array as the first parameter
function isPartOfIndex(indexRow, indexType){
for(var i = 0; i < indexRow.length; i++){
if(indexRow[i] == indexType){
return true;
}
}
return false;
}
What am i doing wrong?
Thanks
Should be new Array(25, 20) or just [25, 20]
you need to change your code to:
if(isPartOfIndex(new Array(25,20), indexClaimTypeRow) ){
//display size
listItem = '<li id="soze" data-theme="c"><h3>Size:</h3>' +
'<div data-role="fieldcontain" data-theme="c">' +
'<fieldset data-role="controlgroup" data-type="horizontal" id="recieptVat">' +
'<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1.0" />' +
'<label for="radio-choice-1">1.0</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-2" value="1.4" />' +
'<label for="radio-choice-2">1.4</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-3" value="2.0" />' +
'<label for="radio-choice-3">2.0</label>' +
'</fieldset>' +
'</div>' +
'</li>';
$('#itemFieldslist').append(listItem);
$('#itemFieldslist').listview('refresh');
}
new Array[25,20] is not proper declaration for your array.
Just need [20, 25] instead of new Array[20, 25]. You also can use new Array(20, 25)