Jquery fuction on multiple elements - javascript

As you can see in the Snippet code below, I have two buttons and one input for each container. Now, The input calc and sums up the number of clicks on the 2 buttons in the same container. But, it's only working for the first container. How can I make it work for each container separately without setting an ID for each group of inputs?
$(function() {
$('.click').on('click', function() {
$(this).val(parseInt($(this).val()) + 1);
});
$('.click').click(function() {
var val1 = +$('.val1').val();
var val2 = +$('.val2').val();
$('.count').val(val1+val2);
});
});
.cont {
border: 1px solid red;
padding: 10px;
margin-bottom: 5px;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>
<h1>Second</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>

First get the parent of the clicked element, then search for the .valx elements only within this parent.
$('.click').click(function (e) {
var $parent = $(e.currentTarget).parent();
var val1 = +$parent.find('.val1').val();
var val2 = +$parent.find('.val2').val();
$parent.find('.count').val(val1 + val2);
});
This way, you can have as many counters as you want.
Update:
You can also add the +1 feature in the same click event. Like so:
$('.click').click(function (e) {
var $input = $(e.currentTarget);
var $parent = $input.parent();
// Value ++
$input.val($input.val() + 1);
// Set the total count
var val1 = +$parent.find('.val1').val();
var val2 = +$parent.find('.val2').val();
$parent.find('.count').val(val1 + val2);
});

Got it working for you!
Use $(this).parent().find();
$(function() {
$('.click').on('click', function() {
$(this).val(parseInt($(this).val()) + 1);
});
$('.click').click(function() {
var val1 = + $(this).parent().find('.val1').val();
var val2 = + $(this).parent().find('.val2').val();
$(this).parent().find('.count').val(val1+val2);
});
});
.cont {
border: 1px solid red;
padding: 10px;
margin-bottom: 5px;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>
<h1>Second</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>

Here is the Solution for You:
$(function() {
$('.click').on('click', function() {
$(this).val(parseInt($(this).val()) + 1);
});
$('.val1').click(function() {
var val1 = +$(this).val();
var val2 = +$($(this).siblings('.val2')).val();
$($(this).siblings('.count')).val(val1+val2);
});
$('.val2').click(function() {
var val1 = +$($(this).siblings('.val1')).val();
var val2 = +$(this).val();
$($(this).siblings('.count')).val(val1+val2);
});
});
.cont {
border: 1px solid red;
padding: 10px;
margin-bottom: 5px;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>
<h1>Second</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>

Related

how can i show an edit box on output text on click with save button

how can i edit on output text on click with save button. please if any could help....
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button name="button-${getVal}">Button for ${getVal}</button>`
$("#output").html($("#output").html() + " " + getVal + button);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<div id="output"></div>
</div>
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button onclick="Update(this);" name="button">Edit/Update </button>`
//let button = `<button onclick="Update(this);" name="button-${getVal}">Edit/Update for ${getVal}</button>`
$("#output").append('<tr><td><input name="test[]" type="text" value="'+getVal+'" disabled></td><td>' + button +'</td></tr>');
});
});
function Update(CurrentElement)
{
if($(CurrentElement).closest('tr').find('input').attr('disabled')) {
$(CurrentElement).closest('tr').find('input').attr('disabled',false);
} else {
$(CurrentElement).closest('tr').find('input').attr('disabled',true);
}
}
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}
td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}
tr:nth-child(even) { background-color: #dddddd;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<table id="output"><tr><th>Value</th><th>Action</th></tr></table>
</div>
May be this can help you.
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
$('#output').val(getVal);
});
$("#save").click(function(){
let getValNew = $("#output").val();
$('#inputValue').val(getValNew);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<input type="text" name="text-out" id="output">
<button id="save">Update value</button>
</div>

Unable to re-calculate total sum of dynamically added input after delete input using jquery?

I have a form, i am able to calculate total of all dynamically added inputs, but i am to re-calculate after the delete row, Here is my code.
I have followed the code,
http://jsfiddle.net/Uwbe6/2/
calcSum();
function calcSum() {
var myForm = $('#myForm');
myForm.delegate('.items', 'change', function() {
var sum = 0;
var itemsValue = myForm.find('.items');
itemsValue.each(function() {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
// sum += parseInt($(this).val());
});
// return sum;
$('.total-amt').html(sum);
// console.log(sum);
});
}
$('body').on("click", ".delete", function(e) {
$(this).parent().remove();
calcSum();
});
$(function() {
var i = 1;
$('#add_more').click(function(event) {
event.preventDefault();
$('input.items').last().attr('name', 'item[' + i + ']');
$('#cart_items').append($('#tmp_cart').html());
i++;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
Total Items<input type="text" value="100" name="total_amt" id="total_amt">
<div id="cart_items">
Items<input type="text" name="item[0]" class="items"><br/>
</div>
<button type="button" id="add_more">Add More</button>
<input type="submit" name="submit" value="submit">
</form>
<p>Total Amt:<span class="total-amt"></span></p>
<div id="tmp_cart" style="display: none;">
<div class="cart_items">
<label>
Items
<input type="text" name="item[]" class="items">
</label>
<input type="button" value="Delete" class="delete"><br/>
</div>
</div>
Thanks for suggestions.
calcSum() should just calculate the sum, not bind a handler. Then you can call it from different handlers.
calcSum();
function calcSum() {
var myForm = $('#myForm');
var sum = 0;
var itemsValue = myForm.find('.items');
itemsValue.each(function() {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
// sum += parseInt($(this).val());
});
// return sum;
$('.total-amt').html(sum);
// console.log(sum);
}
$("#myForm").on("change", ".items", calcSum);
$('body').on("click", ".delete", function(e) {
$(this).parent().remove();
calcSum();
});
$(function() {
var i = 1;
$('#add_more').click(function(event) {
event.preventDefault();
$('input.items').last().attr('name', 'item[' + i + ']');
$('#cart_items').append($('#tmp_cart').html());
i++;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
Total Items<input type="text" value="100" name="total_amt" id="total_amt">
<div id="cart_items">
Items<input type="text" name="item[0]" class="items"><br/>
</div>
<button type="button" id="add_more">Add More</button>
<input type="submit" name="submit" value="submit">
</form>
<p>Total Amt:<span class="total-amt"></span></p>
<div id="tmp_cart" style="display: none;">
<div class="cart_items">
<label>
Items
<input type="text" name="item[]" class="items">
</label>
<input type="button" value="Delete" class="delete"><br/>
</div>
</div>
Use .on() instead of .delegate() since it's deprecated. Also, you could simply keep the event binding separate from calcSum function.
var myForm = $('#myForm');
calcSum();
function calcSum() {
var sum = 0;
var itemsValue = myForm.find('.items');
itemsValue.each(function() {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
// sum += parseInt($(this).val());
});
// return sum;
$('.total-amt').html(sum);
// console.log(sum);
}
myForm.on('change', calcSum);
$('body').on("click", '.delete', function(e) {
$(this).parent().remove();
calcSum();
});
$(function() {
var i = 1;
$('#add_more').click(function(event) {
event.preventDefault();
$('input.items').last().attr('name', 'item[' + i + ']');
$('#cart_items').append($('#tmp_cart').html());
i++;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
Total Items<input type="text" value="100" name="total_amt" id="total_amt">
<div id="cart_items">
Items<input type="text" name="item[0]" class="items"><br/>
</div>
<button type="button" id="add_more">Add More</button>
<input type="submit" name="submit" value="submit">
</form>
<p>Total Amt:<span class="total-amt"></span></p>
<div id="tmp_cart" style="display: none;">
<div class="cart_items">
<label>
Items
<input type="text" name="item[]" class="items">
</label>
<input type="button" value="Delete" class="delete"><br/>
</div>
</div>

Click on submit button after drag and drop

I have the following code:
<div id="main" style="width: 500px; height: 500px; background: #ddd; float: left;"></div>
<div id="list" style="width: 200px; height: 500px; border: 1px solid #ddd; float: left; margin-left: 15px;">
<div class="section">
Ja/Nej
<div class="showforms" style="display: none;">
<strong>Fritext</strong>
<input type="text" name="question">
<p><input type="radio" name="test" value=1> Ja<br>
<input type="radio" name="test" value=0> Nej<br></p>
<input type="submit" name="save" value="Spara" class="save">
</div>
</div>
<div class="section">
Option list
<div class="showforms" style="display: none">
<select>
<option>Fisk</option>
<option>Fisk2</option>
</select>
</div>
</div>
</div>
$(document).ready(function() {
var jsonObj = [];
var i = 0;
$('.section').draggable({
revert: "invalid",
stack: ".yesorno",
helper: "clone"
});
$('#main').droppable({
accept: ".section",
drop: function(event, ui) {
//Lagra ui-objektet i en lista
//Loopa ut objekten och sätt ett index på varje classnamn och visa input fältet
jsonObj[i] = {"Objekt": ui.draggable, "Id": i};
var draggable = jsonObj[i]["Objekt"];
var droppable = $(this);
draggable.show('.showforms');
draggable.clone().appendTo(droppable);
$("#main").find("div").attr('id', i).show();
var testa = $('#main').find("div")[i];
var submit = $(testa).find(":submit").attr('test', i);
console.log($(testa).find(":submit"));
//Object[div#yesorno.ui-draggable.ui-draggable-handle]
i++;
}
});
});
$('.save').click(function() {
console.log("hej"); //This don't work
});
The thing I'm doing here is that I take a section-div containing some input-fields that is being hidden. I drag this into the main-div and drop it here. After it has been dropped, the input-fields are shown.
The problem I have is that nothing is printed out when I click on the submit button after I have dragged and dropped it in the Main-div. What am I doing wrong?
I solved It by doing this:
$(document).on('click', ".save", function() {
console.log($(this).attr('test'));
});
Try:
Replace
<input type="submit" name="save" value="Spara" class="save">
With
<input type="submit" name="save" value="Spara" class="save" onClick="saveFunction()">
Replace
$('.save').click(function() {
console.log("hej"); //This don't work
}
With
function saveFunction(){
console.log("hej");
}

how to change the div width according to a variable

I have a table which is editable. I want to change the div width when the td content changes. I think my jQuery code is not working. How can I solve this problem?
var form = document.getElementById('form');
number = document.getElementById('number');
form.onchange = function() {
var variable = number.value;
var unit = "px";
var z = variable + unit;
$("#check").css("width", z);
};
#check {
background-color: red;
height: 15px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<form id="form">
<input id="number" type="number" min="1" name="number">
</form>
<div id="check"></div>
</td>
</tr>
</table>
You can use jquery with keyup and change
var form = document.getElementById('form');
number = document.getElementById('number');
$("#number").on("keyup change",function() {
var variable = number.value;
var unit = "px";
var z = variable + unit;
$("#check").css("width", z);
});
#check {
background-color: red;
height: 15px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<form id="form">
<input id="number" type="number" min="1" name="number">
</form>
<div id="check"></div>
</td>
</tr>
</table>

Auto update image to value

I am trying to auto update the image to the text of the input box.
Here is the index code:
<body>
<div id="registeer">
<form method="post" action="javascript:login()">
<input type="text" name="gebruikersnaam" placeholder="Gebruikersnaam" /><br><br>
<input type="password" name="wachtwoord" placeholder="Wachtwoord" /><br><br>
<input type="submit" value="Registeer">
<form>
<br>
</div>
<div id="registeer-avatar"></div>
<script src="registeer.js"></script>
And here is the registeer.js:
$("#registeer input[type=text]").keyup(function(){
var value = $(this).val();
var background = "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=" + value + "&action=std&direction=3&head_direction=3&gesture=sml&size=b)";
$("#registeer-avatar").css("background", background);
});
$("#registeer input[type=text]").blur(function() {
if(!this.value) {
$("#registeer-avatar").css("background", "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=ulk&action=std&direction=3&head_direction=3&gesture=sml&size=b)");
}
});
So if you type in the first input for example 'hi', the image in registeer-avatar will be habbo....&user=hi, but it is not working.
Thanks for the help.
It works, but you need to size the container:
<div id="registeer-avatar"></div>
as it is now it has no "space" and when background is set, it does not show.
Try, for example, CSS:
#registeer-avatar {
border: 1px solid #eee;
min-height: 100px;
}
$("#registeer input[type=text]").keyup(function(){
var value = $(this).val();
var background = "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=" + value + "&action=std&direction=3&head_direction=3&gesture=sml&size=b)";
$("#registeer-avatar").css("background-image", background);
console.log(background);
});
$("#registeer input[type=text]").blur(function() {
if(!this.value) {
$("#registeer-avatar").css("background", "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=ulk&action=std&direction=3&head_direction=3&gesture=sml&size=b)");
}
});
#registeer-avatar {
border: 1px solid #eee;
min-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="registeer">
<form method="post" action="javascript:login()">
<input type="text" name="gebruikersnaam" placeholder="Gebruikersnaam" /><br><br>
<input type="password" name="wachtwoord" placeholder="Wachtwoord" /><br><br>
<input type="submit" value="Registeer">
<form>
<br>
<div id="registeer-avatar"></div>

Categories

Resources