jQuery replace text when clicking over different input text objects

Question

I'm new to JS / jQuery.

WHat I try to achieve is that every time I press over "Title" or "Description", only the current's text area message should appear.

I tried to clone the original div, but I really didn't know where or how to use it, so this idea of replacing the text seemed easier to implement.

As I said, I'm new to web programming and I really hit the rock. I don't understand why the following code doesn't work:

http://jsfiddle.net/MceE9/

<div class="content"> 
<form method="POST" id="anunt">
    <table id="anunt">
        <tr id="title">
            <td> Title: </td>
            <td> <input type='text' name='title' id='titleClick'> </td>
        </tr>
         <tr id="description">
            <td> Description: </td>
            <td> <textarea rows="5" cols="40" id="descriptionClick" name="description"></textarea> </td>
        </tr>
        <tr>
        <td> <input type="submit" name="send" value="Send"> </td>
        </tr>
    </table>
</form>

var title;
var description;

$('#titleClick').one('click', function(){
        title = '<span id="text" style="font-weight: bold; font-size: 18px; color: red;">Title text</span>';
       $("#title").append(title);
       $('#description').html($('#description').html().replace(description, ''));
    });

$('#descriptionClick').one('click', function(){
        description = '<span id="text" style="float:left; font-weight: bold; font-size: 18px; color: red;"> Description text</span>';
        $("#description").append(description);
        $('#title').html($('#title').html().replace(title, ''));
});

Your jsfiddle had typos. The edited fiddle can be found here Is this the kind of behavior that you want? — achakravarty
– achakravarty, Commented Aug 27, 2013 at 15:58
@achakravarty .one() might not of been a typo, as its a legitimate function. You're right however, it should of been .on(). Your fiddle also produces duplicate strings if you keep clicking on the same input box. — Jimmery
– Jimmery, Commented Aug 27, 2013 at 16:01
Oh sorry my bad :( Thanks for pointing that out. Updated it here — achakravarty
– achakravarty, Commented Aug 27, 2013 at 16:10

Jimmery · Accepted Answer · 2013-08-27 15:55:36Z

1

Change your javascript to something like this:

$('#titleClick').on('focus', function(){
    $('#text').remove();
    $("#title").append('<span id="text" style="font-weight: bold; font-size: 18px; color: red;">Title text</span>');
});

$('#descriptionClick').on('focus', function(){
    $('#text').remove();
    $("#description").append('<span id="text" style="float:left; font-weight: bold; font-size: 18px; color: red;"> Description text</span>');
});

answered Aug 27, 2013 at 15:55

Jimmery

10.2k25 gold badges90 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan P. · Accepted Answer · 2013-08-27 16:01:12Z

1

You could do something like this:

var text = {};

text['title'] = '<span id="text" style="font-weight: bold; font-size: 18px; color: red;">Title text</span>';
text['description'] = '<span id="text" style="float:left; font-weight: bold; font-size: 18px; color: red;"> Description text</span>';

$('input, textarea').on('focus', function() {
    $('#text').remove();
    $(this).parent().append(text[this.name]);
});

http://jsfiddle.net/dpatz/MceE9/4/

answered Aug 27, 2013 at 16:01

Dan P.

1,4311 gold badge16 silver badges28 bronze badges

Comments

Harold Smith · Accepted Answer · 2013-08-27 16:09:10Z

0

Or something like this could work:

http://jsfiddle.net/MceE9/5/

var title;
var description;

$('#titleClick').on('click', function(event){
    event.stopPropagation();
    var textToDisplay = 'this is an error message';
    var $errorElement = $('span.title-text');

    $errorElement.text(textToDisplay);

    $('body').one('click', function() {
        $errorElement.text('');
    });

});

$('#descriptionClick').on('click', function(){
    // repeat for second element - or make a more generic function that works for both.
});

answered Aug 27, 2013 at 16:09

Harold Smith

9423 gold badges13 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery replace text when clicking over different input text objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related