CODEWITHSUNDEEP
javascriptjqueryhtml
Pirvu Mihai-Cristian
Pirvu Mihai-Cristian

Reputation: 33

jQuery replace text when clicking over different input text objects

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, ''));
});

Upvotes: 1

Views: 301

Answers (3)

Harold Smith
Harold Smith

Reputation: 932

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.
});

Upvotes: 0

Dan P.
Dan P.

Reputation: 1431

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/

Upvotes: 1

Jimmery
Jimmery

Reputation: 10119

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>');
});

Upvotes: 1

Related Questions