I'm working on an assignment and I'm having some trouble.
I have an input, select and button that needs to be cloned when pressed that button. Once it is pressed, I need to have another button that when clicked makes disappear the cloned item.
So far I have everything up until the last button that makes it disappear.
Here's my code:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" id="menos"/>')).appendTo(".grupo-tel");
});
});
$("#menos").click(function() {
$(this).closest('div').find('#todo-tel').remove();
});
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
You need to use classes instead of ids, since ids need to be unique
You need to use event delegation $(document).on("click", ".menos", function() {})
Check code below:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" class="menos"/>')).appendTo(".grupo-tel");
});
$(document).on("click", ".menos", function() {
$(this).closest('.nuevo-tel').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
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>
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
I have 2 required drop-down lists,this is my try but it doesn't work when I click on the "Save" Button:
<div>
<button class="btn btn-action" ng-click="save()">Save</button>
</div>
<form>
<div class="row">
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
</div>
</form>
the save method:
$scope.save= function() {
$scope.creerGamme();
}
how can I correct my code please
thanks for help
I try to create a search box with a dropdown inside the search text field
For now this is my result:
http://www.bootply.com/46drKn8dRs#
But i prefer the dropdown is on the right, any help?
This is how I fixed it:
.btn.dropdown-toggle{
border-radius:0;
}
Here is your updated Bootply
I moved the element and added the above CSS code.
if you want to move de dropdown to the right, you can just move all the tag after the search text field like this:
<div class="row">
<div class="col-md-6">
<div class="form-horizontal">
<div class="input-group">
<input id="txtkey" type="text" class="form-control" placeholder="Enter here" aria-describedby="ddlsearch">
<div class="ddl-select input-group-btn">
<select id="ddlsearch" class="selectpicker form-control" data-style="btn-primary">
<option value="france">France</option>
<option value="austria">Austraia</option>
<option value="usa">usa</option>
</select>
</div>
<span class="input-group-btn">
<button id="btn-search" class="btn btn-info" type="button"><i class="fa fa-search fa-fw"></i></button>
</span>
</div>
</div>
</div>
</div>
I have this code javascript to duplicate form , the problem that if I fill in the form and I click on button "Add More" , the form will be duplicated with the same values that I have just filled them in the first form.
How to fix it and get empty fields after duplication form ?
Javascript:
$(document).ready(function() {
var id = 1;
// get item
var item = $("#addparts");
var before = $('#div_button');
// initalize event click
$('#addMore').on('click', function() {
// clone addparts
var clone = item.clone(true);
// remove id
clone.attr('id', '');
// add class duplicate
clone.attr('class', 'duplicate');
// insert duplicate before button div
before.before(clone);
});
});
HTML:
<form action="" method="post" id="sign-up_area" role="form">
<div class="row" id="addparts">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="name[]">
<option value="">select disabled>Select Parts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="email[]" id="partsquantity">
</div>
</div>
</div>
<div class="row" id="div_button">
<input type="button" name="addmore" value="Add More" id="addMore">
</div>
<!-- Button -->
<p>
<input type="submit" name="send" class="btn btn-primary">
</p>
</form>
You need to empty the value of input on your clone like this
$(document).ready(function() {
var id = 1;
// get item
var item = $("#addparts");
var before = $('#div_button');
// initalize event click
$('#addMore').on('click', function() {
// clone addparts
var clone = item.clone(true);
// remove id
clone.attr('id', '');
// add class duplicate
clone.attr('class', 'duplicate');
clone.find('input').val(""); // empty input value!
// insert duplicate before button div
before.before(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" id="sign-up_area" role="form">
<div class="row" id="addparts">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="name[]">
<option value="">select disabled>Select Parts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="email[]" id="partsquantity">
</div>
</div>
</div>
<div class="row" id="div_button">
<input type="button" name="addmore" value="Add More" id="addMore">
</div>
<!-- Button -->
<p>
<input type="submit" name="send" class="btn btn-primary">
</p>
</form>
You could clear the form after you've appended it:
$('#addMore').on('click', function() {
var clone = item.clone(); // no need for true here
clone.removeAttr('id'); // if you don't want an id attr on the form
clone.addClass('duplicate');
clone[0].reset(); // js method to clear form
before.before(clone);
});