Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change Textbox to Combo 1

Status
Not open for further replies.
ZOR

ZOR

Technical User
Jan 30, 2002
2,963
GB
There is a FAQ "Getting Mail to Links" on this forum. It covers "How do I email the contents of a form"
I have tried over and over again to replace a textbox on the sample.html form to a Combo Box. Each time it throws up errors. Anyone clever tell me how to do it!! Thanks
 
Sort by date Sort by votes
This is the line I am trying to insert a combo box in the above FAQ

<tr>
<td class="DescriptorCell">Module Location:</td>
<td class="ContentCell"><input type="text" size="100" id="ModuleLocation"></input></td>
</tr>

Also, in the Function thats with the FAQ, there is an email formatting type part. Can I put any IF THEN loops around data to exclude sending in the email if the value is empty/null or whatever. That code is:

document.ProxyForm.MessageBody.value = "\n\n" + "-= Start of Message =-" + "\n\n"
+ "Reuseable Code Library Submission" + "\n\n"
+ "Time received: " + CurrentDate + "\n\n"
+ "Function Name: " + FunctionName + "\n\n"
+ "Module Name: " + ModuleName + "\n\n"
+ "Module Location: " + ModuleLocation + "\n\n"
+ "Function Description: " + FunctionDescription + "\n\n"
+ "Function Parameters: " + FunctionParameters + "\n\n"
+ "Function Example Call: " + FunctionExample + "\n\n"
+ "Submitted by: " + ProgrammerName + "\n\n" + "-= End of Message =-";
return true;
}
 
Upvote 0 Downvote
The example seems to work for me. Below I have integrated both the .js file and .html file into one since I made some changes to both. I added some crude error handling on the form, just checking that any value is entered into any field. I also added a combo box (select list) to the form.

It's pretty self explanitory if you want to modify the form in any way you want. Just change the target email address (target@email.com), in both places, to whatever you want.

Just copy and save the code below as 'something.html'
-------------------------------------
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns=" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<title>Send Out The Data</title>

<script type="text/javascript">
function update_message_body()
// This function composes an e-mail message using the contents of
// another form on the same page.
{
var Name = document.SubmissionForm.name.value;
var Address = document.SubmissionForm.address.value;
var City = document.SubmissionForm.city.value;
var State = document.SubmissionForm.state.value;
var Zip = document.SubmissionForm.zip.value;
var Phone = document.SubmissionForm.phone.value;
var Email = document.SubmissionForm.email.value;
var CurrentDate = new Date();

document.ProxyForm.MessageBody.value = "\n\n" + "-= Start of Message =-" + "\n\n"
+ "User Information Submission" + "\n\n"
+ "Time received: " + CurrentDate + "\n\n"
+ "Name: " + Name + "\n\n"
+ "Address: " + Address + "\n\n"
+ "City: " + City + "\n\n"
+ "State: " + State + "\n\n"
+ "Zip: " + Zip + "\n\n"
+ "Phone: " + Phone + "\n\n"
+ "Email: " + Email + "\n\n" + "-= End of Message =-";
return true;
}


function chkForm() {
var nameVal = document.getElementById('name').value;
var addressVal = document.getElementById('address').value
var cityVal = document.getElementById('city').value
var stateVal = document.getElementById('state').value
var zipVal = document.getElementById('zip').value
var phoneVal = document.getElementById('phone').value
var emailVal = document.getElementById('email').value

if((nameVal=='')||(addressVal=='')||(cityVal=='')||(stateVal==-1)||(zipVal=='')||(phoneVal=='')||(emailVal=='')){
alert('All fields required.');
return false;
} else {
update_message_body();
}
}
</script>
</head>
<body>
<h3>Submissions Form</h3>
<form name="SubmissionForm" action="mailto:target@email.com" enctype="multipart/form-data" onSubmit="return chkForm();">
<table class="Fatscope">
<tr>
<td class="DescriptorCell">Name:</td>
<td class="ContentCell"><input type="text" size="100" id="name"></input></td>
</tr>
<tr>
<td class="DescriptorCell">Address:</td>
<td class="ContentCell"><input type="text" size="100" id="address"></input></td>
</tr>
<tr>
<td class="DescriptorCell">City:</td>
<td class="ContentCell"><input type="text" size="100" id="city"></input></td>
</tr>
<tr>
<td class="DescriptorCell">State:</td>
<td class="ContentCell">
<select id='state'>
<option value="-1">-- Select --</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VA">Virginia</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
</select>
</td>
</tr>
<tr>
<td class="DescriptorCell">Zip:</td>
<td class="ContentCell"><input type="text" size="100" id="zip"></input></td>
</tr>
<tr>
<td class="DescriptorCell">Phone:</td>
<td class="ContentCell"><input type="text" size="100" id="phone"></input></td>
</tr>
<tr>
<td class="DescriptorCell">Email:</td>
<td class="ContentCell"><input type="text" size="100" id="email"></input></td>
</tr>
</table>
<p class="CenteredContent"><input type="reset" value="Clear All Entries"></input></p>
</form>

<form name="ProxyForm" enctype="text/plain" method="post" action ="mailto:target@email.com?subject=Reuseable Code Library Submission" onsubmit="return chkForm();">
<p class="CenteredContent"><input type="submit" value="Submit New Function"></input></p>
<input type="hidden" id="MessageBody" name="MessageBody"></input>
</form>
</body>
</html>
-------------------------------------

Regards,
Shu
 
Upvote 0 Downvote
Thanks VERY much Shu. Excellent, I can adapt it for what I am wanting. Thanks for all the effort, have a star. Best Regards
 
Upvote 0 Downvote
Shu, I don't know if you are around. I tried adding another column, and converted all the text inputs to combos. I was trying to get a form with:

Part Number ! Description ! Quantity

However before modifying it, it looked good in IE and Firefox. But after changing it, the table cell heights doubled in Firefox. I stripped out all my changes, and it's still the same. As the page is code generated, is one allowed to go into design and change the table structure?? Any comments welcomed. Regards
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
849
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
915
pmonett
pmonett
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top