add characters that break html to input - javascript

How do I add this to a html text input.
var s = '>>>>>>> """""""""""""';
How can I escape these characters so that it does not break the the HTML
var addMe = '<input type="text" value="' + s + '" />';
This is how it looks when its dynamically added with jquery
<input type="text" ??="" value=""/>

Use .attr('value', ...) to add arbitrary text to an element's value without needing to escape it.

Related

faceMocion input tag not get bind in jQuery

when i use <input type="hidden" value="asombro" class="facemocion" /> in body then its work correctly ,
but when i try to bind same tag with jQuery like
html= html + "<input type="hidden" value="asombro" class="facemocion" />"
it not get work
You will need to use single quotes for the string:
html += '<input type="hidden" value="asombro" class="facemocion" />';
Or escape the double quotes inside it:
html += "<input type=\"hidden\" value=\"asombro\" class=\"facemocion\" />";
You can do it like more jquery way rather than creating it as string,
var hidden = $("<input>", {
type: 'hidden',
value: 'asombro',
'class': 'facemoion'
});
$("body").append(hidden);
Try make this way.
html += '<input type="hidden" value="asombro" class="facemocion"/>
$('body').append(html);
now use the plugin.
$('.facemocion').faceMocion();

How to get the textbox value which is dynamically added to a table row inside a <td>

I am appending a <td> having an input text to a row. I want to get the value of this textbox and use it in another function.
Below is the code snippet :
row.append($('<td ><input type="text" value=' + item.Marks + ' size="10px" class="marks" id="txtmarks" maxlength="3"/></td>'));
Thanks in advance.
Split it in two statements:
var input = $("<input type="text" size="10px" class="marks" id="txtmarks" maxlength="3"/>").val(item.Marks);
var newRow = $('<td></td>').append(input);
row.append(newRow);
So, now you have a reference to your input, and the code looks much cleaner.

Changing value of text field with jQuery

I have a form input text field, and I want to change the text inside of the text field when the user clicks a button. I can get the specific textfield with jQuery, but cannot change the text with .val(). Is there another way this can be done, or am I doing something wrong.
Here is the text field:
<input type="text" name="textBox" id="Stage 1text" size="20" value="Enter Current Comp." align="center">
Then I use this to identify and change the text field. where in this case stage = "Stage 1" and dance is the string I want to place in the text field.
str = "#" + stage + 'text';
alert(str + '::' + dance); // confirm that strings are correct
jQuery(str).val(dance);
An ID should not have spaces. Stage 1text is an invalid ID
Add an underscore instead of space
<input type="text" name="textBox" id="Stage_1text" size="20" value="Enter Current Comp." align="center">
and try below,
// v--- assuming this will be Stage_1
str = "#" + stage + 'text';
alert(str + '::' + dance); // confirm that strings are correct
jQuery(str).val(dance);
incase if stage is returned from backend.. then simply replace space with _
str = "#" + stage.replace(/ /g,"_") + 'text';
id attributes should not contain spaces.
You could change your code like so:
<input type="text" name="textBox" id="Stage_1text" size="20" value="Enter Current Comp." align="center">
str = "#" + stage.replace(' ','_') + 'text';
alert(str + '::' + dance); // confirm that strings are correct
jQuery(str).val(dance);

Set value of input html string with jquery

I have snippet of HTML in a string like this:
var htmlString = '<input type="text" id="someID" name="someID">';
How do I, with jQuery, set its value so that the HTML ends up like this:
'<input type="text" id="someID" name="someID" value="newValue">';
Thanks,
Scott
$(htmlString).attr("value", "newValue");
But this will return jQuery object, not string. You can add it to DOM.
$(htmlString).attr("value", "newValue").appendTo("body"); // you can give any element instead of body
EDIT :
You can use #idor_brad's method. That is the best way or
var htmlString = '<input type="text" id="someID" name="someID">';
var $htmlString = $(htmlString);
$htmlString.attr("value1", "newValue1");
$htmlString.attr("value2", "newValue2");
$htmlString.attr("value3", "newValue3");
console.log($htmlString.get(0).outerHTML);
or
var htmlString = '<input type="text" id="someID" name="someID">';
var $htmlString = $(htmlString);
$htmlString.attr("value1", "newValue1");
$htmlString.attr("value2", "newValue2");
$htmlString.attr("value3", "newValue3");
console.log($("<div>").append($htmlString).html());
You would first need to add your element to the DOM (ie to your web page). For example:
$(".container").append(htmlString);
Then you can access your input as a jquery object and add the value attribute like so:
$("#someID").val("newValue");
-- See Demo --
You just want to manipulate the string, right? There are a lot of ways to skin this cat, but
var newString = htmlString.replace('>', ' value="newValue">');
After the dom ready, append your input to body and then grab the input with id = "someID" and set its value to newValue
$(document).ready(function(){
$("body").append(htmlString);
$("#someID").val("newValue");
});

how to delete a value between <input> tags?

I'm creating checkboxes using JQuery as following:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')
Then later it is removed whenever the user checks the box in:
if (this.checked) {
$(this).remove();
}
However, The input box is deleted, but the number (id) stays on the page, along the <br/> Tag, so I can see the #i there on the HTML Page.
I would like to remove them as well.
So, to in order to make my question as complete as possible, here is how the HTML is laid:
<input id="1" type="checkbox">
1
<br>
Could someone please give me a clue how to remove #i and <br/> from the page?
Thanks
as stated by other answers - input don't have closing tags
You will still need to remove all id and <br />. You can find those with .next() function in jquery. You should put your id in <label> or <span>.
Then. for example:
$(this).next('label').remove();
$(this).next('br').remove();
$(this).remove();
Code can be written shorter but it's for you to see how it works.
The text in <input> text boxes is not set with a textnode (like for textareas), but with the value attribute. (Sorry for the confusion)
Yet, you want to have a checkbox. Best, create a <label> for it, instead of a text node plus a <br /> (which is not handleable with jQuery):
<div class="inputcell">
<input type="checkbox" id="check5">
<label for="check5">5</label>
</div>
With this DOM, you can easily remove the whole box by $("#check5").parent().remove(). Note that single numbers are no valid element ids.
that's because input tags don't have closing tags and remove ignores everything after the >, change this:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')
to:
$('<input type="checkbox" ' + 'id=' + (i+1) + 'value="' + (i+1) +'"><label>'+ (i+1) +'</label>')
$(this).next('label').andSelf().remove();
input tags don't have closing tag, to create a checkbox you just need the following:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>');
and if you want also to use a label for that checkbox, create appropriate label or any other element, because you can't put closign tag for input and a text between them

Categories