As you guys can see, I have two columns: Name and Tickets.
So John has 15 tickets, bob 10 and so on...
Objective: I want to make some sort of "lottery" where each person has X tickets. More tickets the more chance you have to win the prize.
I was trying to get both column separated by its class and then create some sort of "main array/object" something like this:
lottery = {
John => 15
Bob => 10
Milla => 7
}
And then I would try to pick a winner randomly... Just don't know how to do it.
Here I'm getting the inputs but I don't know how to "connect" them.
$('#sort').click(function(){
let names = $('.names');
let tickets = $('tickets');
let size = Object.keys(names).length;
}
HTML Structure:
<section id="content">
<div class="container participant">
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control">
<input type="text" aria-label="tickets" class="tickets form-control">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
</div>
</section>
Given that each user has multiple tickets in order to have more chance of winning it would make more sense to create an array with multiple instances of their names in which you then select from randomly.
To build the array you can use map() and then fill() to populate it with the names, before randomly selecting from it, something like this:
var arr = $('#content .container .row').map(function() {
var $row = $(this);
return new Array(parseInt($row.find('.tickets').val(), 10)).fill($row.find('.names').val());
}).get();
var winner = arr[Math.floor(Math.random() * arr.length)];
console.log('Winner: ', winner);
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="content">
<div class="container participant">
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="John">
<input type="text" aria-label="tickets" class="tickets form-control" value="15">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="Bob">
<input type="text" aria-label="tickets" class="tickets form-control" value="10">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="Milla">
<input type="text" aria-label="tickets" class="tickets form-control" value="7">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="Kurt">
<input type="text" aria-label="tickets" class="tickets form-control" value="3">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
</div>
</section>
Related
I am new to jquery and JS stuff.
I am working on a project where I want to show and hide div based on checked checkbox as image. but it does not display the corresponding div.
Please help me improve my logic.
<div class="col-md-3"><label class="btn btn-primary"><img class="retina" src="{{asset('app/img/logo.png')}}" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="chk1" id="hemming" value="val1" class="hidden" autocomplete="off"></label></div>
<div class="col-md-3"><label class="btn btn-primary"><img class="retina" src="{{asset('app/img/logo.png')}}" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="chk2" id="button" value="val2" class="hidden" autocomplete="off"></label></div>
<div class="col-md-3"><label class="btn btn-primary"><img class="retina" src="{{asset('app/img/logo.png')}}" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="chk3" id="patch" value="val3" class="hidden" autocomplete="off"></label></div>
<div class="col-md-3"><label class="btn btn-primary"><img class="retina" src="{{asset('app/img/logo.png')}}" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="chk4" id="zipper" value="val4" class="hidden" autocomplete="off"></label></div>
When I click on any of above image according to below div should be displayed as specified in js.
<div class="count" id="hemmingcount" style=" display:none;">
<div class="col-md-3">
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
</span>
<input type="text" class="form-control text-center" value="0" placeholder="hemming">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</div>
<div class="count" id="buttoncount" style=" display:none;">
<div class="col-md-3">
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
</span>
<input type="text" class="form-control text-center" value="0" placeholder="button">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</div>
<div class="count" id="patchcount" style=" display:none;">
<div class="col-md-3">
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
</span>
<input type="text" class="form-control text-center" value="0" placeholder="patch">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</div>
<div class="count" id="zippercount" style=" display:none;">
<div class="col-md-3">
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
</span>
<input type="text" class="form-control text-center" value="0" placeholder="zipper">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</div>
Script I wrote is
<script type="text/javascript">
$(document).ready(function(e){
$(".img-check").click(function(){
$(this).toggleClass("check");
});
});
$(function () {
$("#hemming").click(function () {
if ($(this).is(":checked")) {
$("#hemmingcount").show();
}
else {
$("#hemmingcount").hide();
}
});
});
$(function () {
$("#patch").click(function () {
if ($(this).is(":checked")) {
$("#patchcount").show();
} else {
$("#patchcount").hide();
}
});
});
$(function () {
$("#button").click(function () {
if ($(this).is(":checked")) {
$("#buttoncount").show();
} else {
$("#buttoncount").hide();
}
});
});
$(function () {
$("#zipper").click(function () {
if ($(this).is(":checked")) {
$("#zippercount").show();
} else {
$("#zippercount").hide();
}
});
});
</script>
Thanks in advance.
I'm trying to make a div appear on button click which I've not succeeded from the below code.Please let me know if I've done any thing wrong in the code.
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>
change getElementByid to getElementById (i to I)
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>
Its Simple
<script>
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
</script>
getElementById() is a function and its case sensitive . You need to write getElementByid() as getElementById().
Note:- i in getElementById() should be capital .
You have typed wrong document.getElementByid it should be capital I document.getElementById
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>
Can I strongly, strongly suggest that you use jQuery to do this - it makes this task trivial on all browsers. To do this with jQuery, perform the following steps.
Include the jQuery script library in your web page <script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>.
Add an id property to your button <a class="btn btn-default log-bar" href="#" id="loginButton" role="button" onclick = "showDiv()" >Login</a>.
Add the following Javascript to your page:
<script>
$(function() {
$("#loginButton").click(function() {
$("#sign-in").show();
});
});
</script>
I want to increment my input box,
Its incrementing and also splicing but the problem is when i enter value in one box the same is replaced in the other.I think its due to ngModel.Can anyone please help me.Thnaks.
<div class="form-group row text-right" *ngFor='let row of vipInput'>
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" [(ngModel)]="data.vipInput" id="email" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeVipInputs(index)">Remove</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary" (click)="vipInputIncrement('val')">
<i class=" fa fa-plus"></i>
</button>
My ts,(I am using angular2)
vipInputIncrement(val) {
this.vipInput.push({'val':''});
}
removeVipInputs(k) {
this.standardInput.splice(k,1);
}
Your ng-model should be something inside this row,
<div class="form-group row text-right" *ngFor='let row of vipInput'>
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" [(ngModel)]="row.val" id="email" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeVipInputs(index)">Remove</button>
</div>
</div>
</div>
</div>
I think it should be row.val, but you can decide what you want to show
//my jquery
//get the amount and calculate the total amount
$('#dynamicDiv').on('keyup', '.getAmount', function(event) {
var total = 0;
$(this).each(function() {
total += parseInt(this.value,10);
});
<div id="dynamicDiv">
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
</div> <!-- parent div end -->
<div class="form-group">
<div class="row ">
<div class="col-md-6 col-md-offset-4">
<div class="form-group">
<label class="col-md-5 control-label"><b>Allowance Total:</b> </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control totalAmount">
</div>
</div>
</div>
</div>
</div>
i feel this is complex, i want to add the multiple input text value and display in the total amount text value.so that the total sum of the input value. I have jQuery what's wrong with this. any help would be appreciated.
In $(this).each(function() {, this will return element on which event is invoked.
Use$('.getAmount') selector to get value of all the elements having class as getAmount
Note: Also use input event instead of keyup
$('#dynamicDiv').on('input', '.getAmount', function(event) {
var total = 0;
$('.getAmount').each(function() {
total += parseInt(this.value, 10) || 0;
//consider || condition as `parseInt('')` is `NaN` or use `Number(this.value)`
});
$('.totalAmount').val(total);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="dynamicDiv">
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
</div>
<!-- parent div end -->
<div class="form-group">
<div class="row ">
<div class="col-md-6 col-md-offset-4">
<div class="form-group">
<label class="col-md-5 control-label"><b>Allowance Total:</b>
</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control totalAmount">
</div>
</div>
</div>
</div>
</div>
I'm so confused how to add/remove multiple input fields in my code.
This is my code :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
</div>
</div>
I want to add new group of input fields when i'm click the button.
Please advice, Thanks
Try this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="input-div">
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
<button id="b2" class="btn btn-success add-more"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
</div>
And this is de jquery code:
$('#b1').click(function(){
var newGroup = $('.input-div').last().html();
$('.input-div').last().after('<div class="input-div">'+newGroup+'</div>');
});
$('#b2').click(function(){
$('.input-div').last().remove();
});