We Keep Coding

How to change name and id of element using jQuery?

I'm new at jQuery. I'm cloning one specific HTML block and trying to change last cloned html's element's nameor id, class but i couldn't. I can find and alert name of element that i want to change, but i can not change it. Hope you can help me.. thanks in advance.
My code
jQuery(document).on("click",".smclass",function(){
var html = jQuery(this).closest(".entry-edit").clone().appendTo(".main-col-inner").html();
html = jQuery(html).find('.start').attr('name','optional[2][type]').attr('id', 'Type1');
}
HTML
<div class="entry-edit">
<!-- html codes -->
<button id="Addfield" title="Field Ekle" type="button" class="smclass" onclick="" style="float: right;"><span><span><span>Field Ekle</span></span></span></button>
<!-- html codes -->
<select id="Type" name="optional[1][type]" class="start">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
<!-- html codes -->
</div>

Your code is just putting an html string into a variable and then creating a new jQuery object with said html. You are not selecting the new element and changing it
//Just remove the .html() call and you will have the cloned element
var ele = jQuery(this).closest(".entry-edit").clone().appendTo(".main-col-inner");
ele.find('.start').attr('name','optional[2][type]').attr('id', 'Type1');
You also do not need to make multiple .attr calls, you can pass it an object with the name value pairs you want to set
ele.find(".start").attr({
"name":"optional[2][type]",
"id":"Type1"
});

just try vise versa
var clonedObject = jQuery(this).closest(".entry-edit").clone();
clonedObject .find('.start').attr('name','optional[2][type]').attr('id', 'Type1');
clonedObject.appendTo(".main-col-inner").html();

Regular expression to change Ingredient 1 TO "Ingredient" + counter

I am trying to change just the label tag when I clone the div. The current piece of JS changes the product name within the drop down list.
var clone = $('#product-1').clone(false)[0].outerHTML.replace(/1/g, counter);
<div class="activeingredients">
<div class="products" id="product-1">
<label>Active Ingredient 1</label>
<ul>
<li style="display:inline-block">
<select name="productid">
<option>Product 1</option>
</select>
</li>
</ul>
</div>
</div>
http://jsfiddle.net/ehv1xmL6/
Thanks

There are several ways to do this, including just having a string without a number ready to replace the label text. However, following what you already have I made the following changes:
I first added a class to the label to make it easier to select. Your current code selects all numbers inside the div.
<label class="ingredientLabel">Active Ingredient 1</label>
Second, I cloned the div. Then selected the html inside of .ingredientLabel and changed the number using Regex. I changed the regex to find any number inside the string and not just '1' in case the number changes for some reason.
$(document).ready(function(){
var counter = 1;
$("#addproduct").click(function(){
counter+= 1;
var clone = $('#product-1').clone(false);
clone.find(".ingredientLabel").html(clone.find(".ingredientLabel").html().replace(/[0-9]+/g, counter));
$(clone).appendTo(".activeingredients")
});
});
Here is the working fiddle: JSFiddle

Javascript selectedindex not working

I have a code that should allow me to show div id='yestext' when 'Yes' is selected in the dropdown box. Yet this is not working. I don't know what isn't working, but something clearly isn't.
JS
function text() {
if (document.getElementById("text").selectedIndex == "0") {
document.getElementById("yestext").style.display = "block";
}
else {
document.getElementById("yestext").style.display = "none";
}
}
HTML
<select id='text' onchange='text()'>
<option value="0">Yes</option>
<option value="1">No</option>
</select>
<div style='display:none;' id='yestext'>
What text would you like displayed?
<input type='text' class='text' name='type' value size='20'/>
</div>
Here is the JSFiddle containing my code: http://jsfiddle.net/4w9fh/

Your code is fine. The You had the JSFiddle set to run your code in OnLoad and it wrapped the text() function so it did not add it to global namespace. I fixed it by moving the js to the head and now it works.
I also called the text() function when the html finishes loading to take in account the browser remembering the last choice.
Here is the updated code.
http://jsfiddle.net/4w9fh/2/

jQuery variable issues

My attempt to find the name of the div holding a select box, then put this div into a variable which is used elsewhere in my jQuery code, does not seem to be working. Another piece of code is appending extra divs to the page, these have select boxes of class .parent within them. However many extra divs I append, the code below always appends to the first div added, even though checking through a browser the div structure works as expected. I'm new to jQuery so don't know if I'm missing something obvious, but I'm pretty sure the variable div below should be redefined each time .parent element is changed as it is part of the variable's definition. When I've run an alert just to check the variable name it is always defined as sub_cat_1. This is correct for the first appended div class of show_sub_categories but thereafter it should be sub_cat_2, sub_cat_3 etc incrementing. As said the select boxes are definitely in the correct divs on the page, so I can only asssume I'm missing something simple with this bit of the code below. (basic html at bottom for reference)
$('.parent').livequery('change', function () {
var div = $(".parent").closest("div").attr("id");
$(this).nextAll('.parent').remove();
$(this).nextAll('input').remove();
alert(div);
$('#' + div).append('<img src="images/system/loader2323.gif" style="float:left" id="loader" alt="" />');
$.post("get_chid_categories.php", {
parent_id: $(this).val(),
}, function (response) {
setTimeout(function () {
finishAjax(div, response);
}, 400);
});
return false;
});
This is just to show you the basic structure of the divs being appended.
<p id="add_field"> … </p>
<div class="show_sub_categories">
<div id="sub_cat_1">
<select class="parent" name="search_category"> … </select>
<select class="parent" name="sub_category"> … </select>
</div>
</div>
<div class="show_sub_categories">
<div id="sub_cat_2">
<select class="parent" name="search_category"> … </select>
<select class="parent" name="sub_category"> … </select>
</div>
</div>
I've put a very simplified version of this at http://www.0urs.com/fiddle/experience1.php just to illustrate the physical location of the appended select boxes.

Make link target depend on form values

I have a django view which contains a simple form and a table of links. The form has a dropdown box, and the link's query parameters should contain the value of the dropdown. So for example if the dropdown has options 1, 2 and 3, and 2 is selected, the link targets in the top three rows of the table should be something like this:
/preview/first?other_arg=somevalue&choice=2
/preview/second?different=argument&choice=2
/preview/third?choice=2
Everything except the arg=2 is predefined for each row.
It seems to me that there are two ways of doing this. Either I could recreate all the links whenever the dropdown value changes, or I could create the link when it is clicked. I've been trying to do it via the second method, but I can't get it to work (i.e. nothing happens when I click on the link). I created a fiddle showing my test code:
http://jsfiddle.net/LcY8c/4/
Is this the best approach, and can anyone point out where I'm going wrong?

I changed you fiddle a bit. Changed the id's to class, and the jQuery from an click event to a change event. Is it this you are looking for?
http://jsfiddle.net/Grevling/LcY8c/17/
<div>
<select id="choiced">
<option choice="1">1</option>
<option choice="2">2</option>
<option choice="3">3</option>
</select>
</div>
<div>
<a class="link" base="/link1" href="#">link1</a>
<a class="link" base="/link2?arg1=1" href="#">link2</a>
<a class="link" base="/link3?arg1=other" href="#">link3</a>
</div>
Script:
$(document).ready(function () {
$("#choiced").change(function () {
var reportType = $('#choiced').val();
var link = $('a').attr('base') + '&choice=' + reportType;
$("a").each(function (index) {
$(this).attr("base", $(this).attr("base") + '&choice=' + reportType);
});
});
});

You're using an id attribute with the same value 3 times. Id attributes are supposed to be unique.
<a id="link" base="/link1" href="#">link1</a>
<a id="link" base="/link2?arg1=1" href="#">link2</a>
<a id="link" base="/link3?arg1=other" href="#">link3</a>