This is my view please have a look :
<div class="form-group target" id="tools" >
<div class="input-group">
<div class="col-lg-6"> <select class="form-control" style="width: 100%" name="tool_id[]" id="toolss" onchange="tool(this)" required>
<option value="">Select</option>
</select></div>
<div class="col-lg-3">
<input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
</div>
<div class="col-lg-3" id="avail">
<p class="available">0 available</p>
</div>
<span class="input-group-btn">
<button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
</button>
</span>
</div>
</div>
This is my script :
function tool(sel)
{
var tools=sel.value;
alert(tools);
var url='<?php echo base_url(); ?>admin/tool/ajax_available';
$.post(url, {tools:tools}, function(data){
alert("Value: " + $(".available").html(data));
});
}
The problem is whenever I goes on selecting values from the select box the corresponding value and all the previously selected values are becoming same.
the image am showing here.
Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool1.PNG.
Working fiddle.
Problem : When you use .available selector it will affect all the element with class available in your document.
Suggested solution :
The id should be unique in the same document so if you've multiple tools you should replace the id with a class for the valid structure :
<div class="form-group target tools">
Then you should refer to the current element in your selector, so use :
$(sel).closest('.tools').find('.available').html(data);
Hope this helps.
Related
Below is the code I tried so far.
<div class="form-group row insert" id="form-group-insert0">
<label style="text- transform: capitalize" for="column" class="col-md-2 col-form-label">Column</label>
<div class="col-md-9">
<select class="form-control" name="id (int)" id="id0"></select>
<select class="form-control" name="name (varchar)" id="name0"></select>
<select class="form-control" name="primary_details_schema (text)" id="primary_details_schema0">
</select>
<input type="button" class="btn btn-primary insert_more" value="Insert more" id="insert_more">
</div>
</div>
I want to clone the above div each time when click on Insert more button with unique id.
Also clone div have a Remove button instead of Insert button.
It will be like below:
<div class="form-group row insert" id="form-group-insert1">
<label style="text- transform: capitalize" for="column" class="col-md-2 col-form-label">Column</label>
<div class="col-md-9">
<select class="form-control" name="id (int)" id="id1"></select>
<select class="form-control" name="name (varchar)" id="name1"></select>
<select class="form-control" name="primary_details_schema (text)" id="primary_details_schema1">
</select>
<input type="button" class="btn btn-danger remove" value="Remove" id="remove">
</div>
</div>
My javascript code:
$sharerCount=1;
$(document).on('click', ".insert_more", function (){
$('#form-group-insert0').clone().attr('id', 'form-group-insert_' + $sharerCount).insertAfter('.insert:last').find("*[id]").attr('id', 'input_' + $sharerCount).val("").clone().end();
$sharerCount += 1;
});
I removed the id's because really, they step on each others toes and add unnecessary complexity. For example, you would create 5 form-groups and then delete the 3rd one. Do you have to then cycle through and adjust everyone else's id? The id's are essentially indexes and that is easy enough to get dynamically. The best way to approach dynamically created elements and their properties are through relative paths. If there were actual IDs involved, that would be a consideration, but for something like this...
$(document).on('click', ".remove_clone", function() {
$(this).closest('[data-cloned-insert]').remove()
})
$(document).on('click', ".insert_more", function() {
let clone = $('[data-master-insert]').clone();
clone.insertAfter($('.form-group:last')).removeAttr('data-master-insert').attr('data-cloned-insert', '').find('input[type=button]').val('Remove').removeClass('insert_more').addClass('remove_clone')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row insert" data-master-insert>
<label style="text- transform: capitalize" for="column" class="col-md-2 col-form-label">Column</label>
<div class="col-md-9">
<select class="form-control" name="id (int)"></select>
<select class="form-control" name="name (varchar)"></select>
<select class="form-control" name="primary_details_schema">
</select>
<input type="button" class="btn btn-primary insert_more" value="Insert more">
</div>
</div>
Here am using Dynamic-Form-Element-Creation-And-Deletion-Plugin-Addel to insert more values and its working but the problem am facing here is when i select a value from the select box used by addel the corresponding data is appearing in the corresponding box and if i choose another select box by clicking add button the corresponding value comes in the first field not in the corresponding field.
here is my view
<div class="form-group ">
<label class="col-lg-3 control-label">Select Tools<span
class="required">*</span></label>
<div class="col-lg-6">
<div class="addel">
<div class="form-group target">
<div class="input-group">
<div class="col-lg-6"> <select class="form-control tools" style="width: 100%" name="tool_id[]" id="tools" onchange="tool(this)" required>
<option value="">Select</option>
</select></div>
<div class="col-lg-3">
<input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
</div>
<div class="col-lg-3" id="avail">
<input type="text" class="form-control" name="available" id="available" placeholder="Available" value="0 available">
</div>
<span class="input-group-btn">
<button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
</button>
</span>
</div>
</div>
<button type="button" class="btn btn-success addel-add"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
here is my script
<script>
function tool(sel)
{
var tools=sel.value;
alert(tools);
var url='<?php echo base_url(); ?>admin/tool/ajax_available';
$.post(url, {tools:tools}, function(data)
{
alert("Value: " + $("#avail").html(data));
});
}
</script>
here is my controller
public function ajax_available()
{
$data['available']=$this->Tool_model->view_available_by_type($_POST['tools']);
//var_dump($data['available']);
$this->load->view('admin/tool/ajax_available',$data);
}
here is my ajax_available view
<input type="text" class="form-control" name="available" id="available" placeholder="" value="<?php echo $available->available;?> available">
my picture looks like this
Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool.PNG.
You are not giving your elements unique identifiers. Every time you add a new row with a dropdown and textbox, it generates the same IDs again for these new elements. This is invalid HTML, all elements must have a unique id.
So when you do
$("#avail").html(data)
it finds the first instance of an element with that ID - because there should only be one. As far as javascript is concerned, the others don't exist, because they are not valid.
Since you will have multiple "Available" textboxes in the page, you can't rely on ID to populate the right one. Give your "avail" div a class instead of an id, and then tell the script to find the related one by using its position in the markup:
<div class="col-lg-3 avail">
<input type="text" class="form-control available" name="available" placeholder="Available" value="0 available">
</div>
And then in your code, instead of $("#avail").html(data), do:
$(this).parent().parent().find(".avail").html(data);
This goes up the DOM by two divs, to find the common ancestor of both the select (this in the context of the function), and the div you want to change, and then searches within it for an element with the avail class, and populates it with the data.
You should also remove "id" attributes from any other elements which can be duplicated, such as "quantity", for example.
P.S. I'm not sure why you use a textbox for this "Available" property - it seems like a status value coming from the database which the user should not change. Therefore it should be a label or span, really. Textboxes are for input, not output. Plus your user could type and change the value, which might confuse them. But I will leave you to sort that.
so I have an issue with trying to figure out how to get this to work. I want to make a dropdown selection, and I want all the selections in the dropdown to show up in the main input box along with the original input value.
Here is my form that I am using to send the values to ajax to send to my php file.
<div class="input-group" id="adv-search">
<input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<h4 class="text-center">Advanced Search</h4>
<label for="filter">Option</label>
<select class="form-control" name="place" id="myList">
<option selected></option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
</div>
<div class="form-group">
<label for="contain">Location</label>
<input class="form-control" name="something1" type="text" id="list2">
</div>
<div class="form-group">
<label for="contain">Something2</label>
<input class="form-control" name="contain" type="text" id="list3">
</div>
<p><br/>
<button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button>
</form>
</div>
<button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
</div>
</div>
</div>
</div>
</div>
Now I'm trying to get the values from the select dropdown(#myList) and the other inputs(#list2, #list3) and display them in the main input(#filter) along with the value that was entered in (#filter). My code below will display them per keypress but it repeats it since its in the function. How do I get each input to display in the #filter input.
$('#list2').on("input", function(){
var filter = $(this).val();
var myList = $('#filter').val();
$('#filter').val(filter + " " + myList);
});
Here is a picture of what I would like to accomplish. Any and all help is greatly appreciated. Thank you.
hello If I am understanding correctly according to your image and your piece of code that you want to get the all option input value into the main search box if that so you can try this Jquery code
<script>
$(document).ready(function() {
$("#insideButton").click(function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
I just used one button as submit option you can change it as your wish
you can also write the same code if you want form submit option then there will be a slightly change
<script>
$(document).ready(function() {
$(".form-horizontal").on('submit',function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
hope it helps you can also check this fiddle
fiddle demo
When I click duplicate it duplicates the row fine, but when I click it again I get another 2, then 4 etc, how can I stop this from happening and just clone one div on each click...
Jquery:
<script>
$(".clonable-button").bind('click', function(e){
e.preventDefault();
var section = $(this).data('clone');
var parent = $('[data-id="' + section + '"]');
var sequence = 0;
if(!$(this).data('last')) {
sequence = $(parent).find('.cloneable').last().data('id');
} else {
sequence = $(this).data('last');
}
$(this).data('last', ++sequence);
$(parent).append(parent.html());
});
$('.clone-wrapper').on('click', '.clone-remove',function(){
var parent = $(this).parents('.cloneable');
$(parent).remove();
});
</script>
html:
<div class="clone-wrapper" data-id="skill">
<div class="row cloneable" data-id="0">
<div class="col-md-9">
<div class="form-group">
<label for="skill_name_0">Skills and Qualifications Titles </label>
<input id="skill_name_0" placeholder="ex : PHP, WordPress" name="skill[0][name]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="skill_percentage_0">Job Position </label>
<input id="skill_percentage_0" placeholder="ex : 90" name="skill[0][percentage]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-12 text-right clone-remove" data-last="">
<div class="btn btn-danger btn-sm" data-clone="skill">
<i class="fa fa-times"></i> Remove Skill </div>
</div>
</div>
</div>
<div class="white-space-20"></div>
<div class="row text-right">
<div class="col-md-12">
<div class="btn btn-default btn-sm clonable-button" id="skill">
<i class="fa fa-plus"></i> Add Skill </div>
</div>
</div>
I just want the following code duplicated once on each click
<div class="row cloneable" data-id="0">
<div class="col-md-9">
<div class="form-group">
<label for="skill_name_0">Skills and Qualifications Titles </label>
<input id="skill_name_0" placeholder="ex : PHP, WordPress" name="skill[0][name]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="skill_percentage_0">Job Position </label>
<input id="skill_percentage_0" placeholder="ex : 90" name="skill[0][percentage]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-12 text-right clone-remove" data-last="">
<div class="btn btn-danger btn-sm" data-clone="skill">
<i class="fa fa-times"></i> Remove Skill </div>
</div>
</div>
The problem is in this line:
var parent = $('[data-id="' + section + '"]');
Each time you append new block with the same data-id number of elements that match this selector increases. So to avoid this you have make the selector more specific. Like:
var parent = $('[data-id="' + section + '"]:last');
Also there is a jQuery method to clone the element. So change your line from:
$(parent).append(parent.html());
to:
parent.append(parent.clone());
That will fix the issue.
You are binding the click event multiple times somehow, You should either use a delegated event handler or use the off method like below.
$(".clonable-button").off('click').on('click', function(e){
I am using this code inside $(document).ready(function(){ ... }):
$('#flavours').on('click', '.toggle-quantity', function(e){
e.preventDefault();
var $quantity_percent = $(this).parent().find('.quantity_percent');
if($quantity_percent.is(':hidden')){
console.log("is hidden");
$quantity_percent.show();
}else{
console.log("is not hidden");
$quantity_percent.hide();
}
});
What's happening is the console.log() is working, but the $quantity_percent is not showing/hiding.
Additionally, if I add an alert('test') to the beginning of the function (just after e.preventDefault) this also doesn't work, but the console.log() continues to work (it correctly logs 'is not hidden').
EDIT: Relevant HTML markup:
<div id="flavours">
<div class="row flavour" id="flavour_1" style="display: block;">
<div class="form-group">
<div class="col-xs-12">
<fieldset>
<legend>Flavour 1</legend>
<div class="col-sm-4">
<label>Flavour Name</label>
<input type="text" value="" name="flavour_name[]" data-flavour-id="1" id="flavour_name_1" class="form-control autocomp" placeholder="Flavour name">
<input type="hidden" value="" name="flavour_id[]" id="flavour_id_1" class="form-control flavour_id">
<p class="flavour_info"></p>
</div>
<div class="col-sm-6">
<label>Flavour Quantity <span class="fa fa-filter"></span> <span class="hidden-sm">Switch to </span>drops per ml</label>
<div class="input-group" id="quantity_percent">
<input type="text" class="form-control" id="flavour_percentage_1" name="flavour_percentage[]" placeholder="Flavour Quantity">
<span class="input-group-addon">%</span>
</div>
<div class="input-group" id="quantity_drops" style="display: none;">
<input type="text" class="form-control" id="flavour_drops_1" name="flavour_drops[]" placeholder="Flavour Quantity">
<span class="input-group-addon">drops/ml</span>
</div>
<p class="flavour_recommended_percentage"></p>
</div>
<div class="col-sm-2">
<label> </label>
<button class="btn btn-danger btn-block remove-flavour"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</fieldset>
</div>
</div>
</div>
$(this).parent() is a label element which doesn't have a child with .quantity_percent
Also quantity_percent is an id and not a class. Use the ID selector
So use
var $quantity_percent = $('#quantity_percent');
instead of
var $quantity_percent = $(this).parent().find('.quantity_percent');
Note: IDs must be unique in HTML
EDIT: as per OPs comments
I updated it to a class rather than ID (as it's on a dynamically growing list)
Usage
var $quantity_percent = $(this).closest('.col-sm-6').find('.quantity_percent');
The .parent() targets the <label> therefore it can't find .quantity_percent