When clicking on an element, I want to copy the value from another element to the closest input field to the clicked element.
For example: In the following code, when I click on the span with class .add, I want to display the div .values, which contains list items. Then on clicking on any of the list item, I want to copy its class to the input field which was clicked.
I'm having problem with the step 3, I'm unable to find out which element was clicked so I cannot send the value there. How can I pass the reference of the clicked element, so that it knows where to send back the value?
Here's what I'm trying:
HTML:
<div class="wrap">
<div class="item">
<label>Item 1 </label>
<span class="add">Add</span>
<input type="text" name="item1" />
</div>
<div class="item">
<label>Item 2 </label>
<span class="add">Add</span>
<input type="text" name="item2" />
</div>
</div>
<div class="values">
<ul>
<li class="one">One </li>
<li class="two">Two </li>
<li class="three">Three </li>
</ul>
</div>
jQuery:
$(document).on('click','.add',function(e){
$(".values").css("display","block");
});
$(document).on('click','.values ul li',function(e){
var value = $(this).attr('class');
$(this).closest(".item").find("input[type=text]").val(value);
});
Demo:
http://jsfiddle.net/YJE8d/
You can add class to the .add text and search for that to add value to the input
$(document).on('click','.add',function(e){
$(".values").css("display","block");
$(this).closest('.wrap').find('.add').removeClass('clicked');
$(this).addClass('clicked');
});
$(document).on('click','.values ul li',function(e){
var value = $(this).attr('class');
$('.clicked').next().val(value);
});
.closest() searches for the closest parent element therefore it wont work the way you tried to use it
DEMO
$(document).on('click','.add',function(e){
$(".values").css("display","block");
$(this).closest(".item").find("input[type=text]").addClass("active");
});
$(document).on('click','.values ul li',function(e){
var value = $(this).attr('class');
$(".active").val(value);
$(".active").removeClass("active");
});
Try this,
HTML
<div class="wrap">
<div class="item" id="first">
<label>Item 1 </label>
<span class="add">Add</span>
<input type="text" name="item1" />
</div>
<div class="item" id="second">
<label>Item 2 </label>
<span class="add">Add</span>
<input type="text" name="item2" />
</div>
</div>
<div class="values">
<ul>
<li class="one">One </li>
<li class="two">Two </li>
<li class="three">Three </li>
</ul>
</div>
SCRIPT
$(document).on('click','.add',function(e){
itemData=$(this).closest('.item').attr('id');
$(".values").css("display","block").data('item',itemData);
});
$(document).on('click','.values ul li',function(e){
var value = $(this).attr('class');
d=$('.values').data('item');
$('input[type="text"]').val('');
$('#'+d).find("input[type=text]").val(value);
});
Demo
Related
I am having issues targetting this checkboxes parent's checkbox. I need the parent checkbox to be automatically selected whenever the child is selected. Here is my HTML. One thing which is a slight issue is that the parent div I need to select has the same class as one immediately higher in the hierarchy, which is .checkbox
<ul class="term-reference">
<li>
<div class="checkbox">
<label class="control-label">
<input type="checkbox" class="form-checkbox">Parent Label
</label>
</div>
<ul class="term-reference">
<li>
<div class="checkbox">
<label class="control-label"">
<input type="checkbox" class="form-checkbox">Child Label
</label>
</div>
</li>
</ul>
</li>
</ul>
I have tried the following but to no avail, thank you very much for any help here
$('ul.term-reference li ul li input.form-checkbox').click(function() {
$(this).closest('.checkbox').closest('.checkbox').find('input.form-checkbox').prop('checked', true);
});
While the answers I've read here will most likely work, they appear to be tightly coupled to html (which means if you change your html, your jQuery may not work) and aren't re-useable (and have the possibility of causing other checkboxes to be checked even though they shouldn't be).
I'd recommended reading Decoupling Your HTML, CSS, and JavaScript - Philip Walton # Google.
Slight update to your html and reusable jQuery:
$(document).ready(function(){
$('.checkbox-container .checkbox-child').on('click', function() {
var $childCheckbox = $(this);
if ($childCheckbox.is(":checked")){
$childCheckbox
.closest('.checkbox-container')
.find('.checkbox-parent')
.prop("checked", true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="term-reference checkbox-container">
<li>
<div class="checkbox">
<label class="control-label">
<input type="checkbox" class="form-checkbox checkbox-parent">Parent Label
</label>
</div>
<ul class="term-reference">
<li>
<div class="checkbox">
<label class="control-label"">
<input type="checkbox" class="form-checkbox checkbox-child">Child Label
</label>
</div>
</li>
<li>
<div class="checkbox">
<label class="control-label"">
<input type="checkbox" class="form-checkbox checkbox-child">Child Label
</label>
</div>
</li>
<li>
<div class="checkbox">
<label class="control-label"">
<input type="checkbox" class="form-checkbox checkbox-child">Child Label
</label>
</div>
</li>
</ul>
</li>
</ul>
You could try with parent
$(this).parent().closest('.checkbox').find('input.form-checkbox').prop('checked', true);
The upper check box class is not an ancestor, so you need to go up two closest li elements, then child check box class, then find input[type="checkbox"].
I am slightly confused about this.
Why the value attribute of #edit does not change in the console?
Am I missing something?
<div class="editor">
<form>
<input id="edit" value="" type="text">
<input id="key" value="" type="hidden">
<input value="Save" type="submit">
</form>
</div>
<ul>
<li> <span class="cursor" id="__optin-1">Value 1</span> </li>
<li> <span class="cursor" id="__optin-2">Value 2</span> </li>
<li> <span class="cursor" id="__optin-3">Value 3</span> </li>
</ul>
<script type="text/javascript">
$( "*", document.body ).click(function( event ) {
event.stopPropagation();
var edit = $('#edit');
var key = $('#key');
var id = this.id;
var content = this.html();
if ( id.substring(0,2) == "__") {
console.log(this.id);
console.log(content);
edit.val(content);
key.val(id);
}
});
</script>
UPDATE...
After much unrelated discussion than ks to #charlietfl I came to a demonstrable difference as presented here https://jsfiddle.net/n4pe07j6/1/
If all you want is to target ID's with __ at the beginning it is really expensive to add a click handler to every element in the DOM.
Use a single delegated click handler with a selector that targets those elements.
$(document).on('click', '[id^="__"]', function(e){
$('#edit').val($(this).html());
$('#key').val(this.id)
});
EDIT: the attribute value of an input is not the relevant value that gets submitted by the form. There is a difference between the value attribute of a form control and the value property of that element. It is the value property that gets submitted
DEMO
There are many better ways to write this, but as you are just starting out why not do something like.
<script type="text/javascript">
function changeValue(elem){
var $elem = $(elem);
var id = $elem.attr("id");
var content = $elem.html();
$('#edit').val(content);
$('#key').val(id);
}
</script>
<div class="editor">
<form>
<input id="edit" value="" type="text">
<input id="key" value="" type="hidden">
<input value="Save" type="submit">
</form>
</div>
<ul>
<li> <span class="cursor" id="__optin-1" onclick="changeValue(this)">Value 1</span> </li>
<li> <span class="cursor" id="__optin-2" onclick="changeValue(this)">Value 2</span> </li>
<li> <span class="cursor" id="__optin-3" onclick="changeValue(this)">Value 3</span> </li>
</ul>
the answer is: "var content = this.html();" is not valid. There is no .html() on a javascript element, .html() is from the JQuery lib and such it needs to be an JQuery element so, "var content = $(this).html();" makes it work. I think that is what you are after then taking it from all your other comments.
or even this.
<form>
<input id="edit" value="" type="text">
<input id="key" value="" type="hidden">
<input value="Save" type="submit">
</form>
</div>
<ul>
<li> <span class="cursor" id="__optin-1">Value 1</span> </li>
<li> <span class="cursor" id="__optin-2">Value 2</span> </li>
<li> <span class="cursor" id="__optin-3">Value 3</span> </li>
</ul>
$('.cursor').click(function( event ) {
$('#edit').val($(this).html());
$('#key').val($(this).attr('id'));
});
Just replace 'this' keyword with $(this) and user .attr('id') instead of .id and you are good to go.
I will have html like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<ul class="select_list">
<li id="s1" class="chosen">Apple</li>
<li id="s2" style="display: none;">Peach</li>
<li id="s3" style="display: none;">Plum</li>
<li id="s4" class="chosen">Banana</li>
<li id="s5" style="display: none;">Grapes</li>
<li id="s6" class="chosen">Pear</li>
<li id="s7" style="display: none;">Kiwi</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
how can I use $_POST to get the ids of the elements with class="chosen"
There is no "direct" way to do this. Forms POST data from input, textarea, and button elements, possibly a few more I'm forgetting. You will have to use JavaScript to "transcribe" the li elements to one of these, possibly an <input type="hidden">. For instance:
var form = $formselector
form.onsubmit = function() {
var chosen = form.getElementsByClassName("chosen");
for (var i=0; i<chosen.length; i++) {
form.innerHTML += '<input type="hidden" name="chosen[]" value="'+chosen[i].id+'">';
}
}
This should loop through your form, finding all elements with class chosen and adding a hidden input with the ID of that element. Note that you might need to change the name of the hidden input element to match your server-side code. Also make sure you update $formselector to actually match your form.
You need to create a hidden input and assign value to it by javascript or jquery.
<form class="form-horizontal" role="form">
<input type="hidden" name="my_data" value="" />
<div class="form-group">
<ul class="select_list">
<li id="s1" class="chosen">Apple</li>
<li id="s2" style="display: none;">Peach</li>
<li id="s3" style="display: none;">Plum</li>
<li id="s4" class="chosen">Banana</li>
<li id="s5" style="display: none;">Grapes</li>
<li id="s6" class="chosen">Pear</li>
<li id="s7" style="display: none;">Kiwi</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
$('.select_list').change(function(){
$('.my_data').val($(this).val());
});
</script>
Try this...
I figured it out:
var value = [];
$('.chosen').each(function(){
value.push(this.id.substring(1));
});
$('.form-horizontal').submit(function(){
$('.form-horizontal').append('<input type="hidden" value="' + value +'"/>');
}
I have a list (style taken from bootstrap) of elements, to which I want to add some more elements using text input. Here is my code-
<div class="col-lg-6">
<div class="input-group">
<input type="text" id = "input" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id = "add" >Add</button>
</span>
</div><!-- /input-group -->
<form>
<ul class="list-group" id = "tagList">
<li class="list-group-item"> <b>Tags </b></li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Orange</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Pear</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Banana</li>
</ul>
</form>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('<li />', {html: text}).appendTo('ul.tagList')
}
});
</script>
I can get the code to work with a simpler list, but not with this one. Can anyone spot why not?
Your li's are not closed:
<li class="list-group-item" <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Should be:
<li class="list-group-item"><span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Always funny to spot such issues once you placed the code into the code highlighting here on SO.
In order for your javascript to work, you might use the following: http://jsfiddle.net/jX2K3/21/
try following code..
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('ul').append('<li class="list-group-item"><span class ="input-group-addon"> <input type="radio"> </span>'+text+'</li>');
}
});
jsFiddle
<ul id="content">
<li>
<label class="desc">Album Title:</label>
<div>
<input type="text" class="field text full required" name="album[title]" id="album_title" />
<?php echo form_error('album[title]', '<label class="error">', '</label>'); ?>
</div>
</li>
<li>
<label class="desc">Image</label>
<div>
<input type="file">
<img src="<?php echo base_url(); ?>skin/images/add.png" />
</div>
</li>
<li class="buttons">
<button id="saveForm" class="ui-state-default ui-corner-all" value="Submit" type="submit">Add</button>
</li>
</ul>
i want to add new <li> before last <li> for add dynamic image field(through jquery).
Thanks in advance
Loganphp
You could try using the jQuery insertBefore() method.
$('<li><input type="image" /></li>').insertBefore($('.buttons'));
Try This
$('#content li').last().insertBefore("<li></li>");
In This way u can append many li before last li
Updated
U can also use this
$('#content li:last').insertBefore("<li></li>");