AJAX

JS - Display a msg for only a few seconds

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2009

Posts: 14

Reputation: deadmancoder is an unknown quantity at this point

Solved Threads: 0

deadmancoder deadmancoder is offline

Offline

Newbie Poster

JS - Display a msg for only a few seconds

Sep 16th, 2009

i have a form.. i validated it..
if the form has an empty field, instead of popping up an alert box, i need to display a message that goes off say after 5 seconds..
any idea of how to do it?

•

Join Date: Sep 2005

Posts: 1,075

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: JS - Display a msg for only a few seconds

Sep 18th, 2009

•

Originally Posted by deadmancoder

i have a form.. i validated it..
if the form has an empty field, instead of popping up an alert box, i need to display a message that goes off say after 5 seconds..
any idea of how to do it?

You can create or display and HTML Element, that has the message.

Example of creating one:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var msg  = documement.createElement('div');
msg.innerHTML = 'Your message';
var msg  = documement.createElement('div');
msg.innerHTML = 'Your message';

Then attach that div to whatever element you want it to display on:

eg:

HTML:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<p class="field">
<label for="form-field-id">Label</label>
<input id="form-field-id" name="form-field-id" />
</p>
<p class="field">
<label for="form-field-id">Label</label>
<input id="form-field-id" name="form-field-id" />
</p>

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
// create message element
var msg  = documement.createElement('div');
msg.innerHTML = 'Your message';
// attach it to the DOM
var field = document.getElementById('form-field-id');
field.parentNode.appendChild(msg);
// create message element
var msg  = documement.createElement('div');
msg.innerHTML = 'Your message';
// attach it to the DOM
var field = document.getElementById('form-field-id');
field.parentNode.appendChild(msg);

That would append it as a child of <p class="field"> which is the parentNode of <input id="form-field-id" name="form-field-id" />.

To remove it you set a timer.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
clearTimeout(timer);
timer = setTimeout(function() {
msg.parentNode.removeChild(msg);
}, 5000);
clearTimeout(timer);
timer = setTimeout(function() {
msg.parentNode.removeChild(msg);
}, 5000);

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!