CODEWITHSUNDEEP
javascriptjqueryhtml
kenoussi yahya
kenoussi yahya

Reputation: 35

Show a dialog box next to a textarea without pop-up or alert box

I want to show a short message besides a textarea once we click inside the textarea.

Here is the simple code that i need to modify :

<textarea id="txt" ></textarea>

and : 

$('#txt').click(function(){
// what should i put here to show a dialogbox besides textarea ?
});

Here is a fiddle demo except that i need to put whatever i want as a message once we click inside textarea.

I am a complete newbie so please bear with me if i didn't put things the way it should. Thank you.

input, textarea, select {
    display: block;
}
<form>
    <p>Try submitting an empty form and one with invalid email addresses.</p>
    <label for="one">One Email: </label><input type="email" id="one" required data-errormessage-value-missing="Something's missing" data-errormessage-type-mismatch="Invalid!">
    <label for="another">Another Email: </label><input type="email" id="another" data-errormessage="Generic error message">
    <label for="textarea">A textarea: </label><textarea id="textarea" required data-errormessage-value-missing="Add some text"></textarea>

    <select required data-errormessage-value-missing="Please, pick one">
        <option selected disabled value="">Pick one</option>
        <option value="1">One</option>
    </select>
    <button>Submit</button>
</form>

Upvotes: 2

Views: 2183

Answers (4)

Pete
Pete

Reputation: 58432

You could do something like the following - and I would use focus rather than click . The following code adds the text message you need besides your textarea.

If you want to style the message with an arrow too, have a look at this: cssarrowplease.com

// show hidden message on focus
$('#txt').on('focus', function() {
  $('#txt-message').show();
});

// hide hidden message on blur - optional extra
$('#txt').on('blur', function() {
  $('#txt-message').hide();
});
/* start message hidden */
#txt-message {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt"></textarea>
<span id="txt-message">message here</span>

Upvotes: 1

Alex Kirko
Alex Kirko

Reputation: 466

Here is the fiddle for my non-JavaScript alternative.

Pete's answer works if you are satisfied with simply displaying text. If you need the info-box to look pretty and be displayed above the other elements then you will need something different like this:

CSS:

.cPopTable {
    position: absolute;
    top: 50px;
    right: 200px;
    background-color: #ffffff;
    z-index: 10;
    display:none;
}

.cContainer:active .cPopTable {
    display:table;
}

HTML:

<div class="cContainer">
    <textarea id="txt">Default text here</textarea>
    <table class="cPopTable"><tr><td>message pop-up here</td></tr></table>
</div>

Also, the benefit is not using any JavaScript. In fact, unless you are worried about really old browsers you can easily handle all the tasks like these using CSS z-index and event-processing as shown in this example.

You can easily change the position and the way the box is displayed (font, background, etc.) by working with the cPopTable CSS.

Upvotes: 0

Prakash
Prakash

Reputation: 576

Hope this will help you .

$(document).ready(function() {
  $('#textarea').click(function() {
    $('#showMsgId').text("some message .......")
  });
});
input,
textarea,
select {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>Try submitting an empty form and one with invalid email addresses.</p>
  <label for="one">One Email:</label>
  <input type="email" id="one" required data-errormessage-value-missing="Something's missing" data-errormessage-type-mismatch="Invalid!">
  <label for="another">Another Email:</label>
  <input type="email" id="another" data-errormessage="Generic error message">
  <label for="textarea">A textarea:</label>

  <div style="width: 100%; overflow: hidden;">
    <textarea id="textarea" required data-errormessage-value-missing="Add some text" style="width: 200px; float: left;"></textarea>

    <span id="showMsgId" style="margin-left: 10px;"></span>
  </div>

  <select required data-errormessage-value-missing="Please, pick one">
    <option selected disabled value="">Pick one</option>
    <option value="1">One</option>
  </select>
  <button>Submit</button>
</form>

Upvotes: 0

Tuck Wise
Tuck Wise

Reputation: 21

Add:

<span id='shortMessage'></span>

tag right after the textarea div.

Then replace your comment with:

$('#shortMessage').innerHTML('your message');

Upvotes: 0

Related Questions