Add and Remove textbox in table using Javascript error - javascript

I want to add and remove textbox in table.
I did add textbox in table.
Am confused to remove textbox in table.
This is my code:
$(function () {
$('.more').on('click', function () {
var $table = $('#input_fields');
var $tr = $table.find('tr').eq(0).clone();
$tr.appendTo($table).find('input').val('');
});
});
$(function () {
$('.delete').on('click', function () {
});
});
.delete{color:#ff0000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
<td> <span class='delete'>Delete</span></td>
</tr>
</table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />
This is my sample code link: https://jsfiddle.net/vo9j2LcL/
Please help me to remove function

Use event delegation to listen the click event on a dynamically generated element.
$(function() {
// cache the table reference
var $table = $('#input_fields');
// keep a cloned copy to generate new
var $tr = $table.find('tr').eq(0).clone();
$('.more').on('click', function() {
// clone to generate new and then append
$tr.clone().appendTo($table).find('input').val('');
});
// set click event handler
$table.on('click', '.delete', function() {
// check number of tr
if ($('#input_fields').find('tr').length > 1) {
// remove the tr corresponds to clicked element
$(this).closest('tr').remove();
}
});
});
.delete {
color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
<td> <span class='delete'>Delete</span></td>
</tr>
</table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />

Related

Set focus to next input field in a table after maxlength reached

How to set focus to next input field in a table?
Firstly I worked with that JQuery code: But it only works if the input fields are not spread over different and fields. How could I improve it that code or maybe someone knows a JS code that will work for autofocus fields spread over td and tr fields following tabindex?
<script>
$(document).ready(function(){
$('input').keyup(function(){
if(this.value.length==$(this).attr("maxlength")){
$(this).next().focus();
}
});
});
</script>
My html:
<table>
<tr>
<td><input type="text" id="field1" tabindex="1" name="test1" maxlength = "1"></td>
<td><input type="text" id="field2" tabindex="2" name="test2" maxlength = "1">.</td>
</tr>
<tr><td><input type="text" id="field3" tabindex="3" name="test3" maxlength = "1"></td></tr>
</table>
To do what you require you can retrieve all input elements and get the index of the current one within that collection. To move to the next input, select it from the collection using eq() and the next incremental index value.
Also note that your HTML is invalid - you seem to be missing a <tr> around the final td. I've corrected that in the following example:
jQuery($ => {
let $inputs = $('input').on('input', e => {
let $input = $(e.target);
let index = $inputs.index($input);
if ($input.val().length === $input.prop('maxlength')) {
$inputs.eq(index + 1).focus();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" id="field1" tabindex="1" name="test1" maxlength="1"></td>
<td><input type="text" id="field2" tabindex="2" name="test2" maxlength="1">.</td>
</tr>
<tr>
<td><input type="text" id="field3" tabindex="3" name="test3" maxlength="1"></td>
</tr>
</table>
It's pretty gross, but would work lol
$(document).ready(function(){
$('table input').keyup(function(){
if(this.value.length==$(this).attr("maxlength")){
tableInputs = $('table').find('input');
$(tableInputs[tableInputs.index(this)+1]).focus();
}
});
});

Click function is not working after changing the class

I'm creating a basic image upload script, when i click on case-img1, it basically trigger file input that is hidden, after selecting the file, it changes next div(case-img2) class(img-upload-enable) to allow choosing next file, But when i click on the div after changing the class it doesnt work
<table id="choose-photos-tb">
<tr>
<td><div id="case-img1" class="img-upload-enable">+</div></td>
<td><div id="case-img2" class="img-upload-disable">+</div></td>
<td><div id="case-img3" class="img-upload-disable">+</div></td>
<td><div id="case-img4" class="img-upload-disable">+</div></td>
<div id="case-image-inputs">
<input type="file" name="case_img1" id="case_img1" accept="image/*">
<input type="file" name="case_img2" id="case_img2" accept="image/*">
<input type="file" name="case_img3" id="case_img3" accept="image/*">
<input type="file" name="case_img4" id="case_img4" accept="image/*">
</div>
</tr>
</table>
Here is the Jquery Code
$(document).ready(function () {
$(document.body).on('click', '.img-upload-enable', function(){
var id = $(this).attr("id");
if (id == "case-img1"){
$('#case_img1').trigger('click');
$("#case_img1").change(function() {
$('#case-img2').attr("class", "img-upload-enable");
});
}
});
});
The problem in your logic is because after the first cycle the condition: id == "case-img1" is never true.
You can fix this and improve the DRYness of the logic by using common classes. You can then relate each file trigger to the file input by their indexes.
Also note that your HTML is invalid; the div cannot be a child of the tr. It needs to be within its own cell.
With all that said, try this:
$(document).ready(function() {
var $triggers = $('.case-img-trigger');
var $inputs = $('.case_img');
$(document).on('click', '.img-upload-enable', function() {
var index = $triggers.index(this);
var $target = $inputs.eq(index).trigger('click');
});
$inputs.on('change', function() {
var index = $inputs.index(this);
$triggers.eq(index + 1).toggleClass('img-upload-disable img-upload-enable');
});
});
.case-img-trigger {
display: inline-block;
}
.img-upload-enable {
border: 1px solid #C00;
padding: 0 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="choose-photos-tb">
<tr>
<td>
<div class="case-img-trigger img-upload-enable">+</div>
<div class="case-img-trigger img-upload-disable">+</div>
<div class="case-img-trigger img-upload-disable">+</div>
<div class="case-img-trigger img-upload-disable">+</div>
</td>
</tr>
<tr>
<td>
<div id="case-image-inputs">
<input type="file" name="case_img1" class="case_img" accept="image/*" />
<input type="file" name="case_img2" class="case_img" accept="image/*" />
<input type="file" name="case_img3" class="case_img" accept="image/*" />
<input type="file" name="case_img4" class="case_img" accept="image/*" />
</div>
</td>
</tr>
</table>
You could make use of tying together both the right file select field, and the next button to enable using data-* attributes and use these to trigger the click, and change the classes.
$(document.body).on('click', '.img-upload-enable', function(){
var id = $(this).data("upload");
$(id).trigger("click");
});
$(document.body).on("change","input[type=file]",function(){
var id = $(this).data("next");
$(".img-upload-enable").removeClass("img-upload-enable").addClass("img-upload-disable")
$(id).removeClass("img-upload-disable").addClass("img-upload-enable");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="choose-photos-tb">
<tr>
<td><div id="case-img1" class="img-upload-enable" data-upload="#case_img1">+</div></td>
<td><div id="case-img2" class="img-upload-disable" data-upload="#case_img2">+</div></td>
<td><div id="case-img3" class="img-upload-disable" data-upload="#case_img3">+</div></td>
<td><div id="case-img4" class="img-upload-disable" data-upload="#case_img4">+</div></td>
<div id="case-image-inputs">
<input type="file" name="case_img1" id="case_img1" accept="image/*" data-next="#case-img2">
<input type="file" name="case_img2" id="case_img2" accept="image/*" data-next="#case-img3">
<input type="file" name="case_img3" id="case_img3" accept="image/*" data-next="#case-img4">
<input type="file" name="case_img4" id="case_img4" accept="image/*">
</div>
</tr>
</table>

Disable input in table row if one of input filled

I have javascript code to disable other inputs if one is filled .
I need it in table that comes out of database.
The sad thing is that it only works with first table row and disable all inputs in table (but if input filled is not first nothing happens)
Javascript:
$(function(){
$("input").on("keyup", function(){
if($(this).hasClass("inputA") && $(".inputA").val()){
$("input.inputB").prop("disabled", true);
$("input.inputA").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputB") && $(".inputB").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputC") && $(".inputC").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", true);
$("input.inputC").prop("disabled", false);
} else {
$(".inputA, .inputB").prop("disabled", false);
}
});
});
My td from html table:
<td><input type="text" class="inputA" value=""></td>
<td><input type="text" class="inputB" value=""></td>
<td><input type="text" class="inputC" value=""></td>
How to make it work for each line separated?
Use the same class on each input, create event on those input after that check the value of the input if she's not empty disable all of others input for this works in a line just select all input of the parent.
Try to avoid multiple test as you did. Not lisible and maintainable.
Example
$(".input").on("keypress change keyup",function(){
if($(this).val() != "")
{
$(this).parent().parent().find(".input").not($(this)).prop("disabled",true);
}
else
{
$(this).parent().parent().find(".input").prop("disabled",false);
}
});
.input:disabled{
background-color:LightBlue;
border:solid 1px blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
</table>
This solves your issue! Disable all input fields that doesn't have same class as the one being currently edited.
Demo: https://jsfiddle.net/3tf8ou3y/1/
jQuery(document).ready(function($) {
$("tr").on("keyup", "input", function(event) {
// get the current row
var $row = $(event.delegateTarget);
// get the class of the input field being edited
var this_class = $(this).attr('class');
if ($(this).val().length > 0) {
// if the input field has a value, disable all
// other input fields in the sam row
$('input:not(.'+this_class+')', $row).prop('disabled', true);
} else {
// else enable all input fields
$('input', $row).prop('disabled', false);
}
});
});
You can use 'jQuery(this).val()' instead of 'jQuery(".inputA").val()' or 'jQuery(".inputB").val()' or jQuery(".inputC").val()

$.getJSON in not returning values to respective textbox

In my code im using more than one text box to do an event that is if the user enters the code in a text box and onchange event the getJSON should retrieve the code description from the database but i hope there is small problem in my logic so it is not retrieving the code description from database, any one could please help me my code is
<script type="text/javascript">
$( document ).ready(function() {
$(".txtIEcode").each(function(i, el) {
var $el = $(el),
$desc = $el.parent().next('td').find(".txtIEdesc");
$el.on('change', function(){
alert($desc.val());
$.getJSON("ieCodedetails.jsp", {codeid: $el.val()},displayResult);
function displayResult(data) {
if (data.error) { // emp not found
$desc.val(""); // clear fields
alert(data.error);
} else { // Found employee. Display details
$desc.val(data.name);
}
}
});
});
});
</script>
</head>
<body>
<td><input type="text" name="txtIEcode1" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc1" class="txtIEdesc" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode2" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc2" class="txtIEdesc" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode3" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc3" class="txtIEdesc" style="width:220px;" readonly></td>
</body>
</html>

How to increment/decrements value of a dynamically generated text boxes

I have a e-commerce website in Magento, for that on cart page I want to add + - button to increment and decrements values of dynamically generated text boxes of quantity. I have this much code which is working fine on localhost but its not working properly on live website
<tr>
<td>
<input type="button" class="down" value="Down" data-min="0"/>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="down" value="Down" data-min="0"/>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
<td>
</tr>
and here is script
<script>
$(document).ready(function() {
$(".up").on('click',function(){
var $incdec = $(this).parent().find(".incdec");
if ($incdec.val() < $(this).data("max")) {
$incdec.val(parseInt($incdec.val())+1);
}
});
$(".down").on('click',function(){
var $incdec = $(this).parent().find(".incdec");
if ($incdec.val() > $(this).data("min")) {
$incdec.val(parseInt($incdec.val())-1);
}
});
});
</script>
For suitability I also attach a screen shot for what I'm looking for.
I have spent lot of time to achieve the same but I could not.
Could you please try like this
$(document).ready(function() {
$(".up").on('click',function(){
var $incdec = $(this).prev();
if ($incdec.val() < $(this).data("max")) {
$incdec.val(parseInt($incdec.val())+1);
}
});
$(".down").on('click',function(){
var $incdec = $(this).next();
if ($incdec.val() > $(this).data("min")) {
$incdec.val(parseInt($incdec.val())-1);
}
});
});
Demo: http://jsfiddle.net/mail2asik/M8JTP/
Your code works fine - it's just that your HTML is not valid.
<table>
<tr>
<td>
<input type="button" class="down" value="Down" data-min="0"/>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="down" value="Down" data-min="0"/>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
<td>
</tr>
</table>
Just replace
$(this).data("min") with $(this).attr("data-min")
and $
(this).data("max") with $(this).attr("data-max")
and check.
Also is the reference to jquery file same in both localhost and in live website?
Also like "denat" told using div inside table is not valid
if elements wasnt in DOM before script start, they be "unseen" for this script. try to set listener with "live" style - throw the element which was in DOM, example:
<script>
$(document).ready(function() {
$(document.body).on("click", ".up", function(){
var $incdec = $(this).parent().find(".incdec");
if ($incdec.val() < $(this).data("max")) {
$incdec.val(parseInt($incdec.val())+1);
}
});
$(document.body).on("click", ".down", function(){
var $incdec = $(this).parent().find(".incdec");
if ($incdec.val() > $(this).data("min")) {
$incdec.val(parseInt($incdec.val())-1);
}
});
});
</script>
P.S. and alse in answer near: delete "div" - it's not valid, to use div between rows of table

Categories