Help with Drop down AJAX email form: AJAX, PHP, Java Script

by: yodercmPosted on 2008-04-19 at 04:36:57ID: 21392001

Can you be more specific? I'm not exactly clear on where this form with the dropdown and email entry boxes will reside.

Are you saying that this form with the dropdown and the email entry boxes is in an email? Or is it on a webpage? Where is the action script that the form triggers?

by: b0lsc0ttPosted on 2008-04-19 at 21:17:01ID: 21394992

If you are just asking about how to add the fields then you can try the script below. It doesn't need AJAX so I have not put it in. Of course you can add other elements to the function to create each "contact" so it looks like you want.

The other options would be to make a string and use innerHTML. Which you choose will usually depend on the html you want to add for each field and your own preference.

Let me know if you have a question or how it helps.

bol

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="/style.css" rel="stylesheet" type="text/css" />
<title>Custom contact page</title>
<script type="text/javascript">
function chkContacts(ele) {
	var div = document.getElementById('contactList');
	div.innerHTML = "";
	for (var i=1; i<=ele; i++) {
		addContact(i, div);
	}
	div.style.display = "";
}
function addContact(num, div) {
	var contact = document.createElement('p');
	var textName = document.createTextNode('Contact #' + num + ' Name: \n');
	var contactName = document.createElement('input');
	contactName.type = 'text';
	contactName.name = 'contactName' + num;
	contactName.id = 'contactName' + num;
	var br = document.createElement('br');
	var textEmail = document.createTextNode('Contact #' + num + ' Email: \n');
	var contactEmail = document.createElement('input');
	contactEmail.type = 'text';
	contactEmail.name = 'contactEmail' + num;
	contactEmail.id = 'contactEmail' + num;
	contact.appendChild(textName);
	contact.appendChild(contactName);
	contact.appendChild(br);
	contact.appendChild(textEmail);
	contact.appendChild(contactEmail);
	div.appendChild(contact);
}
</script>
</head>
 
<body>
<h3>Page for contact info</h3>
 
<br /><br />
<form action="customContacts.asp" method="post" />
Select number of contacts:
<select name="nContacts" onchange="chkContacts(this.value);">
<option value="0">--Choose--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br /><br />
<div id="contactList" style="display: none;"></div>
<br /><br />
<input type="submit" value="Send" />
</form>
 
 
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:

Select all Open in new window

by: InnerChildPosted on 2008-04-24 at 12:39:19ID: 31450310

This was great, just what I needed.

Thanks

by: b0lsc0ttPosted on 2008-04-24 at 21:53:21ID: 21437123

Your welcome! I'm glad I could help. Thanks for the grade, the points and the fun question.

bol

by: InnerChildPosted on 2008-04-28 at 09:10:39ID: 21455275

So I was a little hasty with my closing this questions, the problem I am having is paring the information to the form. All I am getting when the form is submitted is the number of people that are registering but not the actual name and email that are entered. Any ideas?

Thanks,

IC

by: InnerChildPosted on 2008-04-28 at 09:35:45ID: 21455449

And if possible can you show me how to add a radio group?

Thanks, (woth another 100 points if you want).

IC

by: b0lsc0ttPosted on 2008-04-28 at 18:42:46ID: 21458954

InnerChild,

>> the problem I am having is paring the information to the form. <<

It seems like the problem you described is due to the server script you use. This would actually be a new problem and should get a new question. I will be glad to help there too if you want so feel free to post the new question's URL here if you want to make sure I see it. We will need to see the server script you are using to try to get the name and other values. The problem is probably just using the wrong code.

Let us know what server language you use when the form is submitted. If you are getting the value from nContacts then your PHP does know the name(s) to use to get the other info (e.g. contactName1 or contactEmail1). If it is PHP then there can be a better name to use for the form fields (e.g. contactName[] or contactEmail[]). Those names for the fields will make it so PHP automatically creates an array and puts each field (with the same name) in as an item.

This may be all you need to solve that problem yourself but otherwise feel free to open a new question and let me know.

>> And if possible can you show me how to add a radio group? <<

The method I provided can be changed to add that filed too. If you want help with it or specifics then please open a new question. I'll be happy to help with it. :)

You can click on the "ask a related question" link just above the comment box (see image) to quickly ask a new, related question. That will cause an automatic notice to be sent to all participants of the original question (i.e. me). Let me know if you have a question.

bol

by: b0lsc0ttPosted on 2008-04-28 at 18:43:38ID: 21458958

Forgot image ...

Related-question.png
- 11 KB
screenshot of Related Question link

by: InnerChildPosted on 2008-04-29 at 08:10:52ID: 21463008

I have started a new question http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23359587.html

with what I have so far., and I am using a php catchall script to see what is being processed. That script can be found...

http://www.agitprop.org.au/scripts/catchall_mail_php.php

Thanks,

IC

Question

Help with Drop down AJAX email form

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

AJAX, PHP, Java Script

JavaScript

PHP and Databases

Dynamic HTML (DHTML)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press