How to add dynamic input fields using jquery? (Add more fields)

Add More input field dynamically using jquery.

Show Demo

File name : index.php

<?php
if(isset($_POST['mytext'])){
$data = $_POST['mytext'];
print_r($data);

foreach($data as $value){
// Your database query goes here

}
}
?>


<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">
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>




<form method="post" name="frm" action="">
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>


<button type="submit" name="submit" value="submit">Submit </button>
</form>

Example 2:

Show Demo

File name : index.php


<title>Jquery Add More Field Example</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">


<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Bootstrap Jquery Add More Field Example</div>
<div class="panel-body">


<form action="action.php" >


<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 -->
<div class="copy 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() {


$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});


$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});


});


</script>



<?php
print_r($_REQUEST['addmore']);
exit;
?>

File name : index.php


Add Multiple Input Field

Demo Example

File name : index.php

<div class="container-fluid">
<div class="page-content-inner">
<div class="profile" style="margin-top:-40px;">



<!--Card Start-->
<div class="card card-default">
<div class="card-header form-card-header">
<h3 class="card-title"> Officer Information of Regional Office</h3>
</div>
<!-- /.card-header -->

<div class="card-body">



<div class="form-group">
<div class="col-md-12">
<div class="form-group row">

<div class="col-md-12">
<input type="hidden" name="org_count" value=1>
<table class="table table-bordered" id="dynamic_field1">
<tr>
<td><select name="addmore1[0][department_name]" class="form-control requireds selectpicker">
<option value="" selected="selected" disabled="disabled">--- Select Department ---</option>

<?php if(!empty($department_info)){

foreach($department_info as $row){

?>
<option value="<?php echo $row->pki_id; ?>"><?php echo $row->uvc_department_name;?></option>

<?php } }?>

</select>
</td>
<td><input type="text" name="addmore1[0][officer_name]" placeholder="Name" class="form-control name_list" /></td>
<td><input type="text" name="addmore1[0][officer_designation]" placeholder="Designation" class="form-control name_list" /></td>
<td><input type="text" name="addmore1[0][officer_specialization]" placeholder="Specialization" class="form-control name_list" /></td>
<td><input type="text" name="addmore1[0][officer_email]" placeholder="Email" class="form-control name_list" /></td>
<td><input type="text" name="addmore1[0][officer_mobile]" placeholder="Mobile" class="form-control name_list" /></td>
<td><input type="date" name="addmore1[0][date_posting]" placeholder="Date" class="form-control name_list" /></td>
<td><button type="button" name="add_field1" id="add_field1" class="btn btn-success"><i class="fa fa-plus-circle"></i></button></td>
</tr>
</table>



</div>

</div>
</div>
</div>


</div>
</div>
</div>
</div>







<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> -->

<script type="text/javascript">
$(document).ready(function(){
var i=1;
$('#add_field1').click(function(){
//var i = $('#org_count').val();
$('#dynamic_field1').append('<tr id="row_addmore1'+i+'" class="dynamic-added"><td><select name="addmore1['+i+'][department_name]" class="form-control requireds selectpicker"> <option value="" selected="selected" disabled="disabled">--- Select Department ---</option> <?php if(!empty($department_info)){foreach($department_info as $row){?><option value="<?php echo $row->pki_id; ?>"><?php echo $row->uvc_department_name;?></option><?php } }?></select></td><td><input type="text" name="addmore1['+i+'][officer_name]" placeholder="officer name" class="form-control name_list" required /></td><td><input type="text" name="addmore1['+i+'][officer_designation]" placeholder="Designation" class="form-control name_list" required /></td><td><input type="text" name="addmore1['+i+'][officer_specialization]" placeholder="Specialization" class="form-control name_list" required /></td><td><input type="text" name="addmore1['+i+'][officer_email]" placeholder="Email" class="form-control name_list" required /></td><td><input type="text" name="addmore1['+i+'][officer_mobile]" placeholder="Mobile" class="form-control name_list" required /></td><td><input type="date" name="addmore1['+i+'][date_posting]" placeholder="date posting" class="form-control name_list" required /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove_addmore1"><i class="fa fa-trash"></i></button></td></tr>');
i++;
//$('#org_count').val(i);
});

$(document).on('click', '.btn_remove_addmore1', function(){
var btn_id = $(this).attr("id");
$('#row_addmore1'+btn_id+'').remove();
});
});
</script>



$regi_off_officer['regional_office_officer'] = $this->input->post('addmore1');

// echo "<pre>"; print_r($regi_off_officer['regional_office_officer']); die;
foreach ($regi_off_officer['regional_office_officer'] as $key => $data_array)
{
$data_arr1 = array(
'factsheet_region_id_fk' => $last_insert_id,
'department_id' => $data_array['department_name'],
'name' => $data_array['officer_name'],
'designation' => $data_array['officer_designation'],
'specialization' => $data_array['officer_specialization'],
'email' => $data_array['officer_email'],
'mobile' => $data_array['officer_mobile'],
'posting_date' => $data_array['date_posting'],
'created_at' => date('Y-m-d H:i:s'),
'created_by' => $_SESSION['UserID'],
'status' => '1'

);
$result1 = $this->Common->Insert('regional_officer',$data_arr1);
}





Previous Next


Trending Tutorials




Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here