homepage Welcome to WebmasterWorld Guest from 54.83.133.189
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Write Contents of Text Field
almo136




msg:4635378
 11:48 pm on Jan 5, 2014 (gmt 0)

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




msg:4635384
 12:10 am on Jan 6, 2014 (gmt 0)

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




msg:4635481
 11:27 am on Jan 6, 2014 (gmt 0)

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




msg:4635584
 7:27 pm on Jan 6, 2014 (gmt 0)


<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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved