<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>");
Related
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
})
})
})
I am appending html dynamically but I am unable to add the button underneath the image (when I start a div or a table the end tag is being closed automatically)
Relevant part of the js function :
var fullimage='<li class="picture'+i+'"> <img id='+filename+' height="100" width="100" src='+this.result + ' /> </li> ';
var fullimage=fullimage+'<input type="button" id='+filename+' name="button2" value="Set as default"> </input>';
$('.pictures').append(fullimage);
HTML
<h3>Primary picture</h3>
<div id="primary-pic">
<p>jpg, png or bmp files <br /> <span>(max 2mb)</span></p>
<div class="custom-input-file">
`
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
<!-- <input type="file" name="files[]" class="input-file" multiple="multiple" min="1" max"5"/> !-->
<input type="file" name="files[]" multiple onchange="readURL(this);" size="1" class="input-file" />
Choose files
<body>
</form>
</div>
</div>
<div id="more-pics">
<ul class="pictures">
<li class="picture1"> </li>
<li class="picture2"> </li>
<li class="picture3"> </li>
<li class="picture4"> </li>
</ul>
</div><!--/#more-pics-->`
The full js function that appends html can be found here :
http://pastebin.com/BJy6FtiU
I believe you want the closing LI after the input.
You have:
<LI> <IMG> </LI> <INPUT>
But want:
<LI> <IMG><INPUT> </LI>
Also don't declare var variableName twice for the same variable.
var fullimage='<HTML>';
fullimage +='<More HTML>";