Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Create X Number Of Forms

This is a discussion on Create X Number Of Forms, within the Javascript section. This forum and the thread "Create X Number Of Forms" are both part of the Frameworks category.

 
 Reply to this topicStart new topic
> Create X Number Of Forms, I can do this with php, but javascript I need some help with
cosmicbdog
post Nov 19 2008, 09:01 AM
Post #1


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
I'm working on a booking form where you can enter in the delivery details of the people you are purchasing the item for.

The idea is I can buy 3 tickets and those 3 tickets get assigned to people. When you select 3 tickets on my booking form you are then presented with 3 lots of inputs for each of those people. Basically just their name and email.

Now I can do something in PHP where say I wanted 3 lots of inputs something like...
CODE
<?php
        for ($i = 1; $i <= 3; $i++) {
            echo '<input type="text" name="email" id="email' . $i . '" />';
        }
        
        ?>


The reason I don't want to do this with php though is because I want it to appear immediately on clicking how many tickets you want. Of course I could put this in a simple ajax file and load it up on the fly, but I think the same could be achieved easier with javascript and basically doing the same thing as above in JS language.

I imagine I would have a js function that is passed with a ticket variable

CODE
function deliver(guests) {

    for ($i = 1; $i <= guests; $i++) {

        var inputstuff = '<input type="text" class="deliveryEmail" name="email'+guestNumber+'" />';

        $j('#formWrapper').prepend(inputstuff);

    }

}


and then


$j('.ticketNumber').click(function(){

    delivery($j(this).attr('value'));

});


As you can see I'm applying similar php looping theory to js which doesn't work like this. But basically am I on the right track? Any pointers? The idea is the above code that on the class 'ticketNumber' is pressed its going to run the function 'delivery()' with the number passed through it. Whatever the number will be the number of fields that appear like magic. biggrin.gif
Go to the top of the page
 
+Quote Post
cosmicbdog
post Nov 19 2008, 10:25 AM
Post #2


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
I think i've cracked it.

CODE
        function delivery(guests) {

            for (i = 1; i <= guests; i++) {
        
                var inputstuff = '<input type="text" class="deliveryEmail" name="email'+i+'" />';
        
                $j('.numberTickets').append(inputstuff);
        
            }
        
        }


I was able to put the trigger to launch that function in another function I already had and its working sweetly.

I am wondering though, say one were to click on '3' and 3 fields came out and the visitor filled them out, but then wanted to put out another field... this function would then append another 3 on top of the 3 that are out there. Ideally it would just add the difference. If 3 out, and 4 is selected, 1 more is appended.

I'm going to have to put my thinking cap on for that! Any pointers would be awesome
Go to the top of the page
 
+Quote Post
cosmicbdog
post Nov 19 2008, 10:28 AM
Post #3


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
Also I'm winding up with a bunch of inputs that get the same number because the function above doesn't check to see what inputs are out already... e.g

CODE
<input class="deliveryEmail" type="text" name="email1"/>
<br/>
<input class="deliveryEmail" type="text" name="email2"/>
<br/>
<input class="deliveryEmail" type="text" name="email3"/>
<br/>
<input class="deliveryEmail" type="text" name="email1"/>
<br/>
<input class="deliveryEmail" type="text" name="email2"/>
<br/>
<input class="deliveryEmail" type="text" name="email1"/>
<br/>
<input class="deliveryEmail" type="text" name="email2"/>


So i've got to work out how to then do that. Perhaps some sort of count function that counts the number of inputs with the class 'deliveryEmail'. I think I've come across that before. Excuse me while I think out loud!

This post has been edited by cosmicbdog: Nov 19 2008, 10:29 AM
Go to the top of the page
 
+Quote Post
cosmicbdog
post Nov 19 2008, 10:41 AM
Post #4


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
Worked out that one doing the followin:
CODE
        function delivery(guests) {

                        // work out how many inputs have been put out already for the start number to base the for loop from            
            var alreadyout = $j('.deliveryEmail').size();
            
                        // add 1 so that the count starts at 1 and not 0
            var alreadyout = parseInt(alreadyout) + 1;

                    
            var max = parseInt(guests);
            

            for (i = alreadyout; i <= max; i++) {
        
                var inputstuff = '<input type="text" class="deliveryEmail" name="email'+i+'" /><br />';
        
        
        
                
                $j('.numberTickets').append(inputstuff);
        
            }
        
        }


Works a treat. Any suggestions to do it better?

This post has been edited by cosmicbdog: Nov 19 2008, 10:42 AM
Go to the top of the page
 
+Quote Post
japh
post Nov 19 2008, 06:04 PM
Post #5


Squeeze Machine
Group Icon

Posts: 510
Joined: 7-October 08
From: Australia
Looks interesting. I'd be interested to see how it would go if instead of name="email2" you had name="email[]". Then when submitted, you should end up with a nice array of emails to iterate through, which would be simpler and easier to manage both from the client-side and the server-side coding points of view.


--------------------
The more you visit, the more I'll post: http://japheththomson.com/
Go to the top of the page
 
+Quote Post
cosmicbdog
post Nov 20 2008, 02:13 AM
Post #6


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
Lol... I was going to ask next... "so say you have 20 email inputs, how do u collate them into one bunch of information?". I'm actually outputting name and email so its 2 field per option.

I got a working example so far up at https://triumphantevents.co.uk/booking.beta...-sme&beta=1 which if you click on an event and ticket option then u can select the number. I've seen this naming of variables as an array before but not used it myself.
Go to the top of the page
 
+Quote Post
cosmicbdog
post Nov 20 2008, 07:01 AM
Post #7


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
Its a lot easier than i thought it was
Go to the top of the page
 
+Quote Post
« Next Oldest · Javascript · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No new   16 Vanessa 408 27th February 2008 - 11:09 AM
Last post by: karinne
No New Posts   1 Jason 113 11th March 2008 - 10:16 AM
Last post by: Rakuli
No New Posts   3 velo 205 17th March 2008 - 01:10 PM
Last post by: velo
No New Posts   8 JustinStudios 347 29th March 2008 - 10:29 PM
Last post by: JustinStudios
No New Posts   5 c010depunkk 190 6th April 2008 - 06:15 AM
Last post by: Simon