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.
Related
I have an HTML form which has text field with an add more button. When we click on the button a text field is added to the form. Following is the code for the form:
<div class="input-group g-mb-25">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]">1.</label>
</div>
<input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>
<div class="row">
<div class="col-lg-4">
<!-- Checkbox -->
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input" id="numCheck">
<span class="custom-control-label">Show numbers</span>
</label>
<!-- End Checkbox -->
</div>
</div>
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
The js for adding the fields is as follows:
// Add more fields
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('u-btn-cyan').addClass('u-btn-lightred')
.html('<span class="fa fa-trash"></span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
Notice that I have prepended a label to the text field:
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]"></label>
</div>
What I am unable to figure out is How can I add numbers to the label as I add more fields, 1 being the default number for the first Title field
Added form HTML with default field:
<div class="input-group g-mb-25">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]"></label>
</div>
<input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
The new field is added as:
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
I'm updating some content on a website running Bootstrap 2.0.4 (I know it's dated but don't have the time to update it yet!).
I'm trying to prepend a button on to an input element. When the button is clicked I'm adding another button dynamically below it using jquery, I need this also to have the button prepended.
I've created a fiddle, would appreciate any help.
HTML
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
JQUERY
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Check updated snippet below....
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").before(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
I'm using a form code copied from here that allows the user to add input fields.
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
My problem is that I want to add autocomplete from a fixed set of possibilities. For that I'm using this code:
<script type="text/javascript">
$(document).ready(function(){
var location_input=$('input[id="autocomplete-key"]');
location_input.autocomplete({
source: "/api/get_key_name/",
minLength: 2
});
} );
// keeps same width as box
jQuery.ui.autocomplete.prototype._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
</script>
It works fine for the first input field, but it doesn't work with the added new input fields.
UPDATE: I made a snippet to better exemplify the problem:
$(document).ready(function() {
//here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
//here it will remove the current value of the remove button which has been pressed
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
var availableTutorials = [
"ActionScript",
"Bootstrap",
"C",
"C++",
];
$(document).ready(function() {
$.each($('.autocomplete'), function(i,e) {
$(e).autocomplete({
source: availableTutorials,
minLength: 2,
});
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
you're using id which is unique , use class and add the autocomplete to all the inputs :
html :
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here" id="autocomplete-key">
js :
$(document).ready(function() {
$.each($('.autocomplete'), function(i,e) {
$(e).autocomplete({
source: "/api/get_key_name/",
minLength: 2
});
});
});
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
}
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>