jquery javascript add/remove button - javascript

I have a form, where I dynamically want to add additional inputfields. So when I click the "Add"-button, there should appear a new inputfield but now with both an add and remove button. When I now click the "Add" button next to the new inputfield, there shoud appear another new inputfield et. etc. The same goes fro the remove button. So far, so good... my issue is though, that I cant create a new inputfield after clicking "Add"...
So, my code looks like this:
<div id="fields">
<button class="add">Add</button>
<div class="newField">
<div class="check">
<input type="radio" id="field_1" name="correct" required></input>
</div>
<input type="text" id="input_1" required></input>
</div>
</div>
the CSS:
#fields {
width:350px
}
.check{
float:left
}
.add, .remove {
float:right
}
and most important, the javascript:
var InputsWrapper = $("#fields");
var x = InputsWrapper.length;
var FieldCount=1;
$('.add').click(function(e){
FieldCount++;
$(InputsWrapper).append('<div class="newField"><button class="remove">Remove</button><button class="add">Add</button><div class="check"><input type="radio" id="field_'+ FieldCount +'" name="correct"></div><input type="text" id="input_'+ FieldCount +'" /></div></div>');
x++;
return false;
});
$(document).on("click",".remove", function(e){
if( x > 1 ) {
$(this).parent('div').remove();
x--;
}
return false;
});
Here is a DEMO fiddle: http://jsfiddle.net/cwprf03o/
Can someone help me out?

Replace line
$('.add').click(function(e){
with
$(document).on("click", ".add", function(e){
The reason for this is that the click() function binds your function(e){} to .add elements that exist at the time the click() function is called.
The on() method works differently. On the click event it will also search for any .add items that exist at the time the click event is raised.
http://jsfiddle.net/1qq40qex/

Related

Show element in JavaScript by onkeypress function

I'm trying to show save button only if input gets value,
The issue is if i use append for each input i get 1 button printed, what I'm looking for is regardless of input length get the button only once.
The important is input not be empty that's all.
Code
<input class="text_dec form-control" type="text" onkeypress="myFunction()" name="text_dec[]" id="'+ textFieldsCount.toString() +'">
function myFunction() {
$('#moreless').append("button here");
}
any idea?
Instead of keypress, use keyup, this will call the listener just when the key is released, so you will have the correct length of the input value. With that, you can check if the button must be displayed or not.
Also, I would have another check to make sure that input have some value on it to save when clicked.
Like below, take a look:
$(function(){
$('.myInput').on('keyup', function(){
var btnElem = $('.myButton');
var charLength = this.value.length;
if (charLength > 0){
btnElem.show();
}else {
btnElem.hide();
}
});
$(".myButton").on("click", function(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
});
});
.myButton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="">
<input class="myButton" type="button" value="Save Button" />
</body>
EDIT
Now, if you really need to make as you were doing before (I don't consider it a best practice and also recommend you to rethink if you really wanna go through this) here goes a code that will help you. Click to show.
Here I added the functions and created the button element (if necessary) then append it to DOM just when the input have some value length.
function myFunction(input){
var btnElem = $(".mySaveButton")[0];
if (!btnElem){
btnElem = document.createElement("button");
btnElem.textContent = "Save Button";
btnElem.onclick = btnClicked;
btnElem.className = "mySaveButton";
}
var charLength = input.value.length;
if (charLength > 0){
document.body.append(btnElem);
}else {
btnElem.remove();
}
};
function btnClicked(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="" onkeyup="myFunction(this)">
</body>
So I think you just want a button to show to the user once they type something in the text box. If that's the case, then you don't really want to append a button every time they press a key in the box.
Instead I'd make a button and set its css to display none and then when they keydown in the text box change the button's css to display block.
Something like this: http://jsfiddle.net/wug1bmse/10/
<body>
<input type="text">
<input class="myButton" type="button" value="button text" />
</body>
.myButton {
display: none;
}
$(function(){
$('input').on('keypress',function(){
var htmlElement= $('.myButton');
htmlElement.css('display', 'block');
});
});
Hiding the element with a class might be easier:
.btn-hidden {
display: none;
}
<input id="save-button" class="btn-hidden" type="button" value="save" />
function showSave() {
$('#save-button').removeClass('btn-hidden');
}
function hideSave() {
$('#save-button').addClass('btn-hidden');
}

Javascript - check/uncheck checkbox after summing different inputs

I have a ‘parent’ <div>, and ‘child’ divs which are shown after clicking parent <div>.
All divs have <checkboxes> and <input> to put quantity.
Parent <checkbox> checks when at least one child <checkbox> is checked.
When child <checkbox> is checked/unchecked the quantity in <input> is automatically changed into ‘1’ or ‘’.
Parent quantity <input> is disabled and it is supposed to show the sum of all children quantities.
I have two problems.
First, the summing script works fine when you enter the quantity yourself, however when the quantity appears/disappears itself (after checking/unchecking the child <checkbox>) the summing script does not react on such change.
Secondly I wasn’t able to uncheck the parent <checkbox> when all child checkboxes are unchecked.
However I’m assuming if the summing script will start working properly I will be able to bind the parent <checkbox> with the sum (if (sum> 0){ $('#checkbox0').prop('checked', true);}else{$('#checkbox0').prop('checked', false);}
Html:
<div class="divCell" id="click1">
<div class="checkbox_div" style='pointer-events:none;'>
<input type="checkbox" id="checkbox0">
</div>
<div class="div_name_divcell">Parent - click to open</div>
<div class="div_quantity_divcell">
<input type="text" name="parent_1" class="quantity_class_parent_1" id="quantity_parent_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)" disabled="disabled">
</div>
</div>
<div id="hidden1" style="display: none;">
<div class="divCell" id="child_click1">
<div class="checkbox_div">
<input type="checkbox" id="checkbox1">
</div>
<div class="div_name_divcell">Child1</div>
<div class="div_quantity_divcell">
<input type="text" name="child_1" class="quantity_class_child" id="quantity_child_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
</div>
</div>
<div class="divCell" id="child_click2">
<div class="checkbox_div">
<input type="checkbox" id="checkbox2">
</div>
<div class="div_name_divcell">Child2</div>
<div class="div_quantity_divcell">
<input type="text" name="child_1" class="quantity_class_child" id="quantity_child_2" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
</div>
</div>
</div>
Css:
.divCell {width: 500px;height: 35px;margin: 2px 0;display: inline-block;background-color: #D4F78F;}
.div_quantity_divcell{float:right; padding:9px 1px 0 0}
.checkbox_div {width: 25px;position: relative;margin: 5px;float: left;}
.div_name_divcell {line-height: 35px;width: auto;float: left;}
JavaScript:
$(document).ready( function() {
event.preventDefault();
$('#checkbox1').click(function() {
if(this.checked){
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
}else{
$('#quantity_child_1').val('')
//$('#checkbox0').prop('checked', false);
}});
$('#quantity_child_1').keyup(function(){
$('#checkbox1').prop('checked', this.value > 0);
$('#checkbox0').prop('checked', true);
})
//second child
$('#checkbox2').click(function() {
if(this.checked){
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_2').val('1')
}else{
$('#quantity_child_2').val('')
//$('#checkbox0').prop('checked', false);
}});
$('#quantity_child_2').keyup(function(){
$('#checkbox2').prop('checked', this.value > 0);
$('#checkbox0').prop('checked', true);
})
});
// suming script
$(document).on('change', '.quantity_class_child', function(){
var sum = 0;
$('.quantity_class_child').each(function(){
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
});
//opening script
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
JSFiddle: https://jsfiddle.net/mamzj4tw/6/
This is an updated version of your version
https://jsfiddle.net/mamzj4tw/13/
It uses each() to better (and clean) add actions to inputs.
You can create your custom events like do-sum and fire when you want.
In this case I defined that the sum is executed when
$(document).trigger('do-sum');
fires do-sum event.
and I've set a listener that executes your routine:
$(document).on('do-sum', function(){
var sum = 0;
$('.quantity_class_child.active').each(function(){
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
var parentChecked = false;
$('#hidden1 input[type="checkbox"]').each(function(i, e){
if($(e).is(':checked')) {
parentChecked = true;
}
});
$('#checkbox0').prop('checked', parentChecked);
});
I also use class active to set valid inputs (and quick sum them).
PS you don't need event.preventDefault(); after document ready event.
Ok, Here are the things that you can do to achieve,
First, the summing script works fine when you enter the quantity yourself, however when the quantity appears/disappears itself (after checking/unchecking the child ) the summing script does not react on such change.
The thing is change event will not be triggered if you are setting/changing the value from the javascript. For this you can manually call the change event to trigger the effect. Or, Create a separate function for summation calculation and call it on uncheck event of the checkbox.
eg.
Either
$('#checkbox1').click(function() {
if (this.checked) {
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
} else {
$('#quantity_child_1').val('')
$(".quantity_class_child").trigger("change");
//$('#checkbox0').prop('checked', false);
}
});
OR
$('#checkbox1').click(function() {
if (this.checked) {
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
} else {
$('#quantity_child_1').val('');
summation();
}
});
function summation(){
var sum = 0;
$('.quantity_class_child').each(function() {
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
}
Now for the second part,
Secondly I wasn’t able to uncheck the parent when all child checkboxes are unchecked.
Just check the length of the checked input box during the summation process and uncheck it if the the length is zero.
Hope this help you cause.
Your code was a bit to complicated, so i have rewritten what you tried to archive ( without the css part). fiddle here
three little html div's
<div class="parent" id="parent">
<span class="input">
<input type="checkbox" name="parent" value="">
<label for parent>parent - click to open</label>
<input type="text" name="sum">
</span>
</div>
<div class="child" id="child1">
<span class="input">
<input type="checkbox" class="inputCheckbox" name="child1" value="child1">
<input type="text" class="inputSum" name="sum1">
</span>
</div>
<div class="child" id="child2">
<span class="input">
<input type="checkbox" class="inputCheckbox" name="child2" value="child2">
<input type="text" class="inputSum" name="sum2">
</span>
</div>
and a bit of jquery
$('.child').hide();
// check if parent checkbox is checked
$('input[name="parent"]').click ( function () {
if ( $(this).is(':checked') ) $('.child').show(); else $('.child').hide();
})
// check if childcheckbox is checked , if true trigger keyup and sum
$('.inputCheckbox').on ( 'change', function () {
if ( $(this).is(':checked') ) $(this).next().val('1').keyup();
// if not , trigger parent
if ( ! $('.inputCheckbox').is(':checked') ) $('input[name="parent"]').click ();
})
// check if value is entered and sum it on keyup
$('.inputSum').on('keyup', function () {
var sum = 0;
$('.inputSum').each ( function () { sum += ( $(this).val() - 0) })
$('input[name="sum"]').val(sum)
})
HTH
You can add new elements https://jsfiddle.net/mamzj4tw/34/
$(document).ready( function() {
$('.drop-down #checkbox').on('change',function(){
$(this).closest('.divCell').find('#quantity_child')
.val(this.checked ? 1:'').trigger('keyup');
});
$(document).on('keyup click', '.quantity_class_child', function(){
$(this).closest('.divCell').find('#checkbox').prop("checked",+$(this).val());
var sum = 0;
$('.quantity_class_child').each(function(){sum += +$(this).val()});
$('#quantity_parent_1').val(sum ||'');
$('#checkbox0').prop("checked", sum);
});
$('#click1').click(function() { $('#hidden1').toggle(500); });
});

Get output of .change() function in .click() function

I have two radio buttons which both have values. When one is selected, and a button/link is clicked, the value of the selected radio button needs to be outputted to a text box.
Here is my HTML:
<form class="discount-choice" method="post" action="#">
<ul>
<li>
<input type="radio" value="1" name="discount" id="1-month" class="discount-checkbox" />
<label for="1-month">1 Month - no discount</label>
</li>
<li>
<input type="radio" value="0.95" name="discount" id="4-months" class="discount-checkbox" />
<label for="4-months">4 months - 5% discount</label>
</li>
</ul>
Get Result
<input type="text" class="result" />
</form>
and my JavaScript (jQuery):
var discount = $(".discount-checkbox").on("click", function () {
return this.value;
});
$(".get-result").on("click", function() {
$(".result").attr("value", discount);
});
When I click the button (after having selected a radio button), I just get [object Object] in the text box.
I'm not sure of the syntax for setting a variable to be a jQuery function so this is likely where I am going wrong. If anyone could give me some guidance that would be awesome.
Thank you for any help :)
discount is set to the jQuery object returned by $(".discount-checkbox"). You need to bind a click handler that updates a variable:
var discount = 0;
$(".discount-checkbox").on("click", function () {
discount = this.value;
});
Use this:
$(".get-result").on("click", function(e) {
e.preventDefault();
$(".result").val( $('.discount-checkbox:checked').val() );
});
You do not need the click handler on the checkbox as #billyonecan has mentioned in the comments.
And ... if you really need to attach an event handler to the checkboxes, that would be a change event handler instead of click.
Try This Code:
var discount;
$(".discount-checkbox").on("click", function () {
discount= this.value;
});
$(".get-result").on("click", function() {
$(".result").attr("value", discount);
});
no need of discount-checkbox click event
$(".get-result").on("click", function() {
var discount = $(".discount-checkbox:checked").val();
$(".result").val(discount);
});

how to add and remove div using jquery

I'm making a scenario where user will be able to add a new row with "Remove" option by clicking "Add" button. If they click "Remove" button, the entire row will be deleted. I've put script for it. But, it's not working perfectly. Kindly, take a look on my fiddle: http://jsfiddle.net/learner73/gS8u2/
My problem is:
(1) If user click "Add" button, a new row will be added. That's good. But, it's gone below the "Add" button. I want, the new row will be added above the "Add" button, I mean "Add" button should be always at the bottom.
(2) At my code, if user click "Remove" button on the previously created row, the entire row will be deleted. That's good. But, when they click "Remove" button on dynamically created row, nothing will happened!
HTML:
<div class="optionBox">
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<span class="add">Add Option</span>
</div>
</div>
jQuery:
$('.add').click(function() {
$('.optionBox').append('<input type="text" /><span class="remove">Remove Option</span>');
});
$('.remove').click(function() {
$(this).parent('div').remove();
});
You need to use event delegation on your remove link code:
$('.add').click(function() {
$('.block:last').before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$('.optionBox').on('click','.remove',function() {
$(this).parent().remove();
});
jsFiddle example
Also, you weren't adding a complete div block to match the other code you had. You left out the <div class="block"> and only added the input and span.
Demo http://jsfiddle.net/34Lbu/
API: .before https://api.jquery.com/before/
Hope rest fits your need :)
code
$('.add').click(function () {
$(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$(document).on('click', '.remove', function () {
$(this).parent('div').remove();
});
EDIT http://jsfiddle.net/amdzakir/gS8u2/38/
To check if all the input fields are filled with values.
$('.add').click(function() {
flag = true;
$('input').css('border-color','green');
$('input').each(function(){
if ($.trim($(this).val())===''){
$(this).css('border-color','red');
flag = false;
}
});
if(flag){
$(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
}
});
$(document).on('click','.remove',function() {
$(this).parent().remove();
});
try this:
$('.remove').click(function() {
$(this).closest('div').remove();
});
$('.add').click(function() {
$('.block:last').after('<input type="text" /><span class="remove">Remove Option</span>');
});
Here is one way -
http://jsfiddle.net/gS8u2/3/
$('.add').click(function () {
$('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); // make sure to add the div too
});
$('body').on('click', '.remove', function () { // use event delegation because you're adding to the DOM
$(this).parent('.block').remove();
});

Adding new text box using javascript

I have a webpage. There is a button called add. When this add button is clicked then 1 text box must be added. This should happen at client side only.
I want to allow the user to add at most 10 text boxes.
How can I achieve it using javascript?
example:
only 1 text box is displayed
user click add >
2 text boxes displayed
user clicks add >
I also wants to provide a button called "remove" by which the user can remove the extra text box
Can anyone provide me a javascript code for this??
Untested, but this should work (assuming an element with the right id exists);
var add_input = function () {
var count = 0;
return function add_input() {
count++;
if (count >= 10) {
return false;
}
var input = document.createElement('input');
input.name = 'generated_input';
document.getElementbyId('inputs_contained').appendChild(input);
}
}();
add_input();
add_input();
add_input();
A solution using the jQuery framework:
<form>
<ul class="addedfields">
<li><input type="text" name="field[]" class="textbox" />
<input type="button" class="removebutton" value="remove"/></li>
</ul>
<input type="button" class="addbutton" value="add"/>
</form>
The jQuery script code:
$(function(){
$(".addbutton").click(){
if(".addedfields").length < 10){
$(".addedfields").append(
'<li><input type="text" name="field[]" class="textbox" />' +
'<input type="button" class="removebutton" value="remove"/></li>'
);
}
}
// live event will automatically be attached to every new remove button
$(".removebutton").live("click",function(){
$(this).parent().remove();
});
});
Note: I did not test the code.
Edit: changed faulty quotation marks
I hope you are using jQuery.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// --></script>
</head><body>
<div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>

Categories

Resources