I'm trying to display the user input through the submit button. The user will input tool types and then the first five inputs will be displayed in the li's. Then as the limit of 5 tools is reached, another function prints 'Thanks for your suggestions'. However, I can't get the function to print out any of the user input for suggested tools. Could someone help me understand why they aren't printing out?
<script src="modernizr.custom.05819.js">
var i = 1;
var listItem = "";
function processInput() {
if (i <= 5) {
listItem[0] += 1;
listItem = toolBox;
var toolBox = "";
alert("This is running");
if (i == 5) {
var resultsExpl = "Thanks for your suggestions";
}
}
var backSubmit = document.getElementById("button");
if (backSubmit.addEventListener) {
backSubmit.addEventListener("click", calcTotal, false);
} else if (backsubmit.attachEvent) {
backSubmit.attachEvent("onclick", calcTotal);
}
}
</script>
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox"/>
</fieldset>
<fieldset>
<button type="submit" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
Here's the working DEMO to your problem.
I have removed the button type as submit because in some browsers instead of calling the function processInput it will submit the form.
Here is my JavaScript that I changed,
var count=1;
function processInput(){
var tool = document.getElementById("toolBox").value;
document.getElementById("toolBox").value = "";
if(count==5){
document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions";
document.getElementById("item"+count).innerHTML = tool;
}else{
document.getElementById("item"+count).innerHTML = tool;
count++;
}
}
function resetForm(){
document.getElementById("results").innerHTML = '<ul><li id="item1"></li><li id="item2"></li><li id="item3"></li><li id="item4"></li><li id="item5"></li><p id="resultsExpl"></p></ul>';
}
The only change I made to your HTML code was to add formId as the id for your form.
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form id="formId">
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox"/>
</fieldset>
<fieldset>
<button type="button" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
For me not much of this was working so I modified your code a bit to this working example. Each input fills in the <li> fields in order. On the 5th entry, you get alerted, and on the reset button the <li>'s are blanked out. Was not sure if this is what you were going for specifically but it sounded like it
var i = 1;
function processInput() {
if (i <= 5) {
document.getElementById('item' + i).innerHTML = document.getElementById('toolBox').value;
document.getElementById('toolBox').value = '';
if (i == 5) {
alert('Thank you for your suggestions');
} else {
i++;
}
}
}
function resetForm() {
while (i >= 1) {
document.getElementById('item' + i).innerHTML = '';
i--;
}
i = 1;
}
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox"/>
</fieldset>
<fieldset>
<button type="button" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
I'll try to list some of the problems you have into your code:
Defining a script tag with the src attribute, and writing code inline, this will never work
Defining some global variables, and although this isn't a bug, it's a really bad design
Declaring a variable listItem as an empty string, and then using its 1st character to increment a Number, I don't realize exactly what you're trying to do here.
Then, you set an undefined/undeclared toolBox variable to the listItem string
And, afterall, you add a click event handler to the submit button, but to an undefined callback
Well, since your code doesn't make much sense for me, but I think I got what you're trying to achieve, I've made an example of your code updated, and you can check the full commented code below:
/* we encapsulate your hole code into an IIFE (Immediately-Invoked Function Expression)
the goal here is to not polute the global scope, so the variable declarations reside inside it */
(function(d) {
/* that's the counter you already had, I renamed it from i to item */
var item = 1;
/* we cache all the elements we're going to use here, by getting them by id */
var txt = d.getElementById('toolBox'),
btn = d.getElementById('button'),
reset = d.getElementById('reset'),
results = d.getElementById('results'),
resultsExpl = d.getElementById('resultsExpl');
/* we add the 'click' event handlers to our buttons
it's better than puting directly inside the HTML, because it's a better design
this approach is known as Unobstrusive Javascript */
btn.addEventListener('click', processInput);
reset.addEventListener('click', resetForm);
/* your processInput function, with the same logic you had, but fixed */
function processInput() {
if (item <= 5) {
/* here, we get the li tag by its id, concatenating the string 'item' to our variable item */
var li = d.getElementById('item' + item);
/* we must use the property textContent to change the text of the li
and we get the user's input by getting its property value */
li.textContent = txt.value;
/* then, we increment our counter. the code below is the same as item += 1 */
item++;
}
/* if the last item was inserted, we show our message */
if (item > 5) {
resultsExpl.textContent = 'Thanks for your suggestions';
}
}
function resetForm() {
/* to reset our form, firstly I loop through all the lis inside the div results */
[].forEach.call(results.querySelectorAll('li'), function(el, i) {
/* and I change each li textContent property to an empty string */
el.textContent = '';
});
/* then, we set our input's value to empty, and we also reset our item variable to 1 */
txt.value = '';
item = 1;
}
})(document); /* I'm passing the document as a parameter, so I can use inside the IIFE as the variable d */
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox" />
</fieldset>
<fieldset>
<button type="submit" id="button">Submit</button>
<button type="button" id="reset">Reset</button>
</fieldset>
</form>
A little tidied up version of Saumil Soni's post:
var count=1;
var done;
function processInput(){
var tool = document.getElementById("toolBox").value;
if (done!=1) {
document.getElementById("toolBox").value = "";
}
if(count==5){
if (done!=1) {
document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions";
document.getElementById("item"+count).innerHTML = tool;
done = 1;
}
}else{
if (done!=1) {
document.getElementById("item"+count).innerHTML = tool;
count++;
}
}
}
function resetForm() {
location.reload();
}
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form id="formId" onSubmit="processInput(); return false;">
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox"/>
</fieldset>
<fieldset>
<button type="button" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
Related
I have a function which onclick displays the form.
Was wondering if there is any efficient way to code instead of creating 4 different functions for 4 different forms? Below example is for 4 forms but I am working with multiple forms.
<div class="navbar">
<div class="dropdown">
<button class="dropbtn" onclick="myFunction1()">Category 1
<i class="fa fa-caret-down"></i>
</button>
</div>
//Same for other 3 categories
<div id="form1" style = "display:none">
<form action="#" method="post" id="demoForm1" class="demoForm1" >
<fieldset>
<legend>Use CTRL to select multiple options</legend>
<p>
<select name="demoSel[]" id="demoSel" size="4" multiple>
<option value="ABC">ABC</option>
</select>
<input type="submit" value="Submit" />
<textarea name="display" id="display" placeholder="view select list value(s) onchange" cols="20" rows="4" readonly></textarea>
</p>
</fieldset>
</form>
</div>
//Same for other 3 forms
<script>
function myFunction1() {
document.getElementById("form1").style.display = '';
}
function myFunction2() {
document.getElementById("form2").style.display = '';
}
function myFunction3() {
document.getElementById("form3").style.display = '';
}
function myFunction4() {
document.getElementById("form4").style.display = '';
}
</script>
It's generally not a good idea to use inline event handlers.
Next, add a data-* attribute to each button and remove the onclick attribute like:
<button class="dropbtn" data-target="form1">...</button>
<button class="dropbtn" data-target="form2">...</button>
<button class="dropbtn" data-target="form3">...</button>
<button class="dropbtn" data-target="form4">...</button>
Then, you can use .addEventListener() on these buttons with class dropbtn and update respective form element display property like:
const btns = document.querySelectorAll(".dropbtn");
btns.forEach(function(btn) {
btn.addEventListener("click", function(cbox) {
document.getElementById(this.dataset.target).style.display = '';
});
});
Demo:
const btns = document.querySelectorAll(".dropbtn");
btns.forEach(function(btn) {
btn.addEventListener("click", function(cbox) {
document.getElementById(this.dataset.target).style.display = '';
});
});
<button class="dropbtn" data-target="form1">Form 1</button>
<button class="dropbtn" data-target="form2">Form 2</button>
<br><br>
<form id="form1" style="display:none">Form 1 Content Here</form>
<form id="form2" style="display:none">Form 2 Content Here</form>
Don't use on-event attributes:
<button onclick='eventHandler()'></button>
Use event listeners or on-event properties:
const btn = document.querySelector('button');
btn.addEventListener('click', eventHandler);
// OR
btn.onclick = eventHandler;
If you have multiple targets to click -- register the click event to a parent tag that all target tags share.
document.querySelector('main').onclick = toggleForm;
Instead of using .style on each <form> toggle classes
// CSS
.off { display: none }
// JavaScript
forms[idx].classList.toggle('off');
Demo
Note: Details are commented in demo
/*
- Reference the parent tag (<main>)
- Register <main> to the click event
- Event handler function toggleForm() is called on click
*/
document.querySelector('main').onclick = toggleForm;
// Event handler always passes Event Object (event)
function toggleForm(event) {
// Collect all <form>s into a HTML Collection
const forms = document.forms;
// Collect all <button> into a NodeList
const buttons = document.querySelectorAll('button');
// Reference the tag the user clicked (<button>)
const clicked = event.target;
// if a <button> was clicked...
if (clicked.matches('button')) {
// ...toggle the <button>'s .on and .off classes
clicked.classList.toggle('off');
clicked.classList.toggle('on');
/*
- Convert buttons NodeList into a rel Array
- Iterate through the buttons array and return
the index of the clicked <button>
*/
let idx = [...buttons].flatMap((button, index) => clicked === button ? [index] : []);
/*
- Toggle the .off class on the <form> located at the
index that was obtained from the previous statement
*/
forms[idx].classList.toggle('off');
}
}
button {
display: inline-block;
width: 11ch
}
button.off::before {
content: 'Show '
}
button.on::before {
content: 'Hide '
}
form.off {
display: none
}
<main>
<button class='off' type='button'>A</button>
<button class='off' type='button'>B</button>
<button class='off' type='button'>C</button>
<button class='off' type='button'>D</button>
<hr>
<form id='A' class='off'>
<fieldset>
<legend>Form A</legend>
</fieldset>
</form>
<form id='B' class='off'>
<fieldset>
<legend>Form B</legend>
</fieldset>
</form>
<form id='C' class='off'>
<fieldset>
<legend>Form C</legend>
</fieldset>
</form>
<form id='D' class='off'>
<fieldset>
<legend>Form D</legend>
</fieldset>
</form>
</main>
I tried to make a function by passing an event to a button but it is not working. What I want the function to do is that when the button is clicked show in the DOM that I click and also display with the innerhtml a message on the web page using if/ else depending of the user imput in the imputs of time abd weight
$(document).ready(function() {
$('#calculate').on('click', function() {
$('#calculate ul li input').slideToggle(800);
});
/********************************************************/
var gender = $('#gender');
var age = $('#age');
var time = $('#time');
var weigth = $('#weight');
var result = $('#result');
var calculate = $('#calculate');
if (calculate.lenght) {
/*event listener*/
calculate.on('click', calculateF);
/*para que cuando se haga click se active la funcion calcular
que estoy creando abajo*/
function calculateF(event) {
event.preventDefault();
console.log("click");
var timeVal = parseInt(time.val());
var weightVal = parseInt(weight.val());
if (time > 8 && weight > 25) {
result.html(" text ");
} else {
result.html("text");
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="manejo_cargas" id="manejo_cargas">
<h3>calculate work load</h3>
</div>
<section id="calculate">
<div class="calculate">
<ul>
<li><input type="text" name="text" placeholder="Gender" id="gender"></li>
<li><input type="number" name="number" placeholder="age" id="age"></li>
<li><input type="number" name="number" placeholder="time" id="time"></li>
<li><input type="number" name="number" placeholder="weight" id="weight"></li>
</ul>
</div>
</section>
<div class="calculate">
<input type="button" class="button" value="result" id="calculate">
</div>
<!--here comes the result-->
<div class="result" id="result">
</div>
.
You are missing the # if you have declared the time, weight, result, and calculate as id's of the elements that you are targeting.
From what I can guess is that the weight and time are inputs the result is a div and the calculate is the button to be clicked.
I will assume they are ids so you need to add # before the id when specifying selectors in jquery using $() otherwise use . if they are class names.
Then if you are converting the code to jquery from javascript you need to replace the respective functions like addEventListener .innerHtml , .value etc
You can see the working below but the calculations and the message that you have to add is on your end as you never provided any details so i have made the conversion for the code
$(document).ready(function() {
var time = $('#time');
var weight = $('#weight');
var result = $('#result');
var calculate = $('#calculate');
/*event listener*/
calculate.on('click', calculateF);
function calculateF(event) {
event.preventDefault();
console.log("you hit click");
/*new variables*/
var timeVal = parseInt(time.val());
var weightVal = parseInt(weight.val());
if (time > 8 && weight > 25) {
result.html(" if condition true ").show();
} else {
result.html("message from the else part").show();
}
}
});
.result {
border: 1px solid #c7c7c7;
padding: 5px;
text-align: center;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--here comes the result-->
<div class="result" id="result">
</div>
<div class="manejo_cargas" id="manejo_cargas">
<h3>calculate work load</h3>
</div>
<section>
<div class="calculate">
<ul>
<li><input type="text" name="text" placeholder="Gender" id="gender"></li>
<li><input type="number" name="number" placeholder="age" id="age"></li>
<li><input type="number" name="number" placeholder="time" id="time"></li>
<li><input type="number" name="number" placeholder="weight" id="weight"></li>
</ul>
</div>
</section>
<div class="calculate">
<input type="button" class="button" value="result" id="calculate">
</div>
<!--folder where my jquery code is saved-->
<script src="js/jquery.js"></script>
<!--folder where my jquery code is saved-->
<script src="js/scripts.js"></script>
EDIT
Your HTML has duplicate id calculate for the section and for the input button that's why it isn't working you cannot have multiple elements with the same id I have used your HTML and removed the id from the section tag, see the demo above
I have three types of items I'm trying to get into a comma-separated string (or array), which I want to display and use to form a URL later.
How can I get these three types of data into the same string or array?
An existing POST string
Free input from a text field with an Add button
The values of a series of checkbokes
Currently, with the code I'm using, adding the form input values overrides the string, and I can't figure out how to remove a checkbox value from the string when its box is unchecked.
Here's the fiddle.
I'm using this HTML:
<div class="srs-display">existingPostString</div>
<ul id="srs" class="srs">
<!-- START TEXT INPUT FIELD -->
<li class="sr">
<div class="masonry-well">
<input id="sr-custom" type="text" placeholder="Add your own">
<a class="add-sr-custom">Add</a>
</div>
</li>
<!-- END TEXT INPUT FIELD -->
<!-- START CHECKBOXES -->
<li class="sr">
<div class="masonry-well">
<input id="srPredefined1" type="checkbox" name="srPredefined1" value="srPredefined1">
<label for="srPredefined1" class="ts-helper">srPredefined1</label>
</div>
</li>
<li class="sr masonry-item">
<div class="masonry-well">
<input id="srPredefined2" type="checkbox" name="srPredefined2" value="srPredefined2">
<label for="srPredefined2" class="ts-helper">srPredefined2</label>
</div>
</li>
<li class="sr masonry-item">
<div class="masonry-well">
<input id="srPredefined3" type="checkbox" name="srPredefined3" value="srPredefined3">
<label for="srPredefined3" class="ts-helper">srPredefined3</label>
</div>
</li>
<!-- END CHECKBOXES -->
</ul>
And here's the JS I tried so far:
$('input[type="checkbox"]').bind('change', function() {
var srs = 'existingPostString';
$('input[type="checkbox"]').each(function(index, value) {
if (this.checked) {
/*add*/ /*get label text associated with checkbox*/
srs += ($(this).val() + ', ');
}
});
if (srs.length > 0) {
srs = srs.substring(0,srs.length-2);
} else {
srs = 'No checks';
}
$('.srs-display').html(srs);
});
$(".add-sr-custom").on('click', function() {
var srs = 'existingPostString';
srs += ',' + $('#sr-custom').val();
$('.srs-display').text(srs);
})
I would push your string elements to an array, and then call array.join(',') on it. Like this:
var srs = [];
//each checkbox
srs.push($(this).val());
//later
var new_string = srs.join(',');
Hi man check this solution:https://jsfiddle.net/leojavier/onwkaLet/6/
var srs = [];
$('input[type="checkbox"]').bind('change', function() {
srs=[]
$('input[type="checkbox"]').each(function(index, value) {
if (this.checked) {
srs.push($(this).val());
}
});
$('.srs-display').html(srs);
});
$(".add-sr-custom").on('click', function() {
$('#sr-custom').val(srs);
})
I am attempting to make a todo list.Not too sure why my code isn't working.Trying to get the value from the add item input to the To-Do ul.
HTML
<body>
<div class = 'container'>
<h3> Add Item </h3>
<input id='newTask' type='text'> <button id='addTaskButton'> Add </button>
<h3> To-Do </h3>
<ul id='toDo'>
<li> <input type='checkbox'<label> Learn Javascript </label> <button class='delete'> Delete </button> </li>
</ul>
<h3> Completed </h3>
<ul id='completedTasks'>
<li> <input type='checkbox' checked> <label> Buy Peanut Butter </label> <button class='delete'> Delete </button> </li>
</ul>
</div>
<script src = "todolist.js" type="text/javascript"></script>
</body>
Javascript
var taskInput = document.getElementById('newTask');
var addTaskButton = document.getElementById('addTaskButton');
var incompleteTasks = document.getElementById('toDo');
var completedTask = document.getElementById('completedTasks');
var addTask = function () {
var text = taskInput.value;
var li = '<li>' + text + '<li>';
incompleteTasks.appendChild(li);
}
addTaskButton.onclick = addTask;
Any help is greatly appreciated.
Thanks
appendChild accepts a DOMElement, not a string. You need to create an element first and then append it:
var addTask = function () {
var text = taskInput.value;
var li = document.createElement('li');
li.innerHTML = text;
incompleteTasks.appendChild(li);
}
Demo: http://jsfiddle.net/6wbsujL5/
i have an .each() loop doing something on all matching elements. but i also have a way to add those elements.... i'm trying to get livequery to realize that a new element has been added and run it through the same each loop.
here's a general setup:
http://jsfiddle.net/CUURF/1/
basically, how do i use livequery and each together?
ultimately it is so that i can dynamically add tinymce editor textboxes in metaboxes, but i am fairly certain the problem is that my IDs aren't autoincremting on the add/clone, since the new element isn't in the DOM for the each loop.
edit- i think the biggest thing is that i need the index counter that comes standard w/ .each to work w/ livequery?
edit- here's the code from wpalchemy for looping/cloning
/* <![CDATA[ */
jQuery(function($)
{
$(document).click(function(e)
{
var elem = $(e.target);
if (elem.attr('class') && elem.filter('[class*=dodelete]').length)
{
e.preventDefault();
var p = elem.parents('.postbox'); /*wp*/
var the_name = elem.attr('class').match(/dodelete-([a-zA-Z0-9_-]*)/i);
the_name = (the_name && the_name[1]) ? the_name[1] : null ;
/* todo: expose and allow editing of this message */
if (confirm('This action can not be undone, are you sure?'))
{
if (the_name)
{
$('.wpa_group-'+ the_name, p).not('.tocopy').remove();
}
else
{
elem.parents('.wpa_group').remove();
}
the_name = elem.parents('.wpa_group').attr('class').match(/wpa_group-([a-zA-Z0-9_-]*)/i)[1];
checkLoopLimit(the_name);
$.wpalchemy.trigger('wpa_delete');
}
}
});
$('[class*=docopy-]').click(function(e)
{
e.preventDefault();
var p = $(this).parents('.postbox'); /*wp*/
var the_name = $(this).attr('class').match(/docopy-([a-zA-Z0-9_-]*)/i)[1];
var the_group = $('.wpa_group-'+ the_name +':first.tocopy', p);
var the_clone = the_group.clone().removeClass('tocopy');
var the_props = ['name', 'id', 'for'];
the_group.find('input, textarea, select, button, label').each(function(i,elem)
{
for (var j = 0; j < the_props.length; j++)
{
var the_prop = $(elem).attr(the_props[j]);
if (the_prop)
{
var the_match = the_prop.match(/\[(\d+)\]/i);
if (the_match)
{
the_prop = the_prop.replace(the_match[0],'['+(+the_match[1]+1)+']');
$(elem).attr(the_props[j], the_prop);
}
}
}
});
if ($(this).hasClass('ontop'))
{
$('.wpa_group-'+ the_name +':first', p).before(the_clone);
}
else
{
the_group.before(the_clone);
}
checkLoopLimit(the_name);
$.wpalchemy.trigger('wpa_copy', [the_clone]);
});
function checkLoopLimit(name)
{
var elem = $('.docopy-' + name);
var the_match = $('.wpa_loop-' + name).attr('class').match(/wpa_loop_limit-([0-9]*)/i);
if (the_match)
{
var the_limit = the_match[1];
if ($('.wpa_group-' + name).not('.wpa_group.tocopy').length >= the_limit)
{
elem.hide();
}
else
{
elem.show();
}
}
}
/* do an initial limit check, show or hide buttons */
$('[class*=docopy-]').each(function()
{
var the_name = $(this).attr('class').match(/docopy-([a-zA-Z0-9_-]*)/i)[1];
checkLoopLimit(the_name);
});
});
/* ]]> */
</script>
and the markup for inside my metabox:
<div id="testimonials">
<h2>Testimonials</h2>
<a style="float:right; margin:0 10px;" href="#" class="dodelete-testimonials button"><span class="icon delete"></span>Remove All</a>
<div id="wpa_loop-testimonials" class="wpa_loop wpa_loop-testimonials"><div class="wpa_group wpa_group-testimonials first">
<span class="icon delete"></span>Remove
<div class="slide_preview">
<div class="preview_wrap">
<img class="preview" src="" alt="preview" />
</div>
<input type="hidden" name="_sidebar_meta[testimonials][0][testimonial_image]" value="" class="img_src" />
<input type="hidden" name="_sidebar_meta[testimonials][0][slide_image_alt]" value="" class="img_alt" />
<button class="upload_image_button button" type="button"><span class="icon upload"></span>Change Photo</button>
</div>
<div class="slide_text">
<label>About Testimonial</label>
<div class="customEditor minimal">
<textarea rows="5" cols="50" name="_sidebar_meta[testimonials][0][testimonial_desc]">I realized it was ME causing all the problems</textarea>
</div>
</div>
</div> <div class="wpa_group wpa_group-testimonials last tocopy">
<h3 class="slide">Testimonial Name:
<input type="text" name="_sidebar_meta[testimonials][1][testimonial_name]" value="" />
</h3>
<span class="icon delete"></span>Remove
<div class="slide_preview">
<div class="preview_wrap">
<img class="preview" src="http://localhost/multi/wp-content/themes/callingintheone/functions/WPAlchemy/images/default_preview.png" alt="_sidebar_meta[testimonials][1][testimonial_image] Preview" />
</div>
<input type="hidden" name="_sidebar_meta[testimonials][1][testimonial_image]" value="" class="img_src" />
<input type="hidden" name="_sidebar_meta[testimonials][1][slide_image_alt]" value="" class="img_alt" />
<button class="upload_image_button button" type="button"><span class="icon upload"></span>Upload Photo</button>
</div>
<div class="slide_text">
<label>About Testimonial</label>
<div class="customEditor minimal">
<textarea rows="5" cols="50" name="_sidebar_meta[testimonials][1][testimonial_desc]"></textarea>
</div>
</div>
</div></div>
<p style="margin-bottom:15px; padding-top:5px;"><span class="icon add"></span>Add Testimonial</p>
</div>
the .tocopy class gets shifted by the alchemy code to a new hidden (by CSS) and last element
Your problem was that each was not executing with the clik. And after that there was nothing to make it run.
fixed code
Answer: http://jsfiddle.net/morrison/CUURF/6/
Notes:
Does not use livequery. There's no need to in this instance.
Keeps track of existing editors in an array. This is faster than cycling through the DOM every time you want an editor. DOM stuff is slow, arrays are fast. This also gives you easy access to any or all of the editors for other things you might do.
Doesn't cycle when a new editor is created. It simply modifies the new editor to have an id of the last one plus 1. This is a huge performance boost.