with this?

I have this basic asset I'm trying to build into a website...here's what it looks like:



And what I need to do is when you hit that 'Join' button, it brings up the following pop up window based off of this block of code...

<a onclick="window.open('http://www.eaton-jobs.com/find.job?job=users.doemailcheck&siteid=79&usertype=2&cat=0&email=Email','mywindow','width=685,height=500, left=200,top=100,screenX=200,screenY=100')">Join the Talent community</a>

But in staging when you click that Join button, it's not working. What am I doing wrong here can anyone help?

6/3/2009 12:11:15 PM

You're wrapping the submit input with an anchor? You can't do that. Put your JS in the input element:

<form action="...">
<label for="email">E-Mail</label>
<input type="text" name="email">
<input onclick="..." type="submit" value="Join">
</form>

Also, you shouldn't embed JS in your markup, but whatev.

6/3/2009 12:20:23 PM

that's it? where does the link go? Pretend you don't know shit about HTML.

Thanks so much for your help

6/3/2009 12:29:40 PM

you put it in the onclick event just like you did before. except it's on an input tag not an a tag

^^ also, i think i know what you're getting at, but can you elaborate on "you shouldn't embed JS in your markup"

[Edited on June 3, 2009 at 12:36 PM. Reason : .]

6/3/2009 12:35:37 PM

Quote :

"where does the link go?"

The "linking" is handled by the form. The action attribute of the form should point at a script that will handle the form info, the method element (set to either GET or POST) tells the form how to pass the variables (the email address). Because the pop-up is controlled by JS, it's called just as it would if you were using an anchor element.

Quote :

"can you elaborate on "you shouldn't embed JS in your markup""

Separation of concerns, MVC, that sort of thing. As a CS guy, I'm sure you're familiar with those ideas.

By keeping your JS (behavior layer) separate from your markup (content) and stylesheets (presentation), you make streamline your site development and management.

I also want to plug jQuery here. It makes these sort of tasks so much easier.

6/3/2009 12:49:52 PM

so like this?

<form action="window.open('http://www.eaton-jobs.com/find.job?job=users.doemailcheck&siteid=79&usertype=2&cat=0&email=Email','mywindow','width=685,height=500, left=200,top=100,screenX=200,screenY=100')">
<label for="email">E-Mail</label>
<input type="text" name="email">
<input onclick="window.open('http://www.eaton-jobs.com/find.job?job=users.doemailcheck&siteid=79&usertype=2&cat=0&email=Email','mywindow','width=685,height=500, left=200,top=100,screenX=200,screenY=100')" type="submit" value="Join">
</form>

6/3/2009 12:52:16 PM

No, the action attribute should point at a script that handles the information entered in the form. What are you doing with the email address? I'm guessing it's put into a mailing list or database, right? You should have a script that takes care of that.

http://www.w3schools.com/html/html_forms.asp for more info on forms (and HTML/CSS/JS in general, w3schools is a great resource)

The onclick event goes in the input element like you have. Just fix the action attribute and you should be good to go.

Also, the label element I stuck in there is totally optional, I just included it for semantic reasons. Same goes with the name attributes; your markup and styling are likely different.

[Edited on June 3, 2009 at 12:56 PM. Reason : ]

6/3/2009 12:56:33 PM

OK so I tried the following snippet below at http://fundisom.com/live_preview.html to see if it would compile and look OK and it seems to work except after putting in the email address and it popping up the window (correctly) it get's a site error on the orignal part if I were to close out. Not sure why....

What I'm trying to do with the email is pass it along to the email address prompt in the popup if you follow it. just feed it a bogus email addy and you'll see.


<form action=window.open>
<label for="email">E-Mail</label>
<input type="text" name="email">
<input onclick="window.open('http://www.eaton-jobs.com/find.job?job=users.doemailcheck&siteid=79&usertype=2&cat=0&email=Email','mywindow','width=685,height=500, left=200,top=100,screenX=200,screenY=100')" type="submit" value="Join">
</form>

6/3/2009 1:05:05 PM

oh, i see what you're trying to do. you probably don't want a form afterall.

get rid of the form and change the join input to

<input onclick="window.open('http://www.eaton-jobs.com/find.job?job=users.doemailcheck&siteid=79&usertype=2&cat=0&email='+document.body.getElementById('email'),'mywindow','width=685,height=500, left=200,top=100,screenX=200,screenY=100')" type="button" value="Join">

you might also have to change <input type="text" name="email"> to <input type="text" id="email"> i can't remember how name and id are handled on different browsers

[Edited on June 3, 2009 at 1:21 PM. Reason : no submit]

6/3/2009 1:12:30 PM

I think what Ernie is trying to say is this...

function openWindow() {
window.open('http://www.eaton-jobs.com/find.job?job=users.doemailcheck&siteid=79&usertype=2&cat=0&email='+document.body.getElementById('email'),'mywindow','width=685,height=500, left=200,top=100,screenX=200,screenY=100');
}

and then in your onclick event can be: onclick="openWindow()"

You would put the openWindow function in either the head of your html page or in a separate javascript file. If it's in your head you would put it inbetween script tags so...

<script type="text/javascript">
...your javascript function goes here...
</script>

I hope I simplified it enough for you.

you can even take it one step further if you want to reuse the 'openWindow' function with different url's and pass it the url but thats for another day...

6/3/2009 1:31:30 PM

that's also what i was thinking, but technically you still have javascript in your markup. i thought maybe there was some way to further decouple the js that i didn't know about

and making an openWindow function with one line in it is a little silly. still a common practice, but imo it could go either way. unless like you're saying pass in a url, then it makes more sense

[Edited on June 3, 2009 at 1:36 PM. Reason : .]

6/3/2009 1:34:25 PM

^I wasn't really saying one or the other...just trying to better explain what Ernie was talking about with an example. Seeing as they're knowledge on the subject is very basic... a visual example is easier to understand. But yeah, if the only javascript in this entire project is just that one line then it is a little silly...but still good practice at least.

6/3/2009 1:38:49 PM

Ideally, you would use some DOM manipulation (in an external JS file) and an ID on the submit input. That means no JS in your markup.

[Edited on June 3, 2009 at 1:42 PM. Reason : ]

6/3/2009 1:40:17 PM

Still pretty confusing, but I'm getting there.

So far this is the best I've been able to do and it works perfectly except for one detail....it will not pass the email address you enter in to the starting field of the popup window. Perhaps that's some script receiving function in the popup? If so I don't know how to find it.


This is the best solution mish mash so far I've found.

<label for="pin">E-Mail</label>
<input type="text" name="email">
<input onclick="window.open('http://www.eaton-jobs.com/find.job?job=users.doemailcheck&siteid=79&usertype=2&cat=0&email=Email','mywindow','width=685,height=500, left=200,top=100,screenX=200,screenY=100')" type="submit" value="Join">

6/3/2009 1:46:06 PM

You want the email address entered by the user to show up in the email field of the pop-up?

That has to be done in the pop up and you'll need some JS or PHP or some other server-side code to get it to happen.

with PHP:

<label>Email</label> <input type="input" value="<?php echo $_POST['email']; ?>">

...which means you'll need a form using POST/GET.

To get URL parameters using JS is a bit more complicated.

6/3/2009 1:55:54 PM

You need to use the getElementById function to get the email

6/3/2009 1:58:02 PM

if you are using name="email" you can get the value by...

document.formName.elementName.value

formName = the name you gave your form
elementName = email.

so the finished product would be..

document.myForm.email.value

that can be javascript used in the popup to retrieve the email value.

OR as ^ said you can use document.getElementById('email').value but then you would have to give your input element an id='email' rather than name='email'

6/3/2009 2:06:34 PM

Quote :

"you would have to give your input element an id='email' rather than name='email'"

The name and ID attributes can co-exist.

6/3/2009 2:10:19 PM

^yes i know but no point in putting both if you are only going to be using one.

6/3/2009 2:23:15 PM

Oh fuck me, I was thinking of the label tag, not the name attribute. You're completely right. I'm not paying attention to this conversation.

6/3/2009 2:30:44 PM