How to concatenate data from document.getElementById - javascript

I have two text fields in an html form with id 'co_addrcheck' and 'usrad_co_addr'. I tried concatenating the two values and copy that to another text field. I tried using the following code but the new text has an 'undefined' value.
var loc = document.getElementById('co_addrcheck');
var home = document.getElementById('usrad_co_addr');
Neither
var post2 = loc + home;
nor
var post2 = loc.value + home.value;
works.
Any help would be highly appreciated.

Assuming they're text inputs, you should use the "value" property,
var post2 = loc.value + home.value;
I hope it helps

Second one should be working. And best advice is to enclose within try/catch and see the error message.

Related

Adding new lines in a textarea with javascript (ie 9)

Looked all over, but I can't find the answer. I am trying to generate JSON from some inputs and display the generated JSON in a textarea, like below. But no matter what I try, I can't get my fields to show on separate lines. Any help appreciated
var txt = "{a : 'a',\r\nb : 'b'\r\n}";
document.getElementById('eventsJSON').innerHTML = txt;
Edit: I have simplified my example to something reproducable that demonstrates my problem
You can try this replace function:
.replace(/(\r\n|\r|\n)/g, '\r\n');
It might also be a matter of using an innerText instead of a value change:
... elem.innerText + (!fields.local[i].number ? "'" : '') ...

Can't use document.getElementById().innerHTML to rewrite the original html

I am tring to add some content after the original content, but the new content will cover the original content everytime...What wrong in this case? (Sorry for my terrible english...)
var originaltext = document.getElementById("id").innerHTML;
document.getElementById("id").innerHTML = originaltext + "newtext";
One more thing,I tried to use alert to show the "originalltext", but it have nothing to show.
alert(originaltext);
your code looks ok to me. I made a jsfiddle for you just to see that it works http://jsfiddle.net/3mqsLweo/
var myElement = document.getElementById('test');
var originalText = myElement.innerHTML.toString();
myElement.innerHTML = originalText+" new text";
check that you only have one element with the id "cartzone"
A simple and fast way to do this is to concatenate the old value with the new.
document.getElementById('myid').innerHTML += " my new text here"
this problem usually occurs when the rest of your code is poorly written and contains errors or when the same ID is used several times.
I had the same problems in the past.
you have tow options:
check the rest of your code (validate)
use jQuery - I don't know how, but it works every time.

How to select something from a textarea. Creating my editor

I've been searching for a few hours, trying with so many different solutions but anything works for me.
I'm building my own text editor in jQuery, but now I'm facing a problem:
I have this code right now:
function bbcode() {
var div = document.querySelector('textarea');
var start = div.selectionStart;
var finish = div.selectionEnd;
var text = div.value.substring(start, finish);
div.value('[b]' + text + '[/b]');
}
And this too:
$('#bold').click(function(evt) { bbcode(); });
#bold is a button and I want that when I click, it adds me the first part of the bbcode ([b]), the text I've already selected and the last part of the bbcode.
But it doesn't work for me. Where's the problem?
Thanks for reading and helping.
PD: I hope I have explained well.
Cheers.
You are assigning it wrongly. value is not a function which accepts parameter. It is instead a property which can be assigned to.
div.value = '[b]' + text + '[/b]'; // setter
DEMO

How to get and add the values of two elements by ID

<script type="text/javascript">
$(document).ready(function() {
var sub_total = $("sub_total").text();
alert(sub_total);
var ship_total = $("ship_total").val()
alert(ship_total);
var new_total = sub_total + ship_total;
$('#new_total').html( new_total.toFixed(2));
});
</script>
I'm using alert to test the output and It is not getting the value inside the span ID.
$<span id="sub_total"><?php echo $sub_total = number_format($this->cart->total(), 2); ?></span></td>
This does display correctly on the page but the alert is a blank box. Causing the new_total value to stat NaN not a number.
How do I add the values in these two fields?
EDIT:
You forgot to get the value - you are only getting the element
Since you're already using jQuery you can get the value like
var sub_total = parseInt($("#sub_total").text());// this is where you need to use .text()
var ship_total = parseInt($("#ship_total").text());
or if you want to keep plain js..
document.getElementById("sub_total").value
Since you have $ in your text you need to get rid of it before parsing it. You can use regex as #Bubbles stated or whatever method you want to remove the $ sign.. ex. substring.. split..
$.trim($("#sub_total").text().split('$')[1])
or
$.trim($("#sub_total").text()).substring(1)
wirey gives a good review of part of the problem, but as is I don't believe it's enough. "parseInt" won't work on "$20", you have to remove the dollar sign first. If you're feeling lazy, this is nothing a good regex won't be able to solve in short order:
var sub_total = parseInt($("#sub_total").text().match(/[0-9]+/)));
var ship_total = parseInt($("#ship_total").text().match(/[0-9]+/)));
This will just grab the number from the span, then parse it.

Insert a whole element into another element, not just its inner HTML

I'm trying to figure out how to use jQuery to construct HTML as sanely as possible. As far as I can tell, this should produce <div><span>Alice</span></div>, but instead produces <div>[object Object]</div>:
post = $("<div>");
username = $("<span>").html("Alice");
post.append(username);
I've found that replacing the last line with post.append(username.html()) gets me closer to my goal, but it omits the <span> tags if I do it that way. How do I insert a child element with the surrounding tags, and without writing out "<span>" + username + "</span>", which seems like a novice approach to the task?
EDIT: Stupid mistake. The snippet I posted above was excessively simplified; I was really trying to do post.append(username + another_span_element) in my code. Obviously I can't append objects like that. I've changed it to post.append(username); post.append(another_span_element); and now it works fine. Durr!
Works for me: $("<div>").append($("<span>").html("Alice"))[0].outerHTML == "<div><span>Alice</span></div>"
What you're aiming for is done with the text() method:
post = $("<div>");
username = $("<span>").text("Alice");
post.append(username);
Example here.
Is there a reason for not doing:
$('<div><span>Alice</span></div>').appendTo('body');
or
var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$(username).appendTo('#user');
or
var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').html(username);
or
var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').text(username);
or any of the other 200 options?

Categories