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.
Related
please I want to apply fadeToggle for each button but it does not work with this method ,I try to apply with this How to use javascript variables in jquery selectors but not successful
this is Code HTML
<div id="ajouter" class="dropdown">
<ul>
<li>
<button class="projetbutton">Projet</button>
<form class="projet" style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
<li>
<button class="famillebutton">Famille</button>
<form class="famille" style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</div>
and this is script apply for the buttons
<script>
var classElement = ["projet", "famille"];
var button = "button";
for (var i = 0; i < classElement.length; i++) {
var classbutton = classElement[i].concat(button);
$(document).ready(function () {
$('.classbutton').click(function () {
$(".classElement[i]").fadeToggle();
});
});
}
</script>
Please if there is another method to do that job.
You can take advantage of the relation ship between element and various DOM traversal methods available to target element and then perform desired operation.
Associate the click handler using a common class, here used classbutton with the elements, then used .next() to get the form element.
$(document).ready(function() {
$('.classbutton').click(function() {
$(this).next().fadeToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajouter" class="dropdown">
<ul>
<li>
<button type="button" class="classbutton">Projet</button>
<form style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
<li>
<button type="button" class="classbutton">Famille</button>
<form style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</div>
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
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
I am reconstructing this question. I have the following HTML element structure.
<li class="inner"><span class="plus" id="sidehome" title="siteHome">SiteHome</span>
<ul style="display:none">
<li class="inner">
<span class="plus" id="Middle_Content">Middle content</span>
<ul style="display:none">
<li>
<span id="editedpart" title="first div">
<form >
<input type="hidden" value="1/middle_content/first_div" name="page_heri" id="t_div" class="" />
<input type="hidden" name="editedpart" value="first div" id="edited" />
first div
</form>
</span>
</li>
<li>
<span id="editedpart" title="second div">
<form>
<input type="hidden" value="1/middle_content/first_div" name="page_heri" id="t_div" class="" />
<input type="hidden" name="editedpart" value="second div" id="edited" />
second div
</form>
</span>
</li>
<li>
<span id="editedpart" title="third div">
<form>
<input type="hidden" value="1/middle_content/first_div" name="page_heri" id="t_div" class="" />
<input type="hidden" name="editedpart" value="third div" id="edited" />
third div
</form>
</span>
</li>
</ul>
</li>
I want to be able to get title value of <span> with id=editedpart, which is the immediate parent of the <a> tag when the link is clicked. I don't know how to explain it more. I will appreciate it if someone can help. Thanks.
I used his jQuery code var parent = $(this).closest("span");
Here is my full showeditpage()
function showeditpage(){
var page = document.getElementById("t_div").value;
var action = document.getElementById("edit").title;
var parent = $(this).closest("span[id='editedpart']");
var str =parent.attr('title');
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("pcontent").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","../views/edit.php?page="+page+"&action="+action+"&editedpart="+str);
xmlhttp.send();
}
it is not working that is it is not responding.
You could use .attr method:
var title = $(this).closest("span").attr('title');
Your issue is that this doesn't reference the clicked a element in the showeditpage function.
Altough I dont recommend it, you can fix your issue using the following approach:
<a onclick="showeditpage(this);" ...
function showeditpage(link) {
alert($(link).closest("span").attr('title'));
}
However, you should avoid attaching event handlers using attributes and use the approach below:
Put a class on your a tags, like edit for instance (you could also use any other shared attributes, if any).
<a class="edit" ...
Wait until the document is ready and attach event handlers using jQuery.
$(function () {
$(document).on('click', '.edit', function (e) {
alert($(this).closest("span").attr('title'));
e.preventDefault(); //prevent default browser action
});
});
Please also note that id should be unique.
Simple:
var parent = $(this).closest("span[id='editedpart']");
var title = parent.attr('title');
You need to pass the clicked element to the handler method onclick="showeditpage(this)".
Also, ID has to be unique in a page, ie only one element should have a given id.
In your case I would suggest you to make editedpart as a class instead of id and access the title using var parent = $(this).closest(".editedpart");.
Also you need to change the ids t_div and edit to classes.
Also you can modify the method to use jQuery
HTML
<li class="inner"><span class="plus" id="sidehome" title="siteHome">SiteHome</span>
<ul style="display:none">
<li class="inner">
<span class="plus" id="Middle_Content">Middle content</span>
<ul style="display:none">
<li>
<span class="editedpart" title="first div">
<form >
<input type="hidden" value="1/middle_content/first_div" name="page_heri" class="t_div" />
<input type="hidden" name="editedpart" value="first div" id="edited" />
<a href="#" title="edit" class="edit" >first div</a>
</form>
</span>
</li>
<li>
<span class="editedpart" title="second div">
<form>
<input type="hidden" value="1/middle_content/first_div" name="page_heri" class="t_div" />
<input type="hidden" name="editedpart" value="second div" id="edited" />
<a href="#" title="edit" class="edit" >second div</a>
</form>
</span>
</li>
<li>
<span class="editedpart" title="third div">
<form>
<input type="hidden" value="1/middle_content/first_div" name="page_heri" class="t_div" />
<input type="hidden" name="editedpart" value="third div" id="edited" />
<a href="#" title="edit" class="edit" >third div</a>
</form>
</span>
</li>
</ul>
</li>
Script
$(function(){
$('.editedpart .edit').click(function(){
var parent = $(this).closest(".editedpart");
var action = $(this).attr('title');
var str = parent.attr('title');
var page = parent.find('.t_div').val();
$('#pcontent').load('../views/edit.php', {
page: page,
action: action,
editedpart: str
})
})
})