Write Contents of Text Field

[almo136]

I have a page with 3 text fields and 1 dropdown menu.

I need a script that will print something like this on the screen (either as the text fields are completed or once the user presses a button):

Lorem ipsum <contents of text field 1>dolor sit <a href="<contents of drop down>">amet,</a> consectetur adipisicing elit, sed do eiusmod temper incididunt <content of text field 2> ut labore et dolors <content of text field 3>magna aliqua. Ut enum <img src="someimage.jpg" />ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

I need the output to be printed like the above so the user can copy/paste it into their html code so the html tags should remain in the output.

Any ideas how to do this (using jQuery is fine)?

[lucy24]

either as the text fields are completed or once the user presses a button

That's a big difference. Responding to content in text fields is tricky; executing the whole thing in response to a button press should be trivial. What's the problem with getElementById("blahblah")?

There are assorted ways to keep the html code visible. I generally take the copout route: replace all < globally with &lt; before outputting the result.

[daveVk]

var html = 'Lorem ipsum _f1_dolor sit <a href="_f2_">...';
... code to set f1 to f5 from value of each control ...
html = html.replace( '_f1_', f1 );
html = html.replace( '_f2_', f2 );
...
... code to insert html where it is needed on page ...

[Fotiman]

<div id="container">
  <input id="f1">
  <input id="f2">
  <input id="f3">
  <select id="f4">
    <option value="0">Content 0</option>
    <option value="1">Content 1</option>
    <option value="2">Content 2</option>
  </select>
</div>
<div id="result"></div>

var $f1 = $('#f1'),
  $f2 = $('#f2'),
  $f3 = $('#f3'),
  $f4 = $('#f4'),
  $result = $('#result');
$('#container').on('focusout', function(e){
  $result.html(
    $('<div></div>', {
      text: "Lorem ipsum " + 
        $f1.val() + 
        " dolor sit <a href=\"" +
        $f4.val() + 
        "\">amet,</a> consectetur adipisicing elit, sed do eiusmod temper incididunt " +
        $f2.val() + 
        " ut labore et dolors " + 
        $f3.val() + 
        " magna aliqua. Ut enum <img src=\"someimage.jpg\" />ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    })
  );
});

This example uses jQuery and listens for the focusout [api.jquery.com] event (which is similar to 'blur') on the element that contains all of your inputs and drop down. This creates a single event listener as opposed to 1 per input. You could easily change this to listen for the 'click' event of a button if you so desired (which you may because otherwise you'll end up with a partially formed result as the user moves from field to field, until they've entered values for all of them).
Also, not sure what you wanted for "contents of drop down" (did you mean the value, or the text that's shown in the drop down?). I chose to use the value.