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();
}
Related
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 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 a form, I want to create a new form input on enter action. I coded this which is working but the cursor doesn't go to the new created input and stays on the same..
How can I move the cursor to the added input;
var counter = 1;
$('#form')
.on('keydown', function(e) {
if (e.which == 13 || e.keyCode == 13) {
e.preventDefault();
counter++;
var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
.find('.addInput').removeClass('addInput').addClass('removeInput').end()
.find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
}
})
// Remove button click handler
.on('click', '.removeInput', function() {
var $row = $('.form-group').slice(-1);
counter--;
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 col-sm-12">
<form id="form" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" name="paleta-1" tabindex="1">
</div>
<div class="col-md-1 col-sm-1">
<button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="row">
<div class="row myTop">
<div class="col-md-1">
<button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Try adding $('.form-control:last').focus(); on addInput click event.
Or find input by name as like below. Check the snippet for reference.
var inputName="paleta-"+counter;
$("input[name='"+inputName+"']").focus();
var counter = 1;
document.getElementById("form").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
addInput();
e.preventDefault();
}
}
$('#form').on('click', '.addInput', function() {
addInput();
})
// Remove button click handler
.on('click', '.removeInput', function() {
var $row = $('.form-group').slice(-1);
counter--;
$row.remove();
});
function addInput() {
counter++;
var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
.find('.addInput').removeClass('addInput').addClass('removeInput').end()
.find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
var inputName = "paleta-" + counter;
$("input[name='" + inputName + "']").focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 col-sm-12">
<form id="form" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" name="paleta-1" tabindex="1">
</div>
<div class="col-md-1 col-sm-1">
<button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="row">
<div class="row myTop">
<div class="col-md-1">
<button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
I have a form where dynamically, the user can add/delete form inputs. The problem is that in form-group which is hidden, I can't add the attribute required because in submit event, the submit won't happen.
How can I add the attribute required every time i press + button and delete it when I press - button?
I tried this: $('#barcode').prop('required',true); but isn't right because if I press 2 times the + button, I will have 2 inputs with the same id...
var counter = 0;
$('#form1')
// Add button click handler
.on('click', '.addButton', function() {
counter++;
var $template = $('#addLine'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="barcode"]').attr('name', 'barcode-' + counter).end()
.find('[name="productsInBox"]').attr('name', 'productsInBox-' + counter).end()
.find('[name="packer"]').attr('name', 'packer-' + counter).end()
.find('[name="count"]').attr('name', 'count-' + counter).end();
$('#barcode').prop('required', true);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-index');
counter--;
// Remove element containing the fields
$('#barcode').prop('required', false);
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6">
<form id="form1" method="post" action="actions?do=barcodePaleta_submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
<div class="col-md-3 col-sm-4">
<input type="text" pattern=".{23,23}" class="form-control" name="barcode" required/>
</div>
<label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
<div class="col-md-1 col-sm-3">
<input type="number" min="0" class="form-control" name="productsInBox" required/>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div id="addLine" class="form-group hide">
<label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
<div class="col-md-3 col-sm-4">
<input id="barcode" type="text" pattern=".{23,23}" class="form-control" name="barcode" />
</div>
<label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
<div class="col-md-1 col-sm-3">
<input type="number" min="0" class="form-control" name="productsInBox" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="form-group myTop">
<div class="col-lg-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
I miss understood question.try this for + button
if($('#barcode').attr('required') != true){
$('#barcode').attr('required',true);
}
this for - button
if($('#barcode').attr('required')){
$('#barcode').removeAttr('required');
}
I am working on a hexadecimal to decimal color code converter. I wish to change the positions of the form elements on the click of a button.
i.e when i click hexa to deci button the form that takes hexadecimal code must appear on the left and when i deci to hexa button the form that takes decimal code must appear first.
my work at codepen
HTML CODE :
<!DOCTYPE html>
<head>
<title>my color converter</title>
</head>
<body>
<h3>TOGGLE COLOR REPRESENTATION</h3>
<div class="align text-center">
<button class="btn btn-default button1">HEXA TO DECI</button>
<button class="btn btn-default button2">DECI TO HEXA</button>
</div>
<div class="row">
<div class="col-md-6 column1">
<form>
<div class="form-group colorcode1">
<label for="hex2decimal" class="class1"><p>COLOR IN DECIMAL CODE</p></label>
<input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code">
</div>
</form>
</div>
<div class="col-md-6">
<form>
<div class="form-group colorcode2">
<label for="hex2decimal" class="class3"><p>COLOR IN HEXADECIMAL CODE</p></label>
<input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code">
</div>
</form>
</div>
</div>
<div class="align text-center">
<button class="btn btn-default button3">CONVERT</button>
<button class="btn btn-default button4">REFRESH</button>
</div>
</body>
CSS CODE :
.form-group {
margin-top: 60px;
width:80%;
margin-left:8.33333333%;
text-align: center;
}
h3 {
text-align:center;
margin-top:40px;
}
.align {
margin-top:40px;
}
JavaScript :
$(document).ready(function(){
$(".button1").on('click',function(){
var form1 = $('.colorcode1').detach();
form1.appendTo('form');
});
});
Note: I am learning Jquery and i have included the CDN.
I added this to your style:
.column1 {
float: right;
}
and then changed the js like this:
$(document).ready(function() {
$(".button1").on('click', function() {
$('.colorcode1').parents('div:first').toggleClass('column1');
$('.colorcode2').parents('div:first').toggleClass('column1');
});
});
I would call the class something else than column1, though.
see working code here. your javascript will be as follows:
codepan
$(document).ready(function() {
$(".button1").on('click', function() {
var form1 = $('.colorcode1');
var form2 = $('.colorcode2');
jQuery(form1)
.detach()
.appendTo('#hax');
jQuery(form2)
.detach()
.appendTo('#dec');
});
$(".button2").on('click', function() {
var form1 = $('.colorcode1');
var form2 = $('.colorcode2');
jQuery(form1)
.detach()
.appendTo('#dec');
jQuery(form2)
.detach()
.appendTo('#hax');
});
});
HTML :
<h3>TOGGLE COLOR REPRESENTATION</h3>
<div class="align text-center">
<button class="btn btn-default button1">HEXA TO DECI</button>
<button class="btn btn-default button2">DECI TO HEXA</button>
</div>
<div class="row">
<div class="col-md-6 column1">
<form id="dec">
<div class="form-group colorcode1">
<label for="hex2decimal" class="class1">
<p>COLOR IN DECIMAL CODE</p>
</label>
<input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code">
</div>
</form>
</div>
<div class="col-md-6">
<form id="hax">
<div class="form-group colorcode2">
<label for="hex2decimal" class="class3">
<p>COLOR IN HEXADECIMAL CODE</p>
</label>
<input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code">
</div>
</form>
</div>
</div>
<div class="align text-center">
<button class="btn btn-default button3">CONVERT</button>
<button class="btn btn-default button4">REFRESH</button>
</div>