I have the following html:
<div ng-repeat="email in user.emails" class="form-group">
<label for="inputEmail_{{$index+1}}" class="col-lg-2 control-label">Email {{$index+1}}</label>
<div class="col-lg-8 col-xs-11">
<input type="email" class="form-control" id="inputEmail_{{$index+1}}" name="inputEmail_{{$index+1}}" placeholder="Email" required>
</div>
<div ng-if="$index == 0" class="col-lg-1 col-xs-1">
<button type="button" class="btn btn-info addEmailBtn" ng-click="addEmailInput()">
<i class="fa fa-plus"></i>
</button>
</div>
<div ng-if="$index != 0" class="col-lg-1 col-xs-1">
<button type="button" class="btn btn-danger" ng-click="removeEmailInput($index)">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
And my controller is:
module.controller('NewContactCtrl',
function EditProfileController($scope) {
$scope.user = {
emails: [
{ emailValue: "" }
]
};
$scope.addEmailInput = function () {
$scope.user.emails.push({ emailValue: "" });
};
$scope.removeEmailInput = function (index) {
$scope.user.emails.splice(index, 1);
};
});
And for some reason SOMETIMES when I click .addEmailBtn, the click event gets fired twice so I get two new elements instead of one.
EDIT You can reproduce problem here:
http://jsbin.com/qiwehiwico/1/edit?html,js,output
Related
I have the following HTML/Bootstrap form (dynamically generated):
<div id="date_fields">
<div class="form-group removeclass0">
<div class="col-sm-6 nopadding">
<div class="form-group">
<input type="text" class="form-control dateKey" name="dateKey[]" value="revision">
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control dateValue" name="dateValue[]" value="2010-09-20">
<div class="input-group-btn">
<button class="btn btn-danger" type="button" onclick="remove_date_fields(0);">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="form-group removeclass1">
<div class="col-sm-6 nopadding">
<div class="form-group">
<input type="text" class="form-control dateKey" name="dateKey[]" value="publication">
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control dateValue" name="dateValue[]" value="2008-05-21">
<div class="input-group-btn">
<button class="btn btn-danger" type="button" onclick="remove_date_fields(1);">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
Here is JSFiddle:
https://jsfiddle.net/mleontenko/mmk9zo4L/
I need to loop through this form and store dateKey and dateValue pairs into an array that looks like this:
[
{
"dateKey":"revision",
"dateValue":"2010-09-20"
},
{
"dateKey":"publication",
"dateValue":"2008-05-21"
}
]
What is the best way to do this using jQuery or plain JavaScript?
$( document ).ready(function() {
var keys = [];
var values = [];
var res = [];
$.each($("#date_fields").find(".dateKey"), function(i, key) {
keys[i] = $(".dateKey:eq("+i+")").val();
});
$.each($("#date_fields").find(".dateValue"), function(i, value) {
values[i] = $(".dateValue:eq("+i+")").val();
});
$.each($("#date_fields").find(".dateValue"), function(i) {
res[i] = {"dateKey" : keys[i], "dateValue": values[i]};
});
$("#result").text(JSON.stringify(res));
});
JSFiddle: Working js fiddle
in php file i have simple form and bootstrap modal . after clicking submit button bootstrap modal will display.
Form is:
i need to validate above form fields. if it is success then i need to display the modal and validate those fields.
Modal is:
My Code is:
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Fill Below Details</h3>
</div>
<div class="modal-body">
<div class="main-login pop-up-form">
<form class="" method="post" action="#"><br>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Address"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Phone No"/>
</div>
</div>
</div>
<div class="form-group ">
CLICK For Enquiry
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
Form code is showed below:
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
<input type="date" class="form-control" name="udate" id="udate" placeholder="ghf" style="height: 39px !important;" />
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<select name="ftime" id="ftime">
<option value="">---Select---</option>
<option value="1">Breakfast</option>
<option value="2">Lunch</option>
<option value="3">Dinner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<select id="ftype" name="ftype" onchange="validate()">
<option value="">--select--</option>
<option value="hai">V</option>
<option value="hai">NV</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-money fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="amount" id="amount" placeholder="hai" readonly="readonly" />
</div>
</div>
</div>
<div class="form-group ">
<a href="#" data-toggle="modal" data-target="#squarespaceModal" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button" onclick="
validate2()">Submit</a>
</div>
</form>
i was not able to validate both the form and modal. please help me on this..
thanks in advance
You can write a simple validation method
An example could be....
function checkValidation()
{
var isValid = true;
if($("#date").val() == null){
isValid = false;
}
if($("#person").val() == null){
isValid = false;
}
if($("#mail").val() == null){
isValid = false;
}
return isValid;
}
if(checkValidation())
$("#modalDialog").show();
else
alert("Form is not valid");
Try this code:
First attach an click listener to your form submit button and validate your form when button is clicked and if validation is successful then you can show your modal.
$(document).on('click', '#submit', function(e){
e.preventDefault();
var validated = validateform();
if(validated){
$('#modal').modal('show');
}
});
Write your validation logic inside this function and return true if validation passes tests.
function validateform(){
// logic for form validation
// return true if validated successfully
}
i'd like to know how i can get the values from a dynamic input in Spring, a method that get the values, can someone explain me how to do that ?
This is my html and javascript input.
JSP
<div class="form-group">
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button">
<i class="glyphicon glyphicon-plus"></i> Adicionar
</button>
</div>
</div>
<!-- Copy Fields -->
<div class="copy hide">
<div class="control-group input-group" style="margin-top: 10px">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button">
<i class="glyphicon glyphicon-remove"></i> Remover
</button>
</div>
</div>
</div>
JAVA SCRIPT
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Thanks.
I have a modal that is opening up and information is put into it. If you click save the information is stored and the modal closes. All works, but if I try to change location after or before the modal closes it doesn't work. If you take out the $modalInstance.close the location change works, but you're stuck with the dumpy modal :[ Why?
Controller parts:
var onSaveFinished = function (result) {
$scope.$emit('quiverApp:customerProfileUpdate', result);
$modalInstance.close(result);
$location.path('/rentalAgreements/new');
};
$scope.save = function () {
if ($scope.customerProfile.id != null) {
CustomerProfile.update($scope.customerProfile, onSaveFinished);
} else {
CustomerProfile.save($scope.customerProfile, onSaveFinished);
}
};
Modal Part:
<form name="editForm" role="form" novalidate ng-submit="save()" show-validation>
<div class="modal-header" id="goAwayy">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myCustomerProfileLabel">
<span ng-show="state.is('customerProfile.new')">Create a Customer Profile</span>
<span ng-show="state.is('customerProfile.edit')">Edit the Profile of {{customerProfile.firstName + ' ' + customerProfile.lastName }}</span></h4>
</div>
<div class="modal-body">
<div class="col-xs-12 col-sm-6 pull-left form-group">
<label class="control-label" for="field_firstName">First Name</label>
<input type="text" class="form-control" name="firstName" id="field_firstName"
ng-model="customerProfile.firstName"
>
</div>
<button type="submit" ng-disabled="editForm.$invalid || editForm.$submitted" class="btn btn-success">
<span class="glyphicon glyphicon-save"></span> <span>Save</span>
</button>
</div>
</form>
Could try using the modal result promise callback to do the location change:
$modalInstance.result.then(function(){
$location.path('/rentalAgreements/new');
});
Here, I am using codeigniter. I want to call controller method using javascript where view is called. I want to call view method after one second. I want to call popup from my dashboard, so I called it using controller. Dashboard is my "user_view.php" . From view of "user_home.php", I want to call "break_alert.php".
Here is my code:
Controller:
function alert_breaktime()
{
$this->load->view('break_alert');
}
View:
user_view.php:
<script type="text/javascript">
var timer = setTimeout(function()
{
alert('adsfadf');
window.location.href = "<?php echo site_url('welcome/alert_breaktime');?>
},1000);
</script>
break_alert.php:
<script src="<?=base_url()?>resource/js/jquery-2.1.1.min.js"></script>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Add Activity</h4>
</div>
<?php $attributes = array('class' => 'bs-example form-horizontal'); echo form_open(base_url().'activity/add',$attributes); ?>
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 control-label">Subject<span class="text-danger">*</span></label>
<div class="col-lg-10">
<input type="text" class="form-control holiday_name" name="holiday_name" required>
</div>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-phone"></i> Call</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-group"></i> Meeting</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-tasks"></i> Task</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-flag"></i> Deadline</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-envelope"></i> Email</button>
<button type="submit" class="btn btn-default col-md-2"><i class="fa fa-cutlery"></i> Lunch</button>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Date<span class="text-danger">*</span></label>
<div class="input-group date col-lg-10" id="datetimepicker5">
<input ng-model="dt" type='text' class="col-sm-3 form-control" value="" readonly data-date-format="YYYY/MM/DD"/>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<textarea class="textarea" id="description"></textarea>
</div>
<div class="modal-footer">
<?=lang('close')?>
<button type="submit" class="btn btn-primary">Add Activity</button>
</div>
</div>
</div>
</div>
in your code the whole page is refresh after every second.
in place of "window.location.href" use ajax call and evaluate script code like this.
$.ajax({
url: "your url",
success: function(data){
$(data).find("script").each(function() {
eval($(this).text());
}
}
});
function alert_breaktime()
{
echo $this->load->view('break_alert');
}
After all, I got the solution and it works fine. So, here I am putting as a solution.
<script type="text/javascript">
$(document).ready(function() {
var $timer = 0;
function testbreak(){
if ($timer === 0) {
$("#bb").click();
$timer = 1;
}
}
setInterval(testbreak, 3000);
});
</script>
<div id='abc' style="display: none;">
<i class="fa fa-plus"></i> Add Activity
</div>