JavaScript is taking only the first word in a sentence - javascript

am stuck over a small issue here.
I want to set the value of a input using JavaScript but jQuery is not displaying the full sentence.
var name = "Richard Keep";
But when I use try to do this
$('input#nameid').val(name)
to this input
<input type="text" id="nameid">
the value is set to Richard alone instead of Richard Keep.
How do I make the jQuery echo the entire string and not just the first word in a string? Thanks
EDIT:
<td id="To_be_collected_port" onclick="requestPopup()" class="tr-selected">
<div class="pop-td To_be_collected_port">
</div>
this is the content am fetching
</td>
This will display this only.
var str = $('#To_be_collected_port').text();
then
$('.xyz').html("<input type=\"text\" name=\"text\" id=\"selected-service-text\" value="+str+">");

You're missing escaped double quotes around the value attribute:
value="+str+"
should be:
value=\""+str+"\"
Fiddle - works now
Explanation of why it was displaying "this"
This means your input tag is effectively composing to this:
<input type="text" ... value=this is the content am fetching>
value = "this"
is, the, content, am, fetching = attributes without any value

That is odd behaviour. Here are a few things you can try
1) add a console log just before putting the value in the field. if it does not properly show the entire name then you probably have some code manipulating the variable.
console.log(name);
$('input#nameid').val(name);
2) stupid suggestion but is your input field visually not to small? Maybe it added the entire name but you just don't see it.
3) use an onchange event on the field to check if something was changed after you updated the input field.

Related

Using &letter; notation in JavaScript doesn't write greek letters

When I set an input box value with the "value" attribute in HTML to a greek letter, it shows the greek letter correctly. But when I change the "value" attribute with JavaScript, it uses the "&letter;" format. What can I do so that JavaScript behaves just as HTML?
HTML: <input type="text" id="input" value = "ε"> works fine.
JavaScript: document.getElementById("input").value = "ε"; shows ε but not the greek letter
The problem you're facing occurs because of the way you're setting the input. Javascript is (correctly) treating your ε as an ordinary string, because you haven't told it that it's anything else.
If this were an element like p, or span or any other contextual text element, you could simply do
myElem.innerHTML = "ε";
However, since you want to set this to be the input's value, you can't use innerHTML, because it wouldn't make any sense. What you need to do is something like this.
function htmlDecode(input) {
var doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
}
document.getElementById("myInput").value = htmlDecode("ε");
<input type="text" id="myInput" name="myInput" value="">
The function I used was originally posted in this SO answer. Be sure to read the rest of it, to see the other uses.

Input field limit 9 char and after 3 char automaticly ads "-"

<input id="myText" type="text" placeholder="XXX-XXX-XXX" /></input>
<script type="text/javascript">
document.getElementById("myText").value.substr(0, 9).match(/.{1,3}/g).join("-");
</script>
There are a few problems with your current JavaScript. First, your script will only run once when the page is loaded, meaning any input you enter into myText after that will never be processed. Consider binding to an event of myText - for example, the onkeyup event.
Another problem is that your JavaScript doesn't take into account existing dashes when splitting the value of myText into 3-character parts - this results in undesirable behaviour, where more and more dashes will be added to the value, at seemingly random positions.
Lastly, as mentioned by Tushar in the comments, you need to set the value of myText to the new, processed value you create. Otherwise this value ends up being unused and discarded, and your code appears to do nothing.
Putting this all together, the fixed code might look like:
var textInput = document.getElementById("myText");
textInput.onkeyup = function()
{
var dashlessInput = textInput.value.replace(/-/g, "");
textInput.value = dashlessInput.substr(0, 9).match(/.{1,3}/g).join("-");
};
<input id="myText" type="text" placeholder="XXX-XXX-XXX" /></input>
Hope this helps! Let me know if you have any questions.
For future reference - try to clearly state what your question by explaining what you want to achieve, and specifically indicating what problems you're facing. This way, you're more likely to attract good answers rather than downvotes.

Add code examples on your page with Javascript

I have a html code inside string
string_eng += '<b>Year Bonus</b> - bonus for each year</br></br>';
And I want to put this inside textarea, but when I do it, the result is:
- bonus for each year
It simply deletes all things inside the html tags. I just want to show all the code inside the string. I already tried <xmp>,<pre>, but none of them worked.
Thanks for any help.
EDIT.
Code with which I input data from the array to the textarea/code.
$('body').append('<code class="code_text"></code>');
for(var i=0; i<tag_list.length; i++){
var string='';
string+='---------------------------------------------------------------------------------\n';
string+='tag: '+tag_list[i][0]+'\n';
string+='nazwa_pl '+tag_list[i][1]+'\n';
string+='nazwa_eng '+tag_list[i][2]+'\n';
string+='tekst_pl '+tag_list[i][3]+'\n';
string+='tekst_eng '+tag_list[i][4]+'\n';
string+='\n\n\n';
$('.code_text').append(string);
}
I tried this using jsfiddle:
HTML
<textarea id="code"></textarea>
JavaScript
$(document).ready(function() {
var string_eng = '';
string_eng += '<b>Year Bonus</b> - bonus for each year</br></br>';
$("#code").html(string_eng);
});
Output (contained in textarea)
<b>Year Bonus</b> - bonus for each year</br></br>
Try it here: http://jsfiddle.net/UH53y/
It does not omit values held within tags, however if you were expecting the <b></b> tags to render as bold within the textarea, or the <br /> tags to render as line breaks, this wont happen either. textarea does not support formatting.
See this question for more information: HTML : How to retain formatting in textarea?
It's because you're using the jQuery .append method which seems to parse the string and insert it afterwards. I don't know jQuery at all, so there might be another special jQuery method, but here is a simple fix:
$('.code_text').append(document.createTextNode(string));
Edit:
I just read and tried the answer of Salman A. The "special jQuery method" exists and he used it. You can use this:
$('.code_text').text(string);

jQuery - cannot extract .data() attribute with calculated key

I'm working with this jQuery code:
$('#selection').bind("change", function(){
var selected = $(this).find('option:selected');
var datavar = selected.text().toLowerCase();
//alert(datavar);
//alert('looking for '+datavar+$('#test').data(datavar));
//alert($('#test').data('var1'))
});
http://jsfiddle.net/Zwe6h/
The purpose is to choose what data variable you wish to extract from the #test element by using the #selection element. it should alert you as to what the value of that data variable is.
The datavar variable is set correctly as alert(datavar); prints out the correct value.
However, the second test alert (which is the purpose of this test) displays it as undefined. The third test alert simply tests to make sure you can explicitly call the data variables by hard-coding the variable.
I am not understanding why it is coming back with undefined. I tested the type of datavar, and it is indeed a string, so I would expect it to behave just as it would if it were hardcoded. Can someone shed some light on this?
Try this:
alert('looking for '+datavar + $('#test').data($.trim(datavar)));
Issue is with some newline chars (casued by html formatting) in the text selected as they are not included between the option start and end tag. So you just need to trim it.
Fiddle
Or fix your options to include the text in between closing and ending tags.
<select name='selection' id='selection'>
<option value='1'>var1</option>
<option value='2'>var2</option>
</select>
Fiddle2

Setting the Input Value attribute to a variable with space.

I am trying to set the value of a input button to a string variable.i.e"A Guide to the School Bus"; But when the HTML loads up only the first word comes up in the button. My code is given below. Thanks for the help.
var title="A Guide to the School Bus";
var htmlString= "<div class="+title+ ">"+"<input type="+"button "+"value="+title+" onclick=loadBook()>"+"</div>";
$(htmlString).appendTo(attachPoint);
And the attachpoint is a reference in the HTML that i got using the following.
var attachpoint=document.querySelector('.buttonAttachPoint');
The problem is because you're not putting quotes around the attribute values. Try this:
var htmlString= '<div class="'+title+'"><input type="button" value="'+title+'" onclick="loadBook()"></div>';
You can either escape all the " in your string or, like I have done, just switch between ' and ". " will show up as a normal character and ' is used to mark the start and finish of strings.
As a side point you probably wouldn't want to put the variable title as the class on the div as it would add each separate word as a class, so in your example the div would have 6 classes added to it.

Categories

Resources