How to display text in a textbox using jQuery and another textbox?

I have a form, where there are three fields: Title, Slug, and URL.

I have a plugin that converts the text entered in the Title field as a slug. (For example, if I type "Joe Bloggs Goes On Holiday" wo开发者_StackOverflow中文版uld then display as "joe-bloggs-goes-on-holiday" in the slug field).

What I need to do now, is get the information in the slug field and add it to my URL field. In the URL field, there already is text (usually "/mainpage/" but this will depend on what type of page is being created). So in the URL field I would then have "/mainpage/joe-bloggs-goes-on-holiday".

How can I achieve this?

Cheers

You can use the .val method to get and set the value of fields:

var urlField = $("#urlField");
urlField.val(urlField.val() + $("#slugField").val());

You would use either jQuery append, or concatinate the value:

Former

$('textarea').append($('slug').val());

Latter

$('textfield').val($('textfield').val + $('slug').val());

Use jQuery's val() method.

HTML

Slug: <input id="slug" value="joe-bloggs-goes-on-holiday" /><br />
URL: <input id="url" value="/mainpage/" /><br />
Result: <input id="result" />

JavaScript

var $urlObj = $("#url");
$("#result").val($urlObj.val() + $("#slug").val());

Here's a working jsFiddle.