Build, Modify, Output Javascript Array

Question

I'm trying to accomplish the following...if it's asking too much in a single question then some simple steps on what events to use will still help.

There are 2 blank textareas sitting next to eachother - Input and Output. Between them are two inputs Before and After. I want to type or paste a list of words into Input separated by line break, for example:

melons
peaches
apples

And then use the Before and After inputs to add in a word/phrase/symbol before and after each keyword. So if I type 'buy' in before and 'today' in after, the Output text area will display:

buy melons today
buy peaches today
buy apples today

I'd like to accomplish this without having any page refreshing. We can assume the form elements are named as follows:

<textarea id="input"></textarea>
<input type="text" id="before" />
<input type="text" id="after" />
<textarea id="output"></textarea>

I've been try to at least get the Input text to display in Output using this code, but that's not even working:

    $(document).ready(function(){
        $('#input').keyup(function(e){
            $('#output').html($(this).val());
        });
    });

Any guidance would be awesome!

Have you tried anything so far? Normally, on Stack Overflow, you're expected to try and accomplish your task before asking the question, posting the relevant code when you get stuck. I would start by looking at the String and Array methods split() and join(). — Andy E, Commented Jun 17, 2013 at 0:40
Yeah, I had started to just try to get the text from Input to display in Output but couldn't even get that to work. I just updated my original post with that code. — Paul, Commented Jun 17, 2013 at 0:46

leonhart · Accepted Answer · 2013-06-17 01:21:48Z

1

a compact one:

$("#input,#before,#after").on("keyup", function () {
    $("#output").val(
    $.map($("#input").val().split("\n"), function (n, i) {
        return $("#before").val() + " "+ n + " " + $("#after").val();
    }).join("\n"));
});

example

answered Jun 17, 2013 at 1:21

leonhart

1,2017 silver badges12 bronze badges

Add a comment |

omma2289 · Accepted Answer · 2013-06-17 01:01:05Z

This would do the trick:

function update_output(){
    //Split input by newline
    var input_words = $('#input').val().split('\n');
    var output_lines = new Array();
    //Iterate over each keyword and prepend and append values
    $.each(input_words, function(i, word){
        output_lines.push($('#before').val()+' '+word+' '+$('#after').val());
    });
    //Display output in textarea
    $('#output').val(output_lines.join('\n'));
}

You just need to choose when you want to update the output textarea, maybe bind it so it updates every time the #input or #before and #after changes:

$('#input,#before,#after').on('change',update_output);

Rafa · Accepted Answer · 2013-06-17 01:27:34Z

Alright, I can help you to get started. My answer is not complete, but you can have a very good idea from here. Note I wrote this code to be easy to understand and I am not using sophisticated approaches on purpose.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
    $("#input").keypress(function(key){
        if(key.which == 13) {
            refreshData();
        }
    });
});

function refreshData() {
    var beforeVal = $("#before").val();
    var inputLines = $("#input").val().split(/\r\n|\r|\n/g);
    var desiredOutputVal = "";
    for(var i=0; i<inputLines.length; i++) {
        desiredOutputVal += beforeVal + inputLines[i] + "\n";
    }
    $("#output").val(desiredOutputVal); 
}

</script>
</head>
<body>
<form>
    <textarea id="input"></textarea>
    <input type="text" id="before" />
    <input type="text" id="after" />
    <textarea id="output"></textarea>
</form>
</body></html>

Collectives™ on Stack Overflow

Build, Modify, Output Javascript Array

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related