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();
Related
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);
})
});
Consider a form which has many inputs, the inputs each has an radio button associated with them. User selects a radio and the associated input will be displayed.
http://jsfiddle.net/0uL6zzja/
If the number of inputs increase (for example 15) we will end up with lots of boilerplate code in js of all radio buttons ( they all do the same thing, disable other inputs, enable my input)
The js is as:
$('#precentRadio').change(function () {
$("#dolorsInput").attr("disabled", true);
$("#precentInput").attr("disabled", false);
})
$('#dolorsRadio').change(function () {
$("#precentInput").attr("disabled", true);
$("#dolorsInput").attr("disabled", false);
})
Are there any way which can can minimize the code ?!
Working demo
Use a class name for the buttons that trigger the inputs to disable/enable, and a class name for the inputs. Disable them all, and enable the one you want by traversing from the clicked button to the closest .input-group then back down to the input field.
jQuery (this is all)
$('.some-button').change(function () {
$('.some-input').prop("disabled", true);
$(this).closest('.input-group').find('.some-input').prop("disabled", false);
})
HTML
Please enter amount in "$" or "%":<p/>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" checked="checked" type="radio" class="some-button">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">$</span>
<input class="form-control some-input" type="text" >
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" type="radio" class="some-button">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">%</span>
<input class="form-control some-input" type="text" disabled>
</div>
</div>
</div>
(repeat)
Also disabled="true" isn't correct, it's not a boolean value in HTML, it's either there or not there, and you should use .prop() not attr() for disabled.
You can add a common class to your radio buttons and attach a single event to all of them. From there you can use DOM traversal to only change the related text input. Something like this:
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" class="input-toggle" checked="checked" type="radio" />
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">$</span>
<input class="form-control" type="text" />
</div>
</div>
</div>
$('.input-toggle').change(function() {
$('.input-group input[type="text"]').prop('disabled', true); // disable all
$(this).closest('.input-group').find('input[type="text"]').prop('disabled', false);
});
Example fiddle
Sure. The correct way to associate radio buttons with a similar function is to use a common name rather than a class. This makes the radio buttons mutually exclusive (so only one of the options in the group can be active at once).
Then, add the jQuery .change handler not to a single item but to all the radio buttons with that name $('input:radio[name=whatever]').change( ... );.
Inside the function, it is easy to write code which enables the text field directly following the radio button that was clicked, using jQuery's next() method, and disables all other text fields that follow other radio buttons in the group.
If you can't change the HTML, but the ids of the radio buttons and inputs will continue to match (xxxRadio and xxxInput), you can handle things by looking up the id of the selected radio button, and enabling the respective input:
$('input[name=switched]').change(
function() {
var selected = $('input[name=switched]:checked');
var selId = selected.attr('id');
var inpId = '#' + selId.replace(/Radio$/, 'Input');
var activeInput = $(inpId);
$('input.form-control').prop('disabled' ,true);
activeInput.prop('disabled', false);
}
);
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
div.input-group > div.input-group > span.input-group-addon {
border-radius: 0px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Please enter amount in "$" or "%":<p/>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" checked="checked" type="radio" id="dolorsRadio">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">$</span>
<input class="form-control" type="text" id="dolorsInput">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" type="radio" id="precentRadio">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">%</span>
<input class="form-control" type="text" id="precentInput" disabled="true">
</div>
</div>
</div>
I have made a form something like this. When I click edit button, it will make test#yahoo.com into <input type="text" placeholder="test#yahoo.com">
<fieldset class="shortfieldset">
<div class="fieldsetTop">
<div class="fieldsetTop-left floatNone">
<h3>Login Details</h3>
</div>
<div class="fieldsetTop-right btn floatNone">
Edit
Save
</div>
</div>
<p> Login ID bisa dipakai salah satu dibawah ini: </p>
<form action="#" method="POST">
<label for="name"> Email </label>:
<span> test#yahoo.com </span> <br />
<label for="name"> HP </label>:
<span> 123123123 </span> <br />
<input type="submit" value="SUBMIT">
</form>
</fieldset>
What I have found is:
$(document).ready(function(){
$(".loginDetails").click(function() {
var input = $("<input>", {
val: $(this).text(),
type: "text" }
);
$(this).replaceWith(input);
input.select();
});
});
$(document).ready(function() {
$(".loginDetails").click(function() {
var input = $("<input>", {
val: $(this).text(),
type: "text"
});
$(this).replaceWith(input);
input.select();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<fieldset class="shortfieldset">
<div class="fieldsetTop">
<div class="fieldsetTop-left floatNone">
<h3>Login Details</h3>
</div>
<div class="fieldsetTop-right btn floatNone">
Edit
Save
</div>
</div>
<p>Login ID bisa dipakai salah satu dibawah ini:</p>
<form action="#" method="POST">
<label for="name">Email</label>:
<span> test#yahoo.com </span>
<br />
<label for="name">HP</label>:
<span> 123123123 </span>
<br />
<input type="submit" value="SUBMIT">
</form>
</fieldset>
It is only working when I click test#yahoo.com, it will change into input. But what I want is when I click EDIT BUTTON, all the values will change into input. And also when the texts becomes inputs, the button of submit will show and a button of edit will disappear. Because this is going to update database. Any idea? Thanks
I think originally what you'd want to do is have your span tags, which are what you want to change to input fields, to already be input fields, and just be disabled, rather than a totally different tag. Then on your edit click all you'd do is switch out the disabled attribute on the input fields.
Also for valid anchor tags you always need an href. I always put javascript:void(0); in when I don't want the href to actually do anything, rather than leaving it blank.
<fieldset class="shortfieldset">
<div class="fieldsetTop">
<div class="fieldsetTop-left floatNone">
<h3>Login Details</h3>
</div>
<div class="fieldsetTop-right btn floatNone">
Edit
<a href="javascript:void(0);" id="save> Save </a>
</div>
</div>
<p> Login ID bisa dipakai salah satu dibawah ini: </p>
<label for="email"> Email </label>:
<input type="text" id="email" name="email" disabled value="text#yahoo.com" />
<label for="name"> HP </label>:
<input type="text" id="name" name="name" disabled value="123123123" />
</fieldset>
CSS
input[disabled] {
// style the text box like your span here
}
#save {
display: none;
}
jquery
$('#edit').click(function(e) {
$(this).hide()
.closest('fieldset')
.find('input[type="text"]').attr('disabled', false);
$('#save').show();
});
$('#save').click(function(e) {
// do your save
// once saved, hide btn
$(this).hide();
});
EDIT:
If HTML5 is not available, you'll have to change the disabled attribute to:
<input ...... disabled="disabled" .... />
here is solution add class name to the edit hyper link
<a class="loginDetails">Edit</a>
after that use your script and it will work as you expecting it to work will show an input box.
here is the link of jsfidle http://jsfiddle.net/psjvrk4y/
Regards
<fieldset class="shortfieldset">
<div class="fieldsetTop">
<div class="fieldsetTop-left floatNone">
<h3>Login Details</h3>
</div>
<div class="fieldsetTop-right btn floatNone">
<a onclick="toInput($('#email'));toInput($('#hp'))" href=""> Edit </a>
Save
</div>
</div>
<p> Login ID bisa dipakai salah satu dibawah ini: </p>
<label for="name"> Email </label>:
<span id="email"> test#yahoo.com </span> <br />
<label for="name"> HP </label>:
<span id="hp"> 123123123 </span> <br />
</fieldset>
Javascript code:
function toInput(elem){
var input = $("<input>", {
val: elem.text(),
type: "text" }
);
elem.replaceWith(input);
input.select();
}
Is this what you are looking for : http://jsfiddle.net/wegnetnn/
Logic which I have used is, add "loginDetails" class to the text field which you want to convert to input field. Add click event listener to "Edit" link and whenever user clicks on it, trigger the click event for all the element which are having "loginDetails" class.
JS Code :
$(".loginDetails").click(function(e) {
var input = $("<input>", {
val: $(this).text(),
type: "text" }
);
$(this).replaceWith(input);
});
$("#edit-record").click(function(e){
e.preventDefault(); // used to prevent the default anchor link behavior
$("span.loginDetails").trigger("click");
});
Specify "edit-record" id for "Edit" link :
<a href="#" id='edit-record'> Edit </a>
Hope it helps. Let me know in case of any doubt.
I need to get the values of two text fields that are inside a <p> </p> so I can submit them via ajax. I'm stuck with how to get the values efficiently. There are several <p></p> on the page like this and I only need to get the values of the <p></p> container which I click 'Approve' or 'Delete'.
My method is pretty crude. Can you suggest something more elegant and efficient?
<body>
<p class="rawData">
<span>
<input class="minWeight" type="text" placeholder="Minimum Weight">
<input class="maxWeight" type="text" placeholder="Maximum Weight">
</span>
<span class="actions">
<i class="icon-accept blue approve"></i>
<i class="icon-reject blue delete"></i>
</span>
</p>
<p class="rawData">
<span>
<input class="minWeight" type="text" placeholder="Minimum Weight">
<input class="maxWeight" type="text" placeholder="Maximum Weight">
</span>
<span class="actions">
<i class="icon-accept blue approve"></i>
<i class="icon-reject blue delete"></i>
</span>
</p>
</body>
$('.approve,.delete').live('click', function() {
var self = $(this);
console.log(self.parent().parent()//find etc);
});
I would use closest to find the first parent instance of rawData, then filter from there:
$('.approve,.delete').on('click', function() {
var $raw = $(this).closest(".rawData");
console.log($raw.find("minWeight").val());
console.log($raw.find("minWeight").val());
});
sorry i do want tag to link to login.
only the register and login page is suppose to drop down. the register code is the same. this is the html code for the page
<header id ="logo_nav">
<img class="logo" src="logo.png" width=" 382" height="122 " alt="voucher">
<ul id= "main_nav">
<li> Home </li>
<li id ="login">
<a id="login-trigger" href="login.php">
Login here <span> ▼ </span>
</a>
<div id="login-content">
<form action = "log.php" method="post">
<label id="user"> Username </label>
<br/>
<input id="inputbox"type="text" name="username">
<br/>
<label id="pass"> Password </label>
<br/>
<input id="pinput" type="password" name="password"> <br/>
<input id="submit" type="submit" value ="log in">
</form>
Below is the jquery code thats not allowing me to drop down and
close.
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
You have to add href="#", since you don't want tag to link anywhere.