homepage Welcome to WebmasterWorld Guest from 54.198.148.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript to add fields to form and then some
smatts9




msg:4189799
 2:24 pm on Aug 20, 2010 (gmt 0)

I am at a complete loss here. I need a form where users can select from a drop down box a certain location and then next to the drop down box is a text field where they can enter information about the location. But, under the text field I want "add another field" option where they can add another field and enter another piece of info for the certain location. Then on top of all of that I want under all of that "add another location".

Location 1------------- text field 1.1
----------------------- text field 1.2
----------------------- [add another field]
Location 2------------- text field 2.1
----------------------- text field 2.2
----------------------- text field 2.3
----------------------- [add another field]
[Add another location]

I hope this makes sense. I've been trying everything I come across on the web but I can't seem to get anything to work. Any help would be appreciated, thank you.

 

alias




msg:4190842
 10:41 am on Aug 23, 2010 (gmt 0)

That is actually fairly simple.

Create the HTML with a basic section for a location, with a dropdown, a text input and a button to add another text field.

Bind an event to that button, that would append a clone of the text field to that section.

And add a button after the section, that would clone the section and itsert it after the last existing section.

If you go the jQuery way, you could do it fairly quickly.

Don't forget to use the names like name="somename[]" in the HTML inputs, so the form can be processed properly in the backend.

smatts9




msg:4191232
 2:03 am on Aug 24, 2010 (gmt 0)

What jQuery functions would you use to get this done?

alias




msg:4191340
 9:21 am on Aug 24, 2010 (gmt 0)

A simple working example for a section like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
$(".add-input").live('click',function(){
button = $(this);
section = button.parents('.section:first');
titleInput = section.find('input.title:first').clone();
button.before( titleInput.val('') );
});
$(".add-section").live('click',function(){
button = $(this);
section = $('.section:first').clone();
$(':input',section).each(function(){ this.value = this.defaultValue; });
button.before( section );
});
});
</script>
<p class='section'>
<label>Hello!</label>
<select class='location'><option>I'm a dummy!</option><option>I'm a dummy!</option></select>
<input type='text' name='title[]' class='title' />
<button class='add-input'>Add an input</button>
</p>
<button class='add-section'>Add a section</button>


As you can see, one of the main jQuery functions in my example are the clone() function, take a look at it in their documentation.

I hope the rest of the code makes sense.

Of course, this is only a sample, it might need a lot of customization to be used in production.

Hope it helps.

smatts9




msg:4191388
 12:01 pm on Aug 24, 2010 (gmt 0)

Edit: never mind figured it out. Thanks again.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved