Pop ups/Alerts what is the best way

JavaScript
1

Hi all
Due to the requirements of a client we have to show various alerts that the user has to click before using a form (one as they open the page:please have x/y document with you before you fill in this form and then the other when they send the form which is the do you agree with these terms and conditions).

My big question is what the best way to do this is. A dev friend told me that alerts will be blocked by pop up blockers which everyone seems to have these days according to him. 

What is the best cross borwser way to do this please?

Thank you in advance!!

2

Yeah, even creating something like this in your js:

<span class="error">Please fill this field in</span>

Then in your “on blur, if this field is still empty” clause, you can do an appenchild on that field’s container with this element. Here’s a good “create element” function too.


createEle = function ( type, attr, cont, html ) {
	var ne = document.createElement( type );
	if (!ne)
		return 0;
	for (var a in attr)
		ne[a] = attr[a];
	var t = typeof(cont);
	if (t == "string" && !html)
		ne.appendChild( document.createTextNode(cont) );
	else if (t == "string" && html)
		ne.innerHTML = cont;
	else if (t == "object")
		ne.appendChild( cont );
	return ne;
};

To use the function, just do something like this:


var errorText = "Please fill this field in"
var errorSpan = createEle("SPAN", {className: "error"}, errorText, true);

fieldContainer.appendChild(errorSpan);
3

Well, the appendChild solution is a little less invasive. You could also even highlight the offending field by changing the background red until they type something in there and then onBlur it.

I guess what i’m saying is, the less invasive you are, while at the same time giving people the info you need them to have and they’re receiving it, the better. There’s no reason to be annoying or invasive if you don’t have to. Remember that you want people to fill out your forms. :slight_smile:

EDIT: but to actually answer your question - if you HAVE to have a window telling them they’re doing something wrong, then i would recommend a floating div. You can use a similar technique as the one i detailed above with the Span. I believe you can just absolute position it and z-index it above everything else so it floats on top of things.

4

Thanks Madison for that detailed explanation-if I want a “window” to appear or an “alert” then you would advise against JS for that for usability reasons?

5

The function wants you to put what attributes you want in brackets in kind of a JSONey format. For example if you want a div to look like this

<div id="error" class="redbox">sometext</div>

In the function, it would look like this

createEle("DIV", {id: "error", className: "redbox"}, "sometext", true);
6

Well looking on the internet it seems that divs are the way to do this- what does anyone think? Thanks

7

Madison, what are you expecting for attr in that creatEle function? I’m a relative noob at js and I’m puzzled by

for (var a in attr)
     ne[a] = attr[a];

I get the for loop syntax, but what is ne[a]? ne is a DOM element, not an array right?

8

The window I need to show them is one that says "Please double check this information (ourputs what the user typed in three of the form fields). If the info is fine Click Yes (users goes to next page) or No (the window closes and they change the offending form fields) So a div would be the solution is whast I understand from your answer? That won’t be blocked by a pop up blocker?

9

Correct. A div will not be blocked because it’s not technically a pop-up.