• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 170
  • Last Modified:

Adding textboxes dynamically as needed

I want users to start with one textbox and then add additional ones as needed.... this will be used on one scenario for email addresses and another for license keys as an example of usage.

So they add their first email address, with validation. Then below it is a link:
+ Add Another Email Address

Then finally the [Submit] button.

On press of the Add Another Email address, another box appears and so forth until they have all they need.

I have searched the internet and only found one bit of source code on it. It's close, but has some problems and is klunky.
<link to competing site deleted by COBOLdinosaur, Topic Advisor>

I also found this, but it's not pretty:
http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/

I want it to say:
Email Address: [textbox]
[with validation]

Does anyone have any better suggestions for how to do this and how to read back the data on Submit? I don't care if it's asp.net or javascript as long as it's instant and works well. And I can create it and retrieve the results easily.

thanks!
0
Starr Duskk
Asked:
Starr Duskk
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Let me know if the following code need to be documented : http://jsfiddle.net/QxUwy/

window.onload = function() {

    document.getElementById("add_email").onclick = function() {

        var email = document.createElement("input");
        email.type = "email"; // or text
        email.name = "email";

        var linebrk = document.createElement("br");

        var emails = document.getElementById("emails");
        emails.appendChild(email);
        emails.appendChild(linebrk);
        return false;
    }
    
    document.getElementById("myform").onsubmit = function() {
        var emails =  document.getElementsByName("email");
        var number_of_emails = emails.length;
        var all_emails_valid = true;
        for(var i=0;i<number_of_emails;i++) {
            var currentEmail = emails[i];
            current_is_valid = validateEmail(currentEmail.value);
            all_emails_valid = all_emails_valid && current_is_valid;
        }
        if(!all_emails_valid) alert("one of the email is not valid!");
        return all_emails_valid;
    }
}

function validateEmail(value) {
 return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
}

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Leakim,

That looks interesting, but I don't know how to retrieve it server side so I can save the values. Do you know how?

thanks.
0
 
leakim971PluritechnicianCommented:
Like this :
string[] emails = Request["email"].Split(',');

Open in new window

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now