how to get a form field by clicking on a URL

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
dream2rule
Forum Contributor
Posts: 109
Joined: Wed Jun 13, 2007 5:07 am

how to get a form field by clicking on a URL

Post by dream2rule »

http://i97.photobucket.com/albums/l202/ ... gement.jpg


In the above form, when i click onto add another file link, i want to display a new browse field.
How do i do that?

Can this be done using PHP?

Regards,
Dream2rule

feyd | We don't need a 150K image
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Yes and no.
Yes: It can be done with PHP, but you'll have to reload the page.
No: Because you'll have to reload the page and chances are that's not what you wanted when you wrote this post.

You'll need JavaScript to do that without reloading the page :wink:
dream2rule
Forum Contributor
Posts: 109
Joined: Wed Jun 13, 2007 5:07 am

Post by dream2rule »

ok so how do i go about it using javascript...
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post by Gente »

Put you inputs into some <div> and add the HTML to this container. If you will have problems with this welcome to the Client Side forum :)
dream2rule
Forum Contributor
Posts: 109
Joined: Wed Jun 13, 2007 5:07 am

Post by dream2rule »

i just don't get javascript and ajax.. im a newbie in these areas.. But again i'm here to learn..

so would be glad if anyone can come up with a code to do the same!

Thanks and Regards,
User avatar
miramardesign
Forum Newbie
Posts: 3
Joined: Fri Jun 29, 2007 7:36 pm
Location: Miami and Hollywood FL
Contact:

url button via css

Post by miramardesign »

The easy way is just to make a form button and then style it like it is a regular link via css. Re-color the background , take out the border etc. I don't think you can get it perfect perfect to loook like a link but pretty damn close the only noticable thing I had when I did this is that the url depressed/moved when active because its really a button.
User avatar
martinco
Forum Newbie
Posts: 18
Joined: Mon Jun 25, 2007 10:06 pm
Location: Costa Rica

Post by martinco »

you should have a javascript function that replaces the innerHtml attribute of a div each time the "add" button is pressed.
some thing like this:

Code: Select all

var count = 1;
function addBrowseField(containerDiv) {
          var html = "";
          var i;
          for(i = 0; i < count; i++) {
                    html += '<input type="file" name="file' + i + '">';
          }
          containerDiv.innerHtml = html;
          count++;
}
i don't know if this is the best way, but try it.
i don't know if the fields get reset after calling this function... if this happens, you sould make a backup of the values and then put them in the new inputs.
dream2rule
Forum Contributor
Posts: 109
Joined: Wed Jun 13, 2007 5:07 am

Post by dream2rule »

thanks all.. :)
I got it working!!
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

martinco wrote:i don't know if this is the best way, but try it.
Yeah, the "best way" (or "proper way") is creating the elements and appending them, but the innerHTML property was the only property invented by Microsoft that actually proved useful. :P (ingenious on Microsoft's part, IMO)

It's just a matter of accessing those elements later on.
User avatar
martinco
Forum Newbie
Posts: 18
Joined: Mon Jun 25, 2007 10:06 pm
Location: Costa Rica

Post by martinco »

superdezign wrote:the "best way" (or "proper way") is creating the elements and appending them
i think i understand what you say, but... can you post a script that does that?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

martinco wrote:
superdezign wrote:the "best way" (or "proper way") is creating the elements and appending them
i think i understand what you say, but... can you post a script that does that?

Code: Select all

function addNewField(obj)
{
    if(typeof(obj) != 'Object') obj = document.getElementById(obj);

    var newField = document.createElement('input');
    newField.name = 'file[]';
    newField.type = 'file';

    obj.appendChild(newField);
}
User avatar
martinco
Forum Newbie
Posts: 18
Joined: Mon Jun 25, 2007 10:06 pm
Location: Costa Rica

Post by martinco »

that's just amazing...
i'll have to try that...
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

martinco wrote:that's just amazing...
i'll have to try that...
Heh. JavaScript never ceases to amaze me.
Post Reply