String with whitespace in javascript - javascript

I have a String "Magic Word". I need to use it as value in html checkbox generated by javascript.
in javascript
var itemValue= "Magic task";
var opt = "<input type='checkbox' name='test' id='test' value="+ itemValue+ "/>"+itemValue+ "<br />";
alert(opt);
$(optionDiv).append(opt);
In alert it is displaying the actual value but after submitting form i am getting only first word as value.It is ignoring second word.
Thanks
Ravi Kant

You need to wrap the value with single quotes:
"<input type='checkbox' name='test' id='test' value='" + itemValue + "' />"

If you are using jQuery (as I see the usage of $ in your code), it's better to do it with jQuery itself:
var itemValue= "Magic Word";
var opt = $('<input>').attr({
type: 'checkbox',
name: 'test',
id: 'test',
value: itemValue
});
It will prevent any furthur error, for example if you have some ' in your string:
var itemValue= "Magician's Word";

When you do not use quotes the attributes value ends at the whitespace. Your rendered string appears as
<input type='checkbox' name='test' id='test' value=Magic Word />
So the parser sees
value=Magic
and an attribute Word with no value. You can see that with the coloring in the post above.
You need to add single quotes around the value
var opt = "<input type='checkbox' name='test' id='test' value='" + itemValue + "' />"+ itemValue+ "<br />";
^ ^
Where does this fail? If you have a ' in your string. You would need to add a replace method and swap it for #apos;
itemValue = itemValue.replace(/'/g,"#apos;");

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();

adding input field dynamically causes problems

I'm working on a html page and I have a problem when adding a new input field to the form. The problem is that, the content of the other input fields is resetted when the new field is added.
The code for adding a new input text is the following:
var TSLOT =
[ "<div id=\"TSLOT_n_\">",
"From: <input type=\"text\" id=\"from_n_\" autocomplete=\"off\">",
"By letter: <input type=\"text\" id=\"letter_n_\" autocomplete=\"off\">",
"To: <input type=\"text\" id=\"to0-_n_\" autocomplete=\"off\">",
"<input type=\"text\" id=\"to1-_n_\" autocomplete=\"off\">",
"<BR></div>" ].join("");
function addSlotTransition() {
document.getElementById( "Delta" ).innerHTML += TSLOT.replace( /_n_/g, Delta_size++ ); }
Am I missing something?
When you use .innerHTML, it creates a new DOM tree from the parsed innerHTML and rewrites it, so everything not present in the HTML is lost. Use a real append:
document.getElementById( "Delta" ).insertAdjacentHTML( 'beforeend', TSLOT.replace( /_n_/g, Delta_size++ ) );
JS Fiddle Demo

Split 10 digit number in div into 3,3,4 with jQuery using split or length

Using Digital Bush's maskedInput plugin to format a phone number and then breaking that phone number out of the mask and into a div. I need to split that divs content into 3,3,and 4... i.e. I need to break it into 3 inputs (which will eventually be hidden) to send that back to the server. So far I have everything working except the split and I may be using that wrong instead of breaking it up using length.
Here is a working fiddle of what I have right now:
JS FIDDLE
I have this right here:
<input id="txtPhoneNumber" name="FancyPhoneNumber" class="required phone" type="text" />
<div id="txtHiddenPhoneNumber2"></div>
Which takes the users input and puts the stripped down value (10 numbers) into a div. Then I am taking that div and putting it into three input fields.
$("#txtPhoneNumber").mask("(999) 999-9999");
$("#txtPhoneNumber").blur(function () {
$("#txtHiddenPhoneNumber").val("");
var charArray = $(this).val().split("");
var phoneNumber = "";
$.each(charArray, function(index, value) {
if (!isNaN(value) && value != " ") {
phoneNumber = phoneNumber + value;
}
});
$("#txtHiddenPhoneNumber2").append("<div>"+phoneNumber+"</div>")
var data =$('#txtHiddenPhoneNumber2').text();
var arr = data.match(/.{3}/g);
$("#txtHiddenPhoneNumber2").html("<input type=\"text\" value='"+arr[0] +"'>" + "<input type=\"text\" value='"+arr[1]+"'>" + "<input type=\"text\" value='"+arr[2] +"'>");
});
It's working as I need only it is not sending the last digit to the last input field which is being populated with arr[2]. I assume I am trying to use split wrong. Any ideas?
Try this code
$(document).ready(function() {
$("#txtPhoneNumber").mask("(999) 999-9999");
$("#txtPhoneNumber").blur(function () {
$("#txtHiddenPhoneNumber").val("");
var data =$("#txtPhoneNumber").val();
var arr = data.match(/\d{3,4}/g);
$("#txtHiddenPhoneNumber2").html("<input type=\"text\" value='"+arr[0] +"'>" + "<input type=\"text\" value='"+arr[1]+"'>" + "<input type=\"text\" value='"+arr[2] +"'>");
});
});

characters after whitespace missing - javascript

I am doing something like this:
var MESSAGE = "part1 part2";
var fName = $("<input type=\"text\" class=\"fieldname\" size=35 disabled=disabled value=" + MESSAGE + " />" );
the value of the textbox turns out to be "part1" and is missing part2. i.e the characters after the whitespace . What is the mistake here?
You should add " to your value:
var MESSAGE = "part1 part2";
var fName = $("<input type=\"text\" class=\"fieldname\" size=35 disabled=disabled value=\"" + MESSAGE + "\" />" );
Otherwise your browser interprets "part2" to be a new attribute like "class" or "size".
One improvement could be to use the jQuery .attr() function, since it automatically escapes HTML entities such as ". It is recommended to do so, unless you are absolutely sure that your message doesn't contain any ",<or >.
var MESSAGE = "part1 part2";
var fName = $("<input">).attr({
type : "text",
class : "fieldname",
size : "35",
disabled : "disabled",
value : MESSAGE
});
And now you are safe.

Javascript why isnt this simple counter working in my loop

I have a function that is called button and it appends m table using a loop. I have modified the loop so that it assigns an ID to each <td> it makes. However, it does not seem to be working right.
Here it is in action, follow the use case below to test it: http://jsfiddle.net/JEAkX/19/
Here is a simple use case I use to test it:
Change the letter in a cell
Press "More"
Change the letter in one of the new cells
It should function the same as the original cells if the ID was getting assigned properly.
The counter is: var n = 13;
and it is inserted into the appended cell as such:
cell.innerHTML = "<input type='text' id='r"+ (n) +"' size='1' onChange='getPos('r"+ (n++) +"'), modifyCells('alphabetTable')' value='" + subset[i++] + "' />"`
This is the DOM source I am getting:
<td><input id="r13" size="1" onchange="getPos(" r14="" ),="" modifycells(="" alphabettable="" )="" value="q" type="text"></td>
<td><input id="r14" size="1" onchange="getPos(" r15="" ),="" modifycells(="" alphabettable="" )="" value="r" type="text"></td>
I suspect it has to do with cramming everything into 1 line like #zzzzBov said but I dont know how else to do it.
Besides the n++, there's a quoting issue in your HTML. There are nested single quotes in the onchange attribute, like so:
<input type='text' id='r19' size='1' onChange='getPos('r20'), modifyCells('alphabetTable')' value='p' />
Quick fix for the syntax is to use escaped double quotes, so you can get going:
cell.innerHTML = "<input type='text' id='r"+ n +"' size='1' onChange='getPos(\"r"+ (n++) +"\"), modifyCells(\"alphabetTable\")' value='" + subset[i++] + "' />"
Separation of HTML/CSS/JS notwithstanding.... You need 3 levels of quotes. Also, the comma in the onclick event needs to be a semicolon.
Perhaps:
cell.innerHTML = "<input type='text' id='r" + n + "' size='1'
onChange='getPos(\"r" + (n++) + "\"); modifyCells(\"alphabetTable\")'
value='" + subset[i++] + "' />"

Categories