Ionic Framework - Buttons inside form labels - javascript

I have a form like below,
<form>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text">
</label>
<label class="item item-button-right">
Photo
<button style="right: 95px;" class="button button-small button-clear" ng-click="get_gallery();">
Gallery
</button>
<button class="button button-small button-clear" ng-click="get_camera();">
Camera
</button>
</label>
</div>
</form>
The Problem is that whatever the button I hit, it always triggers get_gallery() method and never calls get_camera(). Can you someone help me what is the problem? I have also tried in other way which will look like,
<label class="item item-input item-stacked-label">
Receipt
<div>
<button class="button button-small button-clear" ng-click="get_gallery();">
Gallery
</button>
<button class="button button-small button-clear" ng-click="get_camera();">
Camera
</button>
</div>
</label>
Am I doing something wrong? What is the proper way to do it?

Change label tag to div, that will help.

This problem occurs because the use two button in a label you can use two lable or replace div instead lable like this
<form>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text">
</label>
<div style="display:inline-block" class="item item-button-right">
Photo
<button style="right: 95px;" class="button button-small button-clear" ng-click="get_gallery();">
Gallery
</button>
<button class="button button-small button-clear" ng-click="get_camera();">
Camera
</button>
</div>
</div>
</form>

If you really need a button inside a label in Ionic, you can change ng-click to ng-mousedown on your button.
<label class="item item-button-right">
Photo
<button class="..." ng-mousedown="get_gallery();">
Gallery
</button>
<button class="..." ng-mousedown="get_camera();">
Camera
</button>
</label>

Related

How to iterate through input's content

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>

How to make div appear on button click using Javascript

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>

how to hide cc , bcc in mail box form initially

I have developed a mail box form where i want to hide cc , bcc option initially. cc, bcc will when i click on their option.
I am not able to do this.
<form class="inbox-compose form-horizontal" id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="inbox-compose-btn">
<button class="btn green">
<i class="fa fa-check"></i>Send</button>
<button class="btn default inbox-discard-btn">Discard</button>
<button class="btn default">Draft</button>
</div>
<div class="inbox-form-group mail-to">
<label class="control-label">To:</label>
<div class="controls controls-to">
<input type="text" class="form-control" name="to">
<span class="inbox-cc-bcc">
<span class="inbox-cc"> Cc </span>
<span class="inbox-bcc"> Bcc </span>
</span>
</div>
</div>
<div class="inbox-form-group input-cc display-hide">
<label class="control-label">Cc:</label>
<div class="controls controls-cc">
<input type="text" name="cc" class="form-control"> </div>
</div>
<div class="inbox-form-group input-bcc display-hide">
<label class="control-label">Bcc:</label>
<div class="controls controls-bcc">
<input type="text" name="bcc" class="form-control"> </div>
</div>
<div class="inbox-form-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" class="form-control" name="subject"> </div>
</div>
<div class="inbox-form-group">
<textarea class="inbox-editor inbox-wysihtml5 form-control" name="message" rows="12"></textarea>
Please help me to make my form better
Initially hide the div like:
<span class="inbox-cc-bcc" style="display:none;">
<span class="inbox-cc"> Cc </span>
<span class="inbox-bcc"> Bcc </span>
</span>
and show it by adding an event listener on cc, bcc button using jquery show() method
You can use the hide class to hide sections that you would like to hide initially.
HTML
<form class="inbox-compose form-horizontal" id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="inbox-compose-btn">
<button class="btn green">
<i class="fa fa-check"></i>Send</button>
<button class="btn default inbox-discard-btn">Discard</button>
<button class="btn default">Draft</button>
</div>
<div class="inbox-form-group mail-to">
<label class="control-label">To:</label>
<div class="controls controls-to">
<input type="text" class="form-control" name="to">
<span class="inbox-cc-bcc">
<span class="inbox-cc" style="cursor: pointer;cursor: hand;"> Cc </span>
<span class="inbox-bcc" style="cursor: pointer;cursor: hand;"> Bcc </span>
</span>
</div>
</div>
<div id="divCC" class="inbox-form-group input-cc display-hide hide">
<label class="control-label">Cc:</label>
<div class="controls controls-cc">
<input type="text" name="cc" class="form-control"> </div>
</div>
<div id="divBCC" class="inbox-form-group input-bcc display-hide hide">
<label class="control-label">Bcc:</label>
<div class="controls controls-bcc">
<input type="text" name="bcc" class="form-control"> </div>
</div>
<div class="inbox-form-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" class="form-control" name="subject"> </div>
</div>
<div class="inbox-form-group">
<textarea class="inbox-editor inbox-wysihtml5 form-control" name="message" rows="12"></textarea></div>
<div id="push"></div>
</form>
jQuery
$('.inbox-bcc').click(function(){
console.log('bcc');
$('#divBCC').toggleClass('hide');
});
});
Here is a working fiddle: http://www.codeply.com/go/iPH6UVoHkc
Hope this helps!

AngularJS UI-Bootstrap Datepicker is not working inside ng-repeat?

I have been trying to use date pickers inside ng-repeat but the datepicker is not working inside ng-repeat, can anyone help me solve this issue.
Here is my code,
<div ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
check this DEMO
<h1>Datepicker inside repeater demo</h1>
<div class="container content-body">
<div class="row" ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt.date" is-open="dt.opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,dt)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>

Angular UI Bootstrap Input-Group-Button - darn floating button

I have a form that i have just added a bootstrap datepicker to and using an input-group-button.
The problem I have is that the button floats off to the right at the extent of the containing div.
The button in question is the button to the right of TargetDate.
I have been following instructs at TutorialsPoint
JSFiddle here JSFiddle
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input ng-model="formData.name" type="text" class="form-control" name="name" ng-required="true"> <span class="error" ng-show="submitjobform.name.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea ng-model="formData.description" class="form-control" name="description" ng-required="true"></textarea> <span class="error" ng-show="submitjobform.description.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<select ng-model="formData.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select> <span class="error" ng-show="submitjobform.category.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="assignee" class="col-sm-2 control-label">Assignee</label>
<div class="col-sm-10">
<select ng-model="formData.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select> <span class="error" ng-show="submitjobform.assignee.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="col-sm-10">
<div class="input-group">
<input name="targetDate" type="text" class="form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /col-sm-10 -->
</div>
<!-- form group -->
<div class="form-group">
<div class="col-sm-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div>
</div>
</form>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
</section>
Any assistance gratefully appreciated
Simon
There's a couple things that can help you here:
Columns are meant to be wrapped by rows. The default bootstrap grid is a grid of 12 columns.
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
So with that in mind, you can see how you can control the placement PER row of your elements.
As it stands your last div is set to a col-sm-10. This column is holding your input for your target date as well as the button that's misbehaving.
Below is a modification of your troubled area with a fiddle. You had a span tag open too long as well as missing a "form-control" class.
http://jsfiddle.net/Levy0k2f/
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input name="targetDate" type="text" class="form-control form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn"></span>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default" ng-click="vm.open($event)"> <i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
Update for fixing of button, the button was outside the span class.
http://jsfiddle.net/k0f598hr/
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>

Categories