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
});
});
});
Related
How to get input values in php array dynamically field add and remove data, increase and decrease field dynamically. I wan to get subject value in array or json format in php only.
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field-name">Field Name</label>
<input type="text" class="form-control" name="subject[]" id="subject[]" placeholder="Subject">
</div>
<div class="form-group">
<label class="sr-only" for="field-value">Field Value</label>
<input type="text" class="form-control" name="mark[]" id="mark[]" placeholder="Total Mark">
</div>
<button class="btn btn-link" data-role="remove">
<span class="fa fa-minus text-danger"></span>
</button>
<button class="btn btn-link" data-role="add">
<span class="fa fa-plus"></span>
</button>
</div>
<script>
$(function () {
// Remove button click
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-inline [data-role="remove"]',
function (e) {
e.preventDefault();
$(this).closest('.form-inline').remove();
}
);
// Add button click
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-inline [data-role="add"]',
function (e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function () {
$(this).val('');
});
container.append(new_field_group);
}
);
});
</script>
try this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="body">
<div class="row col-md-12" style="padding-top: 50px;">
<form>
<div class="form-group col-md-12">
<button type="button" class="btn btn-secondary" onClick="AddForm();">Add</button>
<button type="button" class="btn btn-secondary" onClick="DeleteForm();">Delete</button>
</div>
<div id="SectionMultipleForm1" class="col-md-12">
<h5 id="sec_tittle1" style="font-size: 16px; text-decoration: underline;">Form 1</h5>
<div class="form-group">
<label>Field A</label>
<input type="text" id="FieldA1" name="FieldA[]" class="form-control">
</div>
<div class="form-group">
<label>Field B</label>
<input type="text" id="FieldB1" name="FieldB[]" class="form-control">
</div>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-secondary"> Submit</button>
</div>
</form>
<br>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script type="text/javascript">
function AddForm(){
var $div = $('div[id^="SectionMultipleForm"]:last');
var now = parseInt( $div.prop("id").match(/\d+/g), 10 ) ;
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
$("#SectionMultipleForm"+now).eq(0).clone().prop('id', 'SectionMultipleForm'+num ).insertAfter('div[id^="SectionMultipleForm"]:last');
//title
$("#SectionMultipleForm"+num).find("#sec_tittle"+now).attr("id", "sec_tittle"+num);
$("#SectionMultipleForm"+num).find("#sec_tittle"+num).text("Form "+num);
//FieldA1
$("#SectionMultipleForm"+num).find("#FieldA"+now).attr("id", "FieldA"+num);
document.getElementById("FieldA"+num).setAttribute('value','');
//FieldB1
$("#SectionMultipleForm"+num).find("#FieldB"+now).attr("id", "FieldB"+num);
document.getElementById("FieldB"+num).setAttribute('value','');
}
function DeleteForm(){
var num = $('div[id^=SectionMultipleForm]').length;
if(num!=1){
$('#SectionMultipleForm'+num).remove();
}
}
</script>
</body>
</html>
first at function AddForm() find the last div with id SectionMultipleForm and get the number
this section at <script> is to clone inside id SectionMultipleForm and put it after the last SectionMultipleForm
$("#SectionMultipleForm"+now).eq(0).clone().prop('id', 'SectionMultipleForm'+num ).insertAfter('div[id^="SectionMultipleForm"]:last');
and this section change id FieldA,FieldB, and title at the last clone div with id SectionMultipleForm
//title
$("#SectionMultipleForm"+num).find("#sec_tittle"+now).attr("id", "sec_tittle"+num);
$("#SectionMultipleForm"+num).find("#sec_tittle"+num).text("Form "+num);
//FieldA
$("#SectionMultipleForm"+num).find("#FieldA"+now).attr("id", "FieldA"+num);
document.getElementById("FieldA"+num).setAttribute('value','');
//FieldB
$("#SectionMultipleForm"+num).find("#FieldB"+now).attr("id", "FieldB"+num);
document.getElementById("FieldB"+num).setAttribute('value','');
and at the fuction DeleteForm() first count how many div have id SectionMultipleForm and delete the last div with that id
var num = $('div[id^=SectionMultipleForm]').length;
if(num!=1){
$('#SectionMultipleForm'+num).remove();
}
The code is working but I'am getting all the values in a single time , what I want is getting the value when the remove button is click and then store those values in an array. Please Help me I'm kinda stuck in this. Totally new to javascript. Tried searching on google but no luck at all.
<html lang="en">
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<form action="">
<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>
</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="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>
</div>
</div>
</div>
<script type="text/javascript">
$(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() {
var values = $(this).val();
alert(values);
$(this).parents(".control-group").remove();
});
});
</script>
</body>
</html>
$(document).ready(function() {
var arrays = [];
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
var value = $(this).closest('.input-group').find('input').val();
arrays.push(value);
console.log($(this).closest('.input-group').find('input').val());
console.log("arrays: ", arrays)
$(this).parents(".control-group").remove();
});
});
<html lang="en">
<head>
<title>Sample</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<form action="" >
<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>
</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="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>
</div>
</div>
</div>
Basically assign onclick event to reset button, which gets values from text fields and e.g. array_name.push(document.getElementByName('addmore[]').value); and then do what do you need.
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'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.
Here is my form and I tried to take all the values from the form when submit button is clicked
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>User Form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">User Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
<input name="name" placeholder="Enter User Name" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Age</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
<input name="age" placeholder="Enter Age " class="form-control" type="text">
</div>
</div>
</div><div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button name="submitbutton" type="submit" class="btn btn-success" >Submit <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
Then I write the script to take all values when submit
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var age= $("#age").val();
console.log(name);
console.log(age);
});
});
</script>
But it is logging the values when submitting.Any help is appreciated
$("#submit").click(function(){
You are assigin a click event handler to an element with id submit. There is no such element in you code.
What you could rather do is assign a handler to the form's submit event. Also, there are no elements with id name and age. You can use the query selector with the input's name attribute.
$('#contact_form').submit(function(e) {
var name = $('#contact_form input[name="name"]').val();
var age = $('#contact_form input[name="age"]').val();
console.log(name);
console.log(age);
});
You can get all the form input values by using $('#formId').serialize() function. But as per your code:
<button name="submitbutton" type="submit" class="btn btn-success" >Submit <span class="glyphicon glyphicon-send"></span></button>
you are using a button of type submit, which submits the form and you did not get any value in your ajax code. So change it it:
<button name="submitbutton" type="button" class="btn btn-success" >Submit <span class="glyphicon glyphicon-send"></span></button>
and try again. To get the individual value you can use
var name = $("#name").val();
with the above mentioned change.