<table border="0" class="commentbox">
<tr>
<td>
<div id="comment-f78d0b00-a008-473d-b647-a4a103ee3778"></div>
<input type="button" class='btnReply' id="reply-f78d0b00-a008-473d-b647-a4a103ee3778" value="Reply"/>
</td>
</tr>
</table>
$(".commentbox .btnReply").live("click", function () {
// $(this).hide();
// i = 1;
id = $(this).attr("id").split("-")[1]
alert(id);
var strDiv =
"<input type='text' class='txtCmnt' id='txtReply-" + id + "' />
<input type='button' class='btnSave' value='Save' id='btnSave-" + id + "' /> ";
$("#comment-" + id).append(strDiv);
});
i want the f78d0b00-a008-473d-b647-a4a103ee3778 to come after split rather alert is giving
f78d0b00
I have tried to change id = comment_ f78d0b00-a008-473d-b647-a4a103ee3778 and split
id = $(this).attr("id").split("_")[1],but it doesnt work.
Edited
Input - container-f78d0b00-a008-473d-b647-a4a103ee3778
Output after split f78d0b00-a008-473d-b647-a4a103ee3778
A slightly convoluted means of achieving your end-result:
// splits the supplied string by the hyphen '-' character
var string = 'comment-f78d0b00-a008-473d-b647-a4a103ee3778'.split(/-/);
// removes the zeroeth/first element from the string array
string.shift();
// joins the remaining elements from the string back together
var newString = string.join('-');
console.log(newString);
JS Fiddle demo.
Edited to turn the above into a function:
function splitString(haystack, needle){
if (!needle || !haystack){
return false;
}
var string = haystack.split(needle);
string.shift();
return string.join(needle);
}
// the first argument is the string you want to work on,
// the second is the character you want to split on
// f is the variable that will hold the new string
var f = splitString('comment-f78d0b00-a008-473d-b647-a4a103ee3778','-');
console.log(f);
JS Fiddle demo.
References:
join().
shift().
split()
If the format of the string is not going to change then how bout using the substring function instead?
var str = "comment-f78d0b00-a008-473d-b647-a4a103ee3778";
var subStr = str.substring(str.indexOf("-") + 1);
alert(subStr);
This returns: f78d0b00-a008-473d-b647-a4a103ee3778
Here s a jsfiddle for the same
http://jsfiddle.net/M2Ywy/
If it works for you then your code would look like this
var id = $(this).attr("id");
var subStr = id.substring(str.indexOf("-") + 1);
alert(subStr);
var strDiv =
"<input type='text' class='txtCmnt' id='txtReply-" + id + "' /> <input type='button' class='btnSave' value='Save' id='btnSave-" + id + "' /> ";
$("#comment-" + subStr).append(strDiv);
Demo jsFiddle
This should do it:
var id = '';
var strDiv = '';
$(".btnReply").live("click", function () {
// $(this).hide();
// i = 1;
id = $(this).prev('div').attr("id").split("comment-")[1];
alert(id);
strDiv = "<input type='text' class='txtCmnt' id='txtReply-"+ id +"' /><input type='button' class='btnSave' value='Save' id='btnSave-"+ id +"' />";
$("div[id*="+id+"]").append(strDiv);
});
You can do it this way, might be a longer version, but just 3 lines strong.
Just split() the string via the hyphens "-" and then splice the first index and then rejoin the whole string using the join() method
example: http://jsfiddle.net/eE48z/
$(document).ready(function(){
$(".commentbox .btnReply").click(function(){
var jid = $(this).attr("id").split("-");
jid.splice(0,1);
var id=jid.join("-");
alert(id);
var strDiv = "<input type='text' class='txtCmnt' id='txtReply-" + id + "' /><input type='button' class='btnSave' value='Save' id='btnSave-" + id + "' /> ";
$("#comment-" + id).append(strDiv);
});
});
Related
I have some js that adds an input field for a user:
var user = "O'Conner, John"
b.innerHTML += "<input type='hidden' value='" + user + "'>";
When its inserted it looks like this:
<input type="hidden" value="O" Conner, John'>
How do I amend this so it outputs like this:
<input type="hidden" value="O'Conner, John">
I need the value to show the full name with the apostrophe. How can I get this to work?
You can escape the value first by replacing it with HTML entities.
As for ' - It can either be ’ or ‘
var user = "O'Conner, John";
user = user.replace("'", "‘");
document.getElementById("container").innerHTML += "<input type='text' value='" + user + "'>";
<div id="container"></div>
There is also another thread that already answers this question.
When you create an element with JavaScript, you can pass the value to the input without any issue. Please check the below example:
var user = "O'Conner, John"
var b = document.getElementById("b")
var input = document.createElement("input")
input.type = "text"
input.value = user;
b.appendChild(input)
<body id="b"></body>
I am working with HTML and Javascript.
I want to pass 2 arguments to the signUp function. I do not know where to put the comma between two arguments. Please help me!
Below is my code:
cellAction.outerHTML = "<input type='button' value='Approve' class='approve' onclick='signUp( \""+childData.email+"\"+\""+,childKey+"\" )'></td>";
Thanks in advance!
You do not need any + and quotes:
cellAction.outerHTML = "<input type='button' value='Approve' class='approve' onclick='signUp(childData.email, childKey)'></td>";
Demo:
var childData = {email: 'aa#xy.com'};
var childKey = 'k123';
var cellAction = document.getElementById('cellAction');
cellAction.outerHTML = "<input type='button' value='Approve' class='approve' onclick='signUp(childData.email, childKey)'></td>";
function signUp(email, key){
console.log(email + " :: " + key);
}
<div id="cellAction"></div>
You can use template literals
cellAction.outerHTML = `<input type='button'
value='Approve'
class='approve'
onclick='signUp(${childData.email},${childKey})'>
</td>`;
I added textbox value as Baker's Basket, Pune, Maharashtra, Indiasd but on click event in textbox it only shows Baker's
I want to display whole text Baker's Basket, Pune, Maharashtra, Indiasd in the textbox.
JS FIDDLE EXAMPLE
// Try to Enter text given bellow
//Baker's Basket, Pune, Maharashtra, Indiasd
$("#clk").on('click', function () {
$("#cnt_div").empty();
var getTxt = $("#txt_n").val();
var addContent = "<input type='text' value=" + getTxt + " />";
$("#cnt_div").append(addContent);
});
without editng addContent variable
Edited:
JS FIDDLE SAMPLE TWO
$("#clk").on('click', function () {
var gData1 = $("#txt_1").val();
var gData2 = $("#txt_2").val();
var gData3 = $("#txt_3").val();
var cnt_1 = "<span class='lbl_normal_mode'>" + gData1 + "</span><input class='txt_edit_mode' value=" + gData1 + " type='text'/>";
var cnt_2 = "<span class='lbl_normal_mode'>" + gData2 + "</span><input class='txt_edit_mode' value=" + gData2 + " type='text'/>";
var cnt_3 = "<span class='lbl_normal_mode'>" + gData3 + "</span><input class='txt_edit_mode' value=" + gData3 + " type='text'/>";
var content_Data = "<div class='chunk_div_holder'><div style='float:left:width:100%'>" + cnt_1 + "</div><div style='float:left:width:100%'>" + cnt_2 + "</div><div style='float:left:width:100%'>" + cnt_3 + "</div></div>";
$(".dynmic_cntt").append(content_Data);
});
You should better append the element and its properties dynamically as an object:
$('<input>', {
type: 'text',
value: $("#txt_n").val()
}).appendTo($("#cnt_div").empty());
This will solve the problem of extra spaces (no quotes for value=Baker's Basket), wrong string escape (if the value will have quotes) for value attribute and other caveats.
N.B.: There is no textbox type for <input> element. It should be text instead.
DEMO: http://jsfiddle.net/ZyMCk/11/
Add the field in two stages:
add the field as you are already
set the value of the field using .val()
It is because you aren't escaping ' single quote.
Instead you can replace
this line
var addContent="<input type='textbox' value='"+getTxt+"' />";
with
var addContent=$("<input type='textbox' />").val(getTxt);
or
var addContent="<input type='textbox' value=\""+getTxt+"\" />";
Value attribute should enclose in quotes. In your case, its better to use double quotes, because Baker's Basket, Pune, Maharashtra, Indiasd already have a single quote in it.
$("#clk").on('click',function(){
$("#cnt_div").empty();
var getTxt=$("#txt_n").val();
var addContent="<input type='textbox' value=\""+getTxt+"\" />";
$("#cnt_div").append(addContent);
});
Fiddle
Edit
$("#clk").on('click',function(){
$("#cnt_div").empty();
var getTxt=$("#txt_n").val();
var addContent=$("<input/>",{type:"text",value:getTxt});
$("#cnt_div").append(addContent);
});
Updated fiddle
change "+getTxt+" to '"+getTxt+"'
fiddle
OR
change "+getTxt+" to \""+getTxt+"\"
Heres a better way of doing this...
var addContent=$("<input type='textbox' />").val(getTxt);
http://jsfiddle.net/ZyMCk/9/
Basically, if creating an element to append to the DOM your better off doing this as a jQuery object. This way we can take advantage of methods such as val() for adding the value.
UPDATE
Ive simplified things a bit for you...
JSFIDDLE: http://jsfiddle.net/ZyMCk/22/
$("#clk").on('click', function () {
$('.dynmic_cntt').empty();
$('.form-text').each(function(){
var $div = $('<div style="float:left:width:100%;"></div>');
var $span = $('<span class="lbl_normal_mode">'+ $(this).val() +'</span><input class="txt_edit_mode" value="'+$(this).val() +'" type="text"/>');
$('.dynmic_cntt').append( $div.append( $span ) );
});
});
for ( i = 1; i <= NumOfText; i++ ) {
var ipBoxName="MyInput"+i;
var txtBoxAutoNumbering="<input type='text' name='textbx[]' id='TxtBx' style='width:50px;' value="+i+" /> ";
$('#NewlyCreatedSelectBoxes').append(txtBoxAutoNumbering);
var txtBox="<input type='text' name='textbx[]'/> "
$('#NewlyCreatedSelectBoxes').append(txtBox);
var Select_SelectionOptions="<select id='SelectOption'><option>Text_Box</option> <option>Text_Area</option><option>Radio_Button</option></select> ";
$('#NewlyCreatedSelectBoxes').append(Select_SelectionOptions);
var c = document.getElementById("TxtBx").value;
alert(c);
var Select_For_Multiple_Choices="<button type='button' onclick='ChildTxtBoxes()' id='Child_Btn'"+i+">Click for child selections</button><br><br>";
$('#NewlyCreatedSelectBoxes').append(Select_For_Multiple_Choices);
}
Here I have put an alert to print the value of the textbox represents by "var txtBoxAutoNumbering" variable. Bt it always prints 1 though it runs. y is that?
You are creating multiple elements with the same ID. This is invalid HTML. As a side effect, when you try to get them by ID, you will only get the first one you created.
Try the following instead:
var txtBoxAutoNumbering="<input type='text' name='textbx[]' id='TxtBx" + i +"' style='width:50px;' value="+i+" /> ";
And
var c=document.getElementById("TxtBx" + i).value;
I want the variable inputname to go up by 1 every time a new <input /> is added
e.g.
<input name="1" />
<input name="2" />
<input name="3" />
---html---
<p class="add">Add</p>
<div class="added"></div>
---jQuery/javascript---
$(document).ready(function() {
$("p.add").click(function() {
var inputname = somevar;
var added = "<input type=\"text\" name=\""+inputname+"\" />";
$("div.added").append(added);
});
});
here it is on jsfiddle.net if it helps -> http://jsfiddle.net/gamepreneur/54kzw/
Set inputname like this:
var inputname = $('.added input').length + 1;
This gets the total number of added inputs and increments by one, resulting in the new name.
Change the variable scope
Use this:
// declare your variable here so it exists throughout every call, instead of being
// delcared new with every call.
var inputname = somevar;
$(document).ready(function() {
$("p.add").click(function() {
var added = "<input type=\"text\" name=\""+(inputname++)+"\" />";
$("div.added").append(added);
});
});
Alternatives:
Grab the number of inputs ($('div.added input').length) and use that for a counter.
Grab the id of the last item $('div.added input:last').prop('name')) and increment it.
You need to declare inputname in the global scope so that it lasts longer than just the duration of the click function and then you need to increment it each time you use it.
I modified your fiddle to this: http://jsfiddle.net/jfriend00/54kzw/2/
var inputname = 1;
$(document).ready(function() {
$("p.add").click(function() {
var added = "<input type='text' name='" + inputname++ + "' />";
$("div.added").append(added);
});
});
Try
$(document).ready(function() {
$("p.add").click(function() {
var inputname = $('input', $("div.added")).length + 1;
var added = "<input type=\"text\" name=\"" + inputname + "\" />";
$("div.added").append(added);
});
});
Consider adding some other selectors to choose those inputs (like a class selector)