Jquery Tutorials
- What is JQuery
- DOM Document Object Model
- JQuery Syntax
- Jquery Selector
- Get & Set Form value
- jQuery - Attributes
- Attribute Methods
- jQuery - DOM Manipulation
- JQuery Events
- JQuery Effects
- JQuery Html/Css
- jQuery Insert Content
- Auto Hide Div
- JQuery noConflict()
- JQuery Form Validation
- Form Validation
- Login Form Validation
- Jquery Fadeout message
- Modal popup
- Jquery Ajax Forms
- Dependent Dropdown
- Autocomplete Country jquery ajax
- Dynamic Content Load using jQuery AJAX
- Dynamic star rating jQuery AJAX
- Drag and Drop Image Upload
- show Hide Elements By click on checkbox
- How to Add class in jQuery
- calculate discount in jQuery
- Calculate GST by input value in text box
- check Password strength in jQuery
- Count Remaining Character
- onClick Checkbox check all
- password match or not
- DataTable
- Date Picker
- Multiselect Dropdown with Checkbox
- Add Dynamic Input Field (Add More Input Field)
- submit button disable after one click
- Show hide password in Password textbox using checkbox
- Put value in the text field
- Set Data and Attributes
Customer Say
Add More input field dynamically using jquery.
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:
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
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);
}