Develop Reference

What is the trouble with usage of single and double quotation

I used the below code to produce input in run time . Alert shows correctly but append causes mistake and meanwhile the single and double quotation will be changed.
Var name1=$(a).attr ('name');
Var idimg=name1+"z";
Var nedi="<input type='file' name='zozo' onchange ='readURL(this , '" + idimg + "');' />";
$(nedi).appendTo ("#divv");
In run time its like :
<input type ="file" name ="zozo" onchange="readURL (this , "3z' ) ; '>

Your code should look like that:
var name1 = $(a).attr('name');
var idimg = name1 + "z";
var nedi = "<input type='file' name='zozo' onchange ='readURL(this , \"" + idimg + "\");' />";
$(nedi).appendTo("#divv");
I.e. you should escape and use double quotes in onchange attribute.

JQuery remove() not working with a two word id

I have a button <button onclick="takedown()"> take down </button> that creates a H1 and button with the id of the text in my text field and h1 at the end for the h1 and button at the end for the button the button has a onclick onclick="delete()". This is that function
function takedown(){
note = document.getElementById("noteinput").value;
idh1 = note + "h1";
idbutton = note + "button";
idcenter = note + "center";
$('<center id="' + idcenter + '"> <h1 id="' + idh1 + '">' + note + '</h1> <button id="'+ idbutton +'" onclick="deletenote()"> Delete </button> </center>').appendTo("body");
}
For the delete function the remove() works only if the id of the button and the h1 is one word.
function deletenote(){
// First setting
var idbuttondelete = event.target.id;
var idh1delete = idbuttondelete.replace("button", "h1");
// Removing the button, h1,center
$('#' + idbuttondelete).remove();
$('#' + idh1delete).remove();
}
Does anybody know whats wrong or how to use JQuery to delete something if it has a two word id.

This will not behave as expected because ID attribute values cannot contain spaces. Replace the spaces with underscore or some other allowed character:
// don't forget VAR or you will have a global variable (bad)
var note = document.getElementById("noteinput").value.replace(/\s/g, '_');
How string.replace() works

First your replace in the delete function will fail if the user enters the word "button", "center", or "h1" as the javascript replace in the delete will only work on the first instance. To prevent the user from having spaces try the below with the delete function you have:
function takedown(){
var note = document.getElementById("noteinput").value;
var idh1 = "h1" + note.replace(/\s/g, '_');
var idbutton = "button" + note.replace(/\s/g, '_');
var idcenter = "center" + note.replace(/\s/g, '_');
//the above 3 variables will use _ instead of space
$('<center id="' + idcenter + '"> <h1 id="' + idh1 + '">' + note + '</h1> <button id="'+ idbutton +'" onclick="deletenote()"> Delete </button> </center>').appendTo("body");
}
If you do not have control over the ID's and need to do this for a lot of objects you can change them all at once (buttons in this case)
$('button').each(function () {
var id = $(this).attr('id');
id = id.replace(/\s/g, '_');
$(this).attr('id', id);
});
And then you can reference all the buttons by ID using a _ instead of space. Otherwise do as others suggested and use a selector other than ID

Since you're using jQuery, you could try this:
var note = $("#noteinput").val().replace(/\s/g, '_');
idcenter = note + "center";
$('<center id="' + idcenter + '"> <h1>' + note + '</h1> <button id="'+ idbutton +'" onclick="deletenote(idcenter)"> Delete </button> </center>').appendTo("body");
}
function deletenote(id){
$('#' + id).remove();
}
You don't need to individually remove the child elements of your tag. I would also recommend against using the center tag, go with a div and center the contents with CSS rather than using center.
I also refactored your function. It's much better to pass in your values and this way, the function is more resuable and testable

As mentioned in the other answers...spaces in ids is bad practice!
BUT if you really need "two words" in your ids, instead of the query selector $, you can use:-
document.getElementById("doesnt mind spaces").remove();

Dynamically Creating ChkBox on click with Different name and Value Giving "NaN" using Jquery?

i am trying to create chkbox on click with different name and value and then alerting its value resulting in error "NaN" my script is here,
<script type="text/javascript">
var k=0,j=0;
$(document).ready(function () {
$("#btnAdd").click(function () {
var field = $("#field").val();
k+=1;
var newRow1="<tr><td align='center' style='font-size: large; color: #212121;' height='35px'>from"
+DDL_fromProfession +" to "+DDL_ToProfession +"</td></tr>"
+"<tr><td align='center' style='font-size:large;color:#212121;' height'35px'>"
+"<input type='checkbox' name='chkbx_CurrPro'"+k+"'' value='"+k+"'>I currently work here</input>";
alert(k);
var chkvalue = parseInt($(":checkbox[name='chkbx_CurrPro'"+k+"'']").val()) + 1;
alert(chkvalue);
var checkBoxes = $("input[name=" + chkbx_CurrPro + "]");
$.each(checkBoxes, function() {
if ($(this).attr('checked')){
//do stuff
}
});
var input = "<input name='parameters' id='field' type='text' />";
var input1="<input name='parametersCompany' id='field' type='text'/>"
var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' height='35px'>"
+ input + " at " +input1 +"</td></tr>";
$('#controls').append(newRow);
$('#controls').append(newRow1);
});
});
</script>
i wanna crete chkbox like,
name = chkbx_CurrPro0 , value = 0
name = chkbx_CurrPro1 , value = 1
name = chkbx_CurrPro2 , value = 2
.
.
.
then i am printing its value resulting in NaN error ?? Hopes for your suggestion
one more thing i wanna do after creating dynamicaally chkbox it will get value of only marked chk box ,
my code here,
var checkBoxes = $("input[name=" + chkbx_CurrPro + "]");
$.each(checkBoxes, function() {
if ($(this).attr('checked')){
//do stuff
}
});
but check all chkbox created at run time
Hopes for Suggestions
Thanks

var chkvalue = parseInt($(":checkbox[name='chkbx_CurrPro'"+k+"'']").val()) + 1;
I think you have some issues with the quotes here. Try this...
var chkvalue = parseInt($(":checkbox[name='chkbx_CurrPro"+k+"']").val()) + 1;
EDIT: Looks like youhave the same issue here...
"<input type='checkbox' name='chkbx_CurrPro'"+k+"'' value='"+k+"'>
This will try to make the name chkbx_CurrPro'1' but that is not valid. This should instead be...
"<input type='checkbox' name='chkbx_CurrPro"+k+"' value='"+k+"'>
Edited Again :
I see another issue here, you are trying to get the value of the checkbox before the checkbox has actually been added to the dom. You have added it to the string, but that is just a string of text when you call parseInt, not a part of the page. Move the parseInt line to below your append lines, near the bottom.

Escaping quotes in jquery

I'm having a bit of a problem escaping quotes in the following example:
var newId = "New Id number for this line";
$(id).html('<td><input type="text" id="my' + newId + '" onKeyUp="runFunction("#my' + newId + '");"></td>');
The issue is that when I look at the generated code the id does update to id="myNewId", but in the function call it looks like this:
onkeyup="runFunction(" #row2="" );=""
What exactly am I doing wrong?

Just don't put JavaScript into the HTML string:
$(id).html(
'<td><input type="text" id="my' + newId + '"></td>'
).find("input").keyup( function() {
runFunction("#my" + newId);
});
Thinking about it, in this special case you can exchange the keyup() function body for:
runFunction(this);
because you seem to want to run the function on the object itself.

You need to use HTML character references for HTML attribute values. Try this:
function htmlEncode(str) {
var map = {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"};
return str.replace(/[&<>"']/g, function(match) { return "&" + map[match] + ";"; });
}
$(id).html('<td><input type="text" id="my' + newId + '" onKeyUp="' + htmlEncode('runFunction("#my' + newId + '");') + '"></td>');

You forgot to escape the attribute's quotes.
var newId = "New Id number for this line";
$(id).html('<td><input type="text" id="my' + newId + '" onKeyUp="runFunction(\'#my' + newId + '\');"></td>');

You should use escaped single quotes \' to surround the #my... part.

Jquery append() isn't working

I have this <ul>
<ul id="select_opts" class="bullet-list" style="margin-left:15px;"></ul>
This javascript code which is meant to go throug a JSON object and add the options
to the UL:
$.each(q.opts, function(i,o)
{
var str='';
str+="<li id='li_" + i + "'><input type='text' id='opt_" + i + "' value='" + o.option + "'>";
str+=" (<a href='javascript:delOpt(" + i + ");'>Delete</a>) </li>";
$("#select_opts").append(str);
});
If I do console.log() I can see that the looping is working. If I do:
console.log($("#select_opts").html());
It shows the HTML being updated as expected. However in the browser window, it shows the
UL as empty!
What am I doing wrong?

$("select_opts").append(str);
should be
$("#select_opts").append(str);

you're referring to object by id so you missed #
$.each(q.opts, function(i,o)
{
var str='';
str+="<li id='li_" + i + "'><input type='text' id='opt_" + i + "' value='" + o.option + "'>";
str+=" (<a href='javascript:delOpt(" + i + ");'>Delete</a>) </li>";
$("#select_opts").append(str);
// ^
}

I can't really see what's wrong, but try this instead, just to see if it works...
$(str).appendTo("#select_opts");
Both should work.

Is this a typo?:
$("select_opts").append(str);
Did you mean?:
$("#select_opts").append(str);
UPDATED:
Try this:
$.each(q.opts, function(i, o) {
var li = $('<li>').attr('id', 'li_' + i);
var in = $('<input>').attr('type', 'text').attr('id', 'opt_' + i).val(o.option);
var aa = $('<a>').attr('href', 'javascript:delOpt(' + i + ');').text('Delete');
li.append(in).append(aa)
$("#select_opts").append(li);
});

The tag Input should be closed - if don't, when using not valid html in append() on Internet Explorer, the div is not put into DOM tree, so you cannot access it with jQuery later.

I'd imagine input needs to be properly self-closed.

I found the bug, another part of the code was emptying the <ul> when i clicked a certain button.