Solved

Adding textboxes dynamically as needed

Posted on 2013-10-31
4
139 Views
Last Modified: 2013-11-07
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
Comment
Question by:BobCSD
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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
 
LVL 1

Author Comment

by:BobCSD
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Like this :
string[] emails = Request["email"].Split(',');

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now