Q: Can 'return' be used to break a JS function? I am a beginner and was trying to just write something from scratch: I want to 'write' inputs from text fields into a textarea.
So I made the following
(also viewable on http://jsfiddle.net/jolarti/FX6xL/1/ )
HTML:
<input type='text' id='fruit' value='fruit'>
<br/>
<input type='text' id='salad' value='salad'>
<p>This is the meal you made:</p>
<textarea id="myText" rows="4" cols="50"></textarea>
<br />
<button>Make food</button>

SCRIPT:
$(document).ready(function () {

    $("#fruit");
    $("#salad");
    $("button").click(function () {
        var fruit = $("#fruit").val();
        var salad = $("#salad").val();

        if (fruit === "" || salad === "") {
            alert("Type in both ingredients in order to make something!!");
        } else {
            //alert("Would you like " + fruit + " with some " + salad + " to have for lunch?");
            var phrase = ("Would you like " + fruit + " with some " + salad + " to have for lunch?");
            document.getElementById("myText").innerHTML = phrase; //writes to the textarea
            return false; //i use this to end the script and not make the page disappear
        }
    });

});

Am I using 'return' for the right purpose here?
It works and it does what I want but... is this good practice or bad practice?
I put this 'return' in, because if I don't, the page becomes completely empty after input!
+ I need explanation on why that happens.
And I wonder: could I also use 'return' to actually write output to the screen?

A: Yes, that would work, but try not typing anything and you see it doesn't reach the return false; so it submits ;)
That said, try this:
<button type="button">Make food</button>

Now you don't need return false; because the button is just a button.

A: Is this good practice or bad practice?
In this case, it is a bad practice. return false prevent the default behaviour and the event propagation. That can lead to unwanted behaviour if, for example, you want to stop the default behaviour but not the propagation or vice versa.
It is much better to use function available on the event to stop that. To use those function, you need to get the event as argument. Just write the click function like that :
$("button").click(function (e) { //Here e == Event
    //Do something
    e.stopPropagation(); //Prevent event from bubling
    e.preventDefault(); //Prevent the default behaviour of the HTML element
}

I need explanation on why that happens
As stated above, return false prevent default behaviour. The default behaviour of a button is to send the form. That action reload the page, hence why it become blank. 
To counter that, you just have to prevent the default behaviour with, wait for it, what you just learn!
$(document).ready(function () {

    $("#fruit"); //What are those useless jQuery objects? ;)
    $("#salad");
    $("button").click(function (e) { //Don't forget the event
        e.preventDefault();
        var fruit = $("#fruit").val();
        var salad = $("#salad").val();

        if (fruit === "" || salad === "") {
            alert("Type in both ingredients in order to make something!!");
        } else {
            //alert("Would you like " + fruit + " with some " + salad + " to have for lunch?");
            var phrase = ("Would you like " + fruit + " with some " + salad + " to have for lunch?");
            document.getElementById("myText").innerHTML = phrase; //writes to the textarea
        }
    });

});


A: It works, but it's kind of a legacy feature.  The modern way to do this is:
$(...).on('click', function(event) {
    event.preventDefault();
}

Also makes clearer what you're doing: preventing the browser's default behavior.
But in this case it's far more appropriate to just use a plain button as Niet says, so there is no default behavior.  Saves you from oversights like, for example, how you don't prevent the default behavior when there's an error.  :)
Other minor comments:


*

*You're binding this behavior to every single <button> on the page, which will be surprising as soon as you add a second one; you probably want an id on that button.

*Don't use .innerHTML when you have plain text!  It's easy to accidentally inject HTML tags, because most of the time it appears to work.  Assign to .textContent instead, or use $(...).text(some_text).

*This won't work very well for bots or scrapers or when your JS fails to load or for people like me who whitelist JavaScript.  :)  (Another reason to use a plain button instead of a submit button!)  Doesn't matter much when you're experimenting, but something that's good to keep in mind in general.  If a browser already has a feature you want, just use it, then add the JS on top if necessary.


A: Yes, you can return at any time to end a function in JavaScript.  The reason your page disappears is because it is trying to send the form data to the server; of course, since you've specified no method or action, it is doing nothing, thus the blank page.
Instead, you can remove the 
<Form></Form>

tag if you're not planning to send this information back to any server on a button press.  Also, your two calls to $("#fruit"); and $("#salad"); are unnecessary, as they aren't actually performing any action on the nodes after selecting them.  You can simply your code to the following:
$(document).ready(function () {

    $("button").click(function () {
        var fruit = $("#fruit").val();
        var salad = $("#salad").val();

        if (fruit === "" || salad === "") {
            alert("Type in both ingredients in order to make something!!");
            return; //end the function if this is invalid
        }
        var phrase = "Would you like " + fruit + " with some " + salad + " to have for lunch?";
        $("#myText").html(phrase); //writes to the textarea using jquery
    });
});

Fiddle example:  http://jsfiddle.net/FX6xL/2/
