Question

I have a form with several text boxes.

The first input box is “Business Name”. There are several more boxes with various information and then the final box is “URL” where I type in the url I want this business to have in my database. Instead of manually typing this url I want it to take the value of the title input box, and replaces the spaces with “-” and make it all lowercase. I also want to prefix the url.

So if I enter “Bobs Hotel”, then as soon as I am done typing the URL box would be prefilled with “business/bobs-hotel”. If I typed “Mikes Hot Dogs” it would be “business/mikes-hot-dogs”, etc and ready for me to submit the form.

EDIT: I forgot an important detail:
The word “business” isnt actually going to be used. The word to use is coming from a drop down select box. This box has 3-4 option names (not values), “hotel”, “Restaurant”, etc. So if you select “Hotel” from the dropdown then the URL would be “hotel/hotel-name”

One important thing is although you select “hotel” from the dropdown the value of hotel is a number, like 5 or whatever (as it corresponds to a category ID in the database)

How might I do this?

Answer 1

Given that your inputs have id name and url, you could do something like this with jQuery:

$("#name").on("focusout", function () {
    var business = $("#business").val();
   $("#url").val(business + "/" + $(this).val().toLowerCase().replace(" ", "-"));
});

Demo

Update:

Updated the example to take the value for business from a dropdown-list as well. See updated demo.

Update 2:

To get the content of the selected option instead of the value, you could do this instead:

$("#name").on("focusout", function () {
    var business = $("option:selected", "#business").text();
   $("#url").val(business + "/" + $(this).val().toLowerCase().replace(" ", "-"));
});

Now we get the selected option-element within element with id business, and read its content with the .text() method.

DEMO