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

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

Related

How to use "other" option with checkbox and text input

I´m trying to make a text input appear when I click on the "outra", that means "other" option on the checkbox...
I want it to appear just when i click that and then it will register that thing on the database.
Does anyone know how to help me?
Code with the functions:
<label class="checkbox-inline" for="checkboxes-4">
<input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
Outro
</label>
<input type="text" maxlength="9" class="input-field4" id="input" name="teste">
</td>
</tr>
<script>
$(document).ready(function(){
$('#input').hide();
$(document).on('change', 'input[type="checkbox"]', function(e){
console.log(e)
if (e.target.id == "checkboxes-4" && e.target.checked) {
$('#input').show();
} else {
$('#input').hide();
}
});
});
</script>
<tr>
<th>Doenças</th>
<label class="checkbox-inline" for="checkboxes-7">
<input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
Outra
</label>
<input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
</td>
</tr>
<tr>
<th>Contacto em caso de emergência</td>
<td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>"/></td>
</tr>
</table>
<br>
<p align=right>
<button type="submit" value="Alterar">Alterar</button>
<button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#input1').hide();
$(document).on('change', 'input[type="checkbox"]', function(e){
console.log(e)
if (e.target.id == "checkboxes-7" && e.target.checked) {
$('#input1').show();
} else {
$('#input1').hide();
}
});
});
</script>
Are you using a framework or anything? You would want to add a function that checks if the checkbox is checked. Judging from your tags, I'll offer a JQuery suggestion.
The JQuery to accomplish that might look like:
$('#checkboxes-4').is(":checked")
And then you would conditionally show your text input. So maybe:
if ($('#checkboxes-4').is(":checked")) {
$('#id_of_textbox').hide();
} else {
$('#id_of_textbox').show();
}

how to insert text into a field without id

i'm trying to use the following code to insert test into a field without id
$(document).ready(function(){
$("#insert").click(function(){
$("#gfield_list_cell gfield_list_356_cell2").val("TEST");
});
});
<td class="gfield_list_cell gfield_list_356_cell2" data-label="FIRST"><input type="text" name="input_356[]" value="" tabindex="14"></td>
<p><input id="insert" name="test" type="button" value="test" /></p>
your selector is ID selector, not a CLASS selector
$(document).ready(function(){
$("#insert").click(function(){
$(".gfield_list_cell gfield_list_356_cell2").val("TEST");
});
});
should work.
or if you want to change the value of the INPUT TYPE="text" you should do:
$(document).ready(function(){
$("#insert").click(function(){
$(".gfield_list_cell gfield_list_356_cell2").children().val("TEST");
});
});
$(document).ready(function(){
$("#insert").click(function(){
$("#testing").val("TEST");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<td class="gfield_list_cell" data-label="FIRST"><input id="testing" type="text" name="input_356[]" value="" tabindex="14"></td>
<p><input id="insert" name="test" type="button" value="test" /></p>
You can achieve that by specifying the classes of your td tag and the input field inside it, to be more specific (considering you do not have any other input inside the td).
$(document).ready(function() {
$("#insert").click(function() {
$(".gfield_list_cell.gfield_list_356_cell2").children("input").val("TEST");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="gfield_list_cell gfield_list_356_cell2" data-label="FIRST"><input type="text" name="input_356[]" value="" tabindex="14"></td>
</tr>
<table>
<p><input id="insert" name="test" type="button" value="test" /></p>
I hope this helps you.
Good luck.

Add and Remove textbox in table using Javascript error

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" />

Display HTML on the basis of dropdown menu selected

I have a dropdown menu and on the basis of the item selected I want to display a small part of HTML page.
<select id='menuHandler'>
<option value='abc'> abc</option>
<option value='xyz'>xyz</option>
</select>
IF the selected value is "abc" then a popup button is displayed with the following code:
<button id='runForm' onClick=""> Run form </button>
<div id ="runFormPopup" style=" display:none;">
<table CELLPADDING="10" CELLSPACING="5" class='border'>
<tr>
<td colspan='3'>Run form Generation</td>
</tr>
<tr>
<td width="200" class='border'>
<span>Input Data</span><br>
<input type="checkbox" name="vehicle" >Process log(s)<br>
Summary data<br>
<input type="checkbox" name="vehicle" >Thickness data<br>
<input type="checkbox" name="vehicle" >Particle data
</td>
<td class='border'>
<span>Steps(s)</span>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
</td>
</tr>
<tr>
<td> Run form filename </td>
<td><input type="text" ></td>
<td><button class="editbtn">Generate</button></td>
</tr>
</table>
</div>
else if the value selected is "xyz" this should be displayed.
<form action="${ctx}/home/step50/generateReport" method="GET" id="form_generate">
<input style="margin-top: 20px;" type="submit" id="btnGenerate" class="small button active" value="Generate"/>
</form>
how can I do it.
Listen to the change event of the #menuHandler select element, and add the conditional logic there.
Example Here
$('#menuHandler').on('change', function () {
if (this.value === "abc") {
$('#runFormPopup, #runForm').show();
$('#form_generate').hide();
} else {
$('#runFormPopup, #runForm').hide();
$('#form_generate').show();
}
});
..or a shorter version:
Example Here
$('#menuHandler').on('change', function () {
var condition = this.value === "abc";
$('#runFormPopup, #runForm').toggle(condition);
$('#form_generate').toggle(!condition);
});
Try something like this.
$('#menuHandler').change(function(){
var selectedValue = $(this).val();
if(selectedValue === 'abc') {
$('#runFormPopup').show();
$('#form_generate').hide();
}
else {
$('#runFormPopup').hide();
$('#form_generate').show();
}
});
From a high-level perspective:
Create a listener on the button and listen for a click
Dynamically get the value
Either create the content for which you are looking, or insert content into a dynamically-created <div> (overlay, pop-up, etc.)
Following these steps, you should be OK.

how to set the limit of minimum and maximum value in Jquery or js

I have this script for increment decrements value of a text box, it's working fine. Only thing I need to achieve is, I have to set a minimum and maximum value for it to decrements and increments receptively.
I don't need any alert n message to show the user, I just need it should not change the value after reaching to the limit.
<script>
$(document).ready(function(){
$("#up").on('click',function(){
$("#incdec input").val(parseInt($("#incdec input").val())+1);
});
$("#down").on('click',function(){
$("#incdec input").val(parseInt($("#incdec input").val())-1);
});
});
</script>
Demo
You can use following. Just set max and min value in data-max and data-min attribute in up and down buttons;
<input type="button" id="up" value="Up" data-max="5"/>
<input type="button" id="down" value="Down" data-min="0"/>
And in js;
$(document).ready(function() {
$("#up").on('click',function(){
if ($("#incdec").val() < $(this).data("max")) {
$("#incdec").val(parseInt($("#incdec").val())+1);
}
});
$("#down").on('click',function(){
if ($("#incdec").val() > $(this).data("min")) {
$("#incdec").val(parseInt($("#incdec").val())-1);
}
});
});
Edit: For image buttons : Demo 2
Edit2: How about if you creating that buttons dynamically more than once?
Let say you have generating buttons dynamically and generate an output like below;
<div>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
<input type="button" class="down" value="Down" data-min="0"/>
</div>
<div>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
<input type="button" class="down" value="Down" data-min="0"/>
</div>
....
And you can use following js:
$(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);
}
});
});

Categories