Question

I have two textareas. When the user clicks a text link, ie “Add to Cart”, how would I get the values of both textareas to be pasted into a third textarea, separated by a delimiter like ” — “, and finally for a new page to load once the function is complete?

The code I have so far is:

JS:

$('#addtocart').click(function() {
var text1 = $("#inputA").val();
var text2 = $("#inputB").val();
var text3 = text1 + "\n--\n" + text2;
$("#personalisedmsg").val(text3);   
};

HTML:

<textarea id="inputA" class="limited" rows="6">Your top message here.</textarea><br />
<textarea id="inputB" class="limited" rows="6">Your bottom message here.</textarea><br />
<textarea id="personalisedmsg"></textarea>

<br><br>

<a id="addtocart" href="#">Add to Cart.</a>

Thanks for any help.

Answer 1

To do the text field stuff…

var text1 = $("#textbox1").val();//textbox1 is the id value of the text area
var text2 = $("#textbox2").val();//textbox2 is the id value of the text area
var text3 = text1 + "\n--\n" + text2;
$("#textbox3").val(text3);//set the next text in textbox3

To load a new page doesnt make sense, what are you doing with textbox3 data before? Do you instead want to submit a form? If so, you can do like this for example (assuming only one form in document)…

document.forms[0].submit();

or to just reload a new page if you really want to then…

window.location = 'newpage.html';//or whatever you page is called

Important Note

When you use the click handler of a link, if the link has a href property set you should ensure you are cancelling the default action (i.e. the reloading of a new page)…

$('#addtocart').click(function(e) {
    e.preventDefault();//cancel the new page load action

    //rest of code here
});

Working Example

Here is a working example

note that after copying your JQuery code I had to add an additional close bracket ) at the end for it to run correctly