How do i replace a button with another using jQuery - javascript

I have an ADD button that adds a form field when clicked on. I want the new form field button to change when it is added to a REMOVE button. How do I change the buttons (keep in mind I'm still learning jquery). Here's my code
HTML
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }} inputFields">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>
#if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
#endif
</div>
<a class="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></a>
</div>
Script
$(document).ready(function(){
$(".addbtn").on('click', function(){
var ele = $(this).closest('.inputFields').clone(true);
$(this).closest('.inputFields').after(ele);
})
});

There are two options. Create two buttons and hide/show them or you can use one button and change its content to what you need. Of cours with the second option you have to check the click event if it should be a delete or an add.
I think this is what you are looking for
$(document).ready(function(){
$(".deletebtn").hide();
$(".wrapper").on('click', '.addbtn', function(){
var ele = $(this).closest('.inputFields').clone(true);
$(this).closest('.inputFields').after(ele);
var el = $(this).closest('.inputFields').next();
el.find('.addbtn').hide();
el.find('.deletebtn').show();
});
$(".wrapper").on('click', '.deletebtn', function(){
$(this).closest('.inputFields').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="form-group inputFields">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="" required autofocus>
</div>
<a class="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Add</a>
<a class="deletebtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Remove</a>
</div>
</div>

Add this to your $('.addbtn').on('click'...);...
$('.addbtn').hide();
$('.removebtn').show();
And add this to your html right below your addbtn...
<a class="removebtn">
<i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
</a>

you can manipulate the dynamic dom object you are creating, just as you can manipulate any dom object in jquery. for example, you could do something like (just a poc, needs to keep working on this):
$(document).ready(function(){
$(".addbtn").on('click', function(){
var ele = $(this).closest('.inputFields').clone(true);
ele.find(".addbtn").replaceWith("HTML FOR REMOVE BUTTON");
$(this).closest('.inputFields').after(ele);
})
});

Related

How to change the input and label ids?

I making button when a click clones the input with label. I need to auto-increment the input and label ids while cloning.
My code changes the id for the div but not input and label ids.
any solution
var cloneCount = 1;
///////////////////////////////
var stdTrip = $("#parentImagesContainer").children(".childImagesContainer").first().clone('.addImage').attr('id', 'customFile' + cloneCount++).insertAfter($('[id^=customFile]:last'));
$(document).on('click', '.addImage',function() {
append_trips();
});
function append_trips() {
var objHtml = stdTrip.clone('.addImage').attr('id', 'customFile' + cloneCount++).insertAfter($('[id^=customFile]:last'));
$("#parentImagesContainer").append(objHtml);
}
//////////////////////////////////////////////
$(document).on("click", ".removeImage", function(){
if($('#parentImagesContainer .childImagesContainer').length > 1)
{
$(this).closest(".childImagesContainer").remove();
}
else
{
alert(300);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentImagesContainer">
<div class="form-group m-form__group row childImagesContainer">
<label class="col-form-label col-lg-2">title</label>
<div class="col-lg-8">
<div></div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" name="images[]">
<label class="custom-file-label" for="customFile">image</label>
</div>
</div>
<div class="col-2">
<a href="javascript:;" class="btn btn-brand m-btn m-btn--custom addImage">
<i class="fa fa-plus"></i>add
</a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--custom removeImage">
<i class="fa fa-minus"></i>remove
</a>
</div>
</div>
</div>
There should almost never be a need for auto-incrementing IDs.
In your case...
<input type="file" class="custom-file-input" id="customFile" name="images[]">
<label class="custom-file-label" for="customFile">image</label>
Should be...
<label class="custom-file-label">
<input type="file" class="custom-file-input" name="images[]">
image
</label>

Unable to Remove Class for Span Element

I'm trying do remove class "bg-color-disable" for #filenameRPT but nothing I tried work. I have used $("#parentRPT > span#filenameRPT").removeClass("bg-color-disable"); and $("#filenameRPT").removeClass("bg-color-disable"); but no lucks. Any idea?
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>
Crazy thing is I was able to remove "bg-color-disable" for #parentRPT using $("#parentRPT").removeClass("bg-color-disable"); but using $("#filenameRPT").removeClass("bg-color-disable"); didn't work for element #filenameRPT. Why?
I think your issue is with improper closing of anchor tag.
Removing class is straight forward.
window.onload = removeClass()
function removeClass() {
console.log('before removal',document.getElementById('filenameRPT').classList);
document.getElementById('filenameRPT').classList.remove('bg-color-disable')
console.log('after removal',document.getElementById('filenameRPT').classList);
}
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a>
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>

How to use .prev with a Meteor event?

Yesterady I asked how I could remove the input before my button How to remove the input element before my button? and I got an answer who worked in the snippet. Now I try to use it in my event but I can't remove the field, I can only remove the button.
Template.myTemplate.events({
'click .removeField': function(event, template){
$(this).prev('input').remove();
$(event.target).prev('input').remove();
$(event.target).prev().prev('input').remove();
$(event.target).remove();
}
the $(event.target) is i.fa.fa-times so I tried with prev().prev('input') to be in a -> input
My HTML is the following one:
<div class="form-style-2">
<div class="form-style-2-heading"></div>
<form action="" method="post">
<label>
<span>Container name
<span class="required">*</span>
</span>
<input type="text" class="input-field nameModif" value="" required/>
</label>
<label id="labelEnv">
<span>Environment
</span>
<input type="text" class="input-field env"/><a class="removeField" aria-expanded="false"><i class="fa fa-times"></i></a>
<a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a>
</label>
</form>
</div>
In some cases $(event.target) will be <i class="fa fa-times"> and it has no previous input. Let's get up to parent <label> then remove children within it:
$(event.target).closest('label').children('input, .removeField').remove();
Update if you have several inputs and you need to remove the input just before a:
var et = $(event.target);
if (et.is('i')) et = et.parent('a');
et.prev('input').remove().end().remove();

Prevent from dynamically changings with ng-model

I have some fields to edit user' data. One of the field is also used in breadcrumb:
I use ng-model to bind all the fields:
...
<ol class="breadcrumb">
<li>Home</li>
<li>{{user.name}}</li>
<li class="active">Profile</li>
<li class="active">Edit</li>
</ol>
<hr>
<form role="form" class="col-sm-2">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-model="user.name" placeholder="Username" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.birthday" placeholder="Birthday" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.city" placeholder="City" class="form-control">
</div>
<button id="submit" ng-click="saveUser(user)" class="btn btn-success pull-right">Save</button>
</form>
...
The problem and also the right behavior of ng-model changes the name value of breadcrumb on input updating:
Is it possible to set value in breadcrumb as a static and prevent it from changing?
The actual result I want to achieve:
Answer is that I should use one-time data-binding using :: on my li element in the breadcrumb like so:
<li>{{::user.name}}</li>
It prevents data from future changing once it was rendered.

Dynamic TextFields in JSP with data from MYSQL database upon item selection

I am trying to create a form where user gets a list of products from database and upon selecting the product, retrieve the prices associated to that product and assign the value from database to the second textfield, similarly other textfields as well. Also upon changing the selection the values should get updated. Need suggestions if this is possible and how? Examples would be great. Thanks
He is what I am trying to do
<form method="post" action=".\Sale">
<div class= "form">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<select class="form-control" name="orproductname" id="orproname" onchange="updateFields()">
<option>--Select Product--</option>
<% ProductDAO pdr = new ProductDAO(); String[] kl = pdr.getProductNames();
for(int i=0;i<kl.length;i++) {%>
<option><% out.println(kl[i]); %></option>
<% } %>
</select>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Original Price" id="orproprice" name="orproductprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Discount" id="orprodis" name="orproductdiscount" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Sales Tax" id="orprosalestax" name="orproductsalestax" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Final Price" id="orprofinalprice" name="orproductfinalprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-home" ></i>
</span>
<textarea class="form-control" type="textarea" placeholder="Shipping Address" name="orproductshippingaddress" required></textarea>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input class="form-control" type="text" placeholder="Order Date" id="datepicker" name="orproductorderdate" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input class="form-control" type="text" placeholder="User ID" name="orproductuserid" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-picture-o"></i>
</span>
<img class="img-responsive" src="img/bride-1.jpg" alt="Product" >
</div>
<input class="btn btn-primary send" style="width:200px; margin-right:20px" type="submit" value="Order">
<input class="btn btn-primary send" style="width:200px" type="reset" value="Clear">
</form>
You can do that using ajax.
Find the below links to get the data from database using Jsp and servlets and ajax.
http://www.javacodegeeks.com/2014/09/jquery-ajax-servlets-integration-building-a-complete-application.html
How to use Servlets and Ajax?
http://www.programming-free.com/2013/03/ajax-fetch-data-from-database-in-jsp.html
Give it a try ;)
I will explain this into step by step with code.
step 1. in jsp file display all product into select option tag. and give select tag name and **id**.
step 2. using ajax to define where to get the required data.call servlet. this servlet define the your query you wants using productid. productid pass by ajax. jQuery("#your select tag id").change(function(){
var productid = jQuery(this).val();
jQuery.ajax({
async : false,
url : 'your servlet url',
type : 'POST',
dataType: 'json',
data : {'productid':productid},
success : function(response){
if (response.success == 'true' && response.html != '') {
$('#your price text box id').val(response.html)
}else{
jQuery("#user_role_parent").html("");
}
},
error : function(){
alert("Some thing went wrong!!!");
},
});
Step 3. response.html come from servlet
I hope you are understand this code and solve your problem.

Categories