Recently asked on Yahoo! Answers:

JavaScript Submit form?

Ok, I know of the function…

function submitform() {document.myform.submit();}

however, for this to work, I have to name my forms, also, if I want to use it multiple times on the same page, each funtion name must be unique.

Is there a way to replace a submit button with javascript without having to uniquely name each function, or name my forms? I’m just looking for a link replacement for the submit button. So, a submit button just sits at the end of the form and submits it’s data, can I just replace it with a link, no extra stuff except one function at the top of the screen?

Also, the form’s method is POST, not GET. Also, the action is $PHP_SELF; though, if you give me an ideal answer, the JavaScript won’t even worry about the action.

This is something I don’t see as often as I’d like: A question about how something works, and a question with a practical application.

In other words, the user wants to solve a particular problem, but the question is posed in a way that its answer can reveal a great deal about how the Document Object Model (DOM) works. And understanding how things work makes programming far easier, believe me.

I began answering the direct question of how to submit an unnamed form with JavaScript, but then decided that, because opportunities like this are so rare, I’d seize upon it and launch a full dissertation here.

Before we begin, I’m going to be tossing around some terms about how classes / objects work. If you’re new to programming, or at least object-oriented programming, and aren’t familiar with terms such as “property,” “method,” “event” or “namespace,” you’ll want to check out my earlier entry, titled “Objects (Classes) Explained In Very Simple Terms.”

Read the rest of this entry »

So you’ve written your first AJAX program, tested it, and it seems to work. Except sometimes, when your “helper script” is supposed to return some data from your database, you get this error:

Unterminated string literal

What gives? Basically, you’ve run into a quote mark in your data — and because it doesn’t know any better, JavaScript thinks you mean for it to end a string.

Of course, that’s not what you meant. As a result, you have more text appearing after what JavaScript considers the end of a string.

And when JavaScript sees that extra text, it wants it to start and end with quotes. Since, as far as JavaScript is concerned, that extra text isn’t fully enclosed in quotes, it’s unterminated — thus, an “unterminated string literal.”

Let’s look at this more closely, and see how simple it is to clear up.

Read the rest of this entry »

Recently asked in Yahoo! Answers:

Clickable text to edit? Javascript?
So I saw somewhere on this website that they had rows of DYNAMIC data that when you clicked on the actual text (onfocus), the text would turn into a editable text field containing the text, and then when you clicked off of it (onblur?), AJAX was used to update the database that the data came from with that new changed value. I believe it was used to edit categories on the fly.

How do I do this? I can figure out the AJAX/PHP/Mysql part, but I really suck at javascript. I just need to be able to have some text turn into a text field when clicked that contains that text for editing. I’m sure you understand.

Thanks so much.

This is actually pretty straightforward. Basically, you do it with two DIVs: one contains the text you want to make editable, the other contains a textarea that will edit the text. Clicking on the text DIV makes the edit DIV visible; submitting the edits changes the text and hides the edit form.

But, like all things that seem simple, there are a couple of small adjustments we need to make to ensure our solution both works as intended and is safe from HTML injection.

Let’s get to it. As always, a working demo / code you can download appears at the end of this entry.

Read the rest of this entry »

Recently asked on Yahoo! Answers:

Showing a Larger picture from a Thumbnail - How to include the Title?
I have followed the steps from http://www.dougv.com/blog/2007/02/07/sho…
using the iFrame version, but cannot get the image on click to display the title used in the img tag.

i.e <img src=”images/image_02_tn.jpg” alt=”image_02.jpg” title=”image name” />

Using the Addendum: information posted the title that gets displayed is ‘image_02.jpg’ when I want ‘Image Name’ to be displayed.

Anyone know the best way to do this?

A few changes to the original script take care of this request quite handily, and it also allows me the opportunity to make some improvements to the original script:

• Modern Web browsers support the onclick event for any DOM element, so there’s no need to assign the onclick event to a hyperlink; we can add it directly to the thumbnails.
• We should preload the full-size images so that there isn’t a significant delay between when the thumbnails have been clicked and the full-size image shows.
• To allow the script to pull images from any location, I’ve removed the part of the script that sets a path and concatenates the relevant image to that path.

Let’s get to it. As always, I will have a working demo and code you can download at the end of this entry.

Read the rest of this entry »

Recently asked on Yahoo! Answers:

Divide photo in 5,000 pieces with rollover text?
we are raising money and selling support tickets. To show our progress we are going to start with a black and white image split in 5,000 pieces then as each piece is sold we want to turn it into color.

When you roll over each piece the person who purchased that support ticket will have their name show up as well as a personal message.

any opinions on how this should be built? The admin section will all be managed manually, so we’ll just need a backend for the admin person to go in and make the changes manually.

This seemed an interesting challenge to me; not difficult, but with multiple steps that no beginner could hope to properly tackle on his own without some help.

This project calls on almost all the basic skills a competent Web developer should possess: Image editing; database design and simple queries; DOM manipulation; security and back-end systems, and therefore, it gives me my first real opportunity in quite some time to address a project in full scope.

As always, I’ll have a link to a working demo and code you can download at the end of this entry.

Read the rest of this entry »