I am trying to copy full form on click add button,
copying only label name.
below JS code: below is js code trying to add form dynamically.
how to add same form below last div onclick '+' button.
using js code below, only adding panel, but it's not working.
document.getElementById('add').onclick = duplicate;
var i = 0;
var original = document.getElementById('add-form');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "add-form" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
<div class="row mt-4">
<div class="row">
<div class="col-md-3 text-center mt-3 ml-3">
<button type="button" class="btn btn-light" id="add"><i class="fas fa-plus fa-xs"></i></button>
</div>
<div class="col-md-3 text-center mt-3 ml-4">
<button type="button" class="btn btn-light" id="minus"><i class="ri-delete-bin-line mr-0"></i></button>
</div>
</div>
<div class="col-md mt-1" id="add-form" style="width: 100%;">
<button class="accordion btn btn-primary">Product screen</button>
<div class="panel">
<div class="col-sm-12">
<div class="card mt-3">
<div class="col-md-12">
<!-- first row -->
<div class="row" style="margin-top: 9px;">
<div class="col-sm">
<label for="fname">product_name
</label>
<input type="text" id="fname" class="form-control" placeholder="product_name">
</div>
<div class="col-sm">
<label for="fname">price
</label>
<input type="text" id="fname" class="form-control" placeholder="price">
</div>
<div class="col-sm">
<label for="fname">pur_id
</label>
<input type="text" id="fname" class="form-control" placeholder="pur_id">
</div>
<div class="col-sm">
<label for="field2">type
</label>
<select name="field2" id="field2" class="selectpicker form-control" data-style="py-0" width="50">
<option selected>select one</option>
<option>type1</option>
<option>type2</option>
<option>type3</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
after click add button displayed only this panel.
Related
My form sends multiple forms of (name and image). However, the last element sends a name only with the wrong 'name.' Do I need to simultaneously make multiple inserts in the database to solve this problem?
Form View
Dump of the request with wrong last element of array
Script of repeat the form
<div class="row">
<div class="col-12">
<form class="form repeater-default" method="POST"
action="{{ route('admin.cat.doCreate2') }}"
enctype="multipart/form-data">
#csrf
<input type="hidden" name="admin_id"
value="{{ auth()->guard('admin')->user()->id }}">
<div data-repeater-list="group_a">
<div data-repeater-item>
<div class="row justify-content-between">
<div class="col-md-4 col-sm-12 form-group">
<label for="Name">Name </label>
<input type="text" class="form-control" name="name[]" required
placeholder="Enter Name of Category">
</div>
<div class="col-md-4 col-sm-12 form-group">
<label for="Image">Image </label>
<input type="file" class="form-control" name="image[]">
</div>
{{-- Delete Button --}}
<div class="col-md-2 col-sm-12 form-group d-flex align-items-center pt-2">
<button class="btn btn-danger" data-repeater-delete type="button"><i
class="mdi mdi-x"></i>
Delete
</button>
</div>
</div>
<hr>
</div>
</div>
<div class="form-group">
<div class="col p-0">
<button class="btn btn-primary" data-repeater-create type="button"><i class="mdi mdi-plus"></i>
Add
</button>
</div>
<div class="col p-0">
<button class="btn btn-success" type="submit"><i class="mdi mdi-account"></i>
Done
</button>
</div>
</div>
</form>
</div>
</div>
Script
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tableData tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
first solution : inputs and their labels must be on table tag and th tag and td tag
to send right data
second solution : dont use array for inputs names like name[ ] or image[ ] :
<div class="col-md-4 col-sm-12 form-group">
<label for="Image">Image </label>
<input type="file" class="form-control"
name="image">
</div>
and receive datas like this :
$data=$request->group_a
group_a is your data-repeater-list name :
<div data-repeater-list="group_a">
and now you can put $data in foreach and use data arrays for create ...insert and anything
I'm adding dynamically a selected box items.
I want when I check a check-box set the value or the selected option of all the additional selected-box to the selected option of the first selected box.
So I'm using the following code to add dynamically input fields.
$(document).ready(function() {
$("body").on("click", ".add_new_frm_field_btn", function() {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(
`<div class="col-12 outer" data-index="${index}_${random}">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting" >
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div> </div></div> `);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="btn btn-primary btn-lg pl-4 pr-0 check-button">
<label class="custom-control custom-checkbox mb-0 d-inline-block">
<input type="checkbox" class="custom-control-input" id="checkAll">
<span class="custom-control-label"> </span>
</label>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
<button type="button" class="btn btn-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</div>
<div class="casting_details">
<div class="casting_details2">
<div class="d-flex flex-row mb-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want when I Add a multiple additional selected-box and I check the checked box all the additional selected-box get the same selected option of the first selected-box.
That means when I add the first row and I select option1 , all the additional rows should get the option1 as the first additional row.
I'm still a beginner in jQuery and JavaScript, is it possible to do this and is it possible to do it with jQuery or JavaScript?
First you need to set unique id for each select item: id="id_casting${index}".
Then you set selected option if your check box has checked:
var checked = $("#checkAll").is(':checked')
if (checked)
$("#id_casting" + index).val($("#id_casting").find(":selected").val());
$(document).ready(function () {
$("body").on("click", ".add_new_frm_field_btn", function () {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(
`<div class="col-12 outer" data-index="${index}_${random}">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting${index}" >
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div> </div></div> `);
var checked = $("#checkAll").is(':checked')
if (checked)
$("#id_casting" + index).val($("#id_casting").find(":selected").val());
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="btn btn-primary btn-lg pl-4 pr-0 check-button">
<label class="custom-control custom-checkbox mb-0 d-inline-block">
<input type="checkbox" class="custom-control-input" id="checkAll">
<span class="custom-control-label"> </span>
</label>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
<button type="button" class="btn btn-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</div>
<div class="casting_details">
<div class="casting_details2">
<div class="d-flex flex-row mb-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
friends,
I hope all be fine. Actually, I face to this issue.
We can display HTML table row values into a text box, so if we want to take an image from table row and to show it in a div how we can do it? so with these codes, I can take the value from HTML table row to send for text box, so how I take for the image in jquery.
//HTML Codes
<div class="md-form mb-5" style="margin-top:-10px;">
<div class="down" >
<img src="images/IT.jpg">
</div>
</div>
<div class="md-form mb-5" style="margin-left:130px;">
<div class="input-group-prepend" >
<span class="input-group-text" style=" width:35px;">ID</span>
</div>
<input type="text" name="txtSId" id="txtSId" class="form-control"
aria-label="Amount (rounded to the nearest dollar)" aria-
describedby="basic-addon">
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Name</span>
</div>
<input type="text" name="txtSName" id="txtSName" class="form-control"
aria-label="Amount (rounded to the nearest dollar)">
</div>
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Position</span>
</div>
<input type="text" name="txtSPosition" id="txtSPosition" class="form-
control">
</div></div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Facebook </span>
</div>
<input type="text" name="txtSFacebook" id="txtSFacebook" class="form-
control">
</div></div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"> Twitter</span>
</div>
<input type="text" name="txtSTwitter" id="txtSTwitter" class="form-
control">
</div>
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">G<strong>+</strong></span>
</div>
<input type="text" name="txtSGoogleplus" id="txtSGoogleplus"
class="form-control">
</div>
</div></div>
<script>
// For View data
$(document).ready(function(){
$("#dtBasicExample tbody").on('click','tr',function(){
$("#txtSelect").text("1 row selected");
var rowData=$(this).children("td").map(function(){
return $(this).text();
}).get();
$("#txtSId").val(rowData[0]);
$("#txtSName").val(rowData[1]);
$("#txtSPosition").val(rowData[2]);
$("#txtSFacebook").val(rowData[4]);
$("#txtSTwitter").val(rowData[5]);
$("#txtSGoogleplus").val(rowData[6]);
});
});
</script>
Put an empty img element and copy the value at runtime from Table row data.
Use the below code snippet for reference.
$(document).ready(function() {
});
function copyImage() {
alert($("#imgS").find("img").attr("src"));
$(".down img").attr("src", $("#imgS").find("img").attr("src"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="down">
<img src="" />
</div>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>
<img width="100px" src="https://vignette.wikia.nocookie.net/universeconquest/images/e/e6/Sample.jpg/revision/latest?cb=20171003194302">
</td>
<td>55577855</td>
</tr>
</table>
<button onClick="copyImage()"> Copy Image </button>
</body>
I have a ejs(html) file, and There is a div class called "card".
What I want to do is that, if I click the button("Click me") then,
card-header(header1) has to be changed(before --> after) with colored back-ground.
However when I clicked the button, only the back-ground color was changed (excluding the header). need your help.
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.setAttribute("value", "After");
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6
Update the innerHTML
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.innerHTML = "After";
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6
I am creating the fields dynamically in HTML using this JS, and in multiselect I'm using bootstrap multiselect here is the code https://bootsnipp.com/snippets/Ekd8P when I click on the add more button it creates the form dynamically.
js code for creating a form dynamically :
$(function() {
// Remove button
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="remove"]',
function(e) {
e.preventDefault();
$(this).closest('.form-horizontal').remove();
}
);
// Add button
var i = 1;
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-horizontal:first-child').clone();
new_field_group.find('input').each(function() {
if (this.name == 'tags[0]') {
$(this).tagsinput('destroy');
$(this).tagsinput('removeAll');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="form-group"]');
new_container.find(".bootstrap-tagsinput:first").remove();
} else {
$(this).val('');
}
});
new_field_group.find('select').each(function() {
if (this.name == 'addons[0]') {
$(this).multiselect('rebuild');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="multiselect-native-select"]');
new_container.find(".multiselect-native-select > .multi").remove();
} else {
$(this).val('');
}
});
i += 1;
container.append(new_field_group);
}
);
});
and html code for form elements:
<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
{{ csrf_field() }}
<div data-role="dynamic-fields">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Select Food Type</label>
<div class="col-sm-8">
<select id="select1" class="form-control" name="select[]" required>
#foreach($types as $type)
<option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
#endforeach
</select>
<p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Dish Description</label>
<div class="col-sm-8">
<textarea name="Description[]" id="field-value" class="form-control" rows="1"></textarea>
</div>
</div>
</div>
<div class="col-sm-4 contacts">
<div class="form-group">
<label class="col-sm-3" for="rolename">Add Addons</label>
<div class="col-sm-8">
<select id="dates-field2" class="multiselect-ak form-control" name="addons[0]" id="trigger3" data-role="multiselect" multiple="multiple">
#foreach($addons as $addon)
<option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Tags</label>
<div class="col-sm-8">
<input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="e.g. spicy, healthy" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="col-sm-4">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" class="trigger" id="trigger" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields" class="hidden_fields" style="display:none;">
<input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
Delete Item
</button>
<button class="btn ink-reaction btn-raised btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add">
Add More Items
</button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
<div class="form-group">
<button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary" style="margin-top: -62px;margin-left: 160px;">Submit Items</button>
</div>
<!--end .form-group -->
</form>
The issue is that when I click on the add more item it reflects the multiselect dropdown twice as you see in this image.
I want that if I click on the add more item button it restates the multiselect dropdown as in the first state.
see this jsfiddle.net/akshaycic/svv742r7/7 it will clear all your doubt. on click plus button it is not reflect to "none selected" state it will remain in its initial state.
Any leads would be helpful. Thank you in advance.