We help IT Professionals succeed at work.

Sending multiple records in a form by email

cbeaudry1
cbeaudry1 asked
on
335 Views
Last Modified: 2013-11-19
I need to create a form that will send multiple entries to two email addresses when a user requests a quote. Basically, the form has two sections: The first is for the company owner. He/she muct be able to list multiple stores in the form with store number, addresses, etc.
The second section needs to have the user enter all employee names, addresses, etc. to the form.

Ideally, the user should be able to enter the information for each store or user and then have the choice to "Add Another" while still retaining the value of the previous entry in the form before sending the whole thing off.

I've searched on ways to do this using Javascript but cannot locate something that will let me add another record and still list the previously entered values.
Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Sorry, accidentally submitted.

<html>
<head>
<script type="text/javascript">
<!--
var storeCnt = 1;

function newStore(){
    var stores = document.getElementById('stores');

    var newStore = document.createElement('DIV');
    newStore.id = 'store_'+storeCnt++;

    var sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'storeName_'+storeCnt;
    newStore.appendChild(document.createTextNode('Store Name: '));
    newStore.appendChild(sElem);

    sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'storeAddress_'+storeCnt;
    newStore.appendChild(document.createTextNode('Store Addresss: '));
    newStore.appendChild(sElem);

    sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'storeNumber_'+storeCnt;
    newStore.appendChild(document.createTextNode('Store Number: '));
    newStore.appendChild(sElem);

    stores.appendChild(newStore);
}
</script>
</head>
<body>
<form name="storesForm">
<div id="stores">
<div id="store_1">Store Name: <input type="text" name="storeName_1"> Store Addresss: <input type="text" name="storeName_2"> Store Number: <input type="text" name="storeName_2"></div>
</div>
<a href="javascript: newStore();">Add Another Store...</a>
<br><input type="submit" value="Submit!">
</form>
</body>
</html>

Author

Commented:
Great! Let me build the form to include everything and test it out and I'll post back later. As all values are being passed in the URL when submitting, it could present a problem since the max number of characters in a URL is around 2000. If an owner has 3 stores with 10 employees each, this could make the URL unworkable.

I'm not sure if ultimately this would have to be a self-refreshing page that stores session variables for all the info.

Ultimately, everything will have to be sent through email but I'll cross that bridge when I get to it. First things first is to see if the data is being sent properly.
"Ultimately, everything will have to be sent through email but I'll cross that bridge when I get to it."

No you should think about that bridge first -- and when you do, you will realize that PHP has the best, simplest and most robust emailing module that will do exactly what you want.  Therefore, you should also be using PHP to generate the form to get the user input -- it will not only simpify everything you are trying to do, but the handling of the variables is automatic in PHP from the page request when submitted.  If you want to do this right, reask this question in the PHP section, if the people are still there, you will get an answer.

Author

Commented:
Unfortunately, the client has Windows/IIS/ASP configuration and I don't have PHP at my disposal (though I wish I did...)

I get the feeling that I will have to create the values, send them to a "confirmation" page using variables and ultimately build those into an email to be shot off.

Author

Commented:
I've got the basic form going but need to add table elements so the formatting looks like what is shown below. I have two sections where new data can be added but need to figure out how the table formatting works into the javascript. I know I can add table tags but have to close those tags sometimes and also have to plan around with colspan quite a bit:

<p><strong>Restaurants</strong>
            <div id="stores">
<div id="store_1">
  <table width="677" border="0" cellpadding="1" cellspacing="1" class="font">
    <tr>
      <td colspan="2">Restaurant Number/Num&eacute;ro du Restaurant: </td>
      <td width="120"><input name="stno_22" type="text" class="font"></td>
      <td width="322">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2" valign="top">Restaurant Address/Adresse du Restaurant:</td>
      <td colspan="2" valign="top"><textarea name="stad_2" cols="60" rows="4" class="font"></textarea></td>
      </tr>
    <tr>
      <td width="99">Phone/T&eacute;l&eacute;phone: </td>
      <td width="123"><input name="sttel_2" type="text" class="font"></td>
      <td>Store Fax/T&eacute;l&eacute;copieur:</td>
      <td><input name="stfax_2" type="text" class="font"></td>
    </tr>
    <tr>
      <td colspan="2">Best time to call / Meilleur temps pour appeler:</td>
      <td colspan="2"><input name="sttime_2" type="text" class="font" size="60"></td>
      </tr>
  </table>
  </div>
</div>
<div align="center"><a href="javascript: newStore();"><br>
    <strong>Add Another Restaurant/Ajouter Un Restaurant</strong></a><strong><br>
 
    </strong></div>
<p><strong>Employees/Employ&eacute;s</strong>
<div id="Emp">
<div id="Emp_1">
  <table width="677" border="0" cellpadding="1" cellspacing="1" class="font">
    <tr>
      <td width="87">Last Name/Nom:</td>
      <td><input name="eln_2" type="text" class="font"></td>
      <td>First Name/Pr&eacute;nom:        </td>
      <td colspan="2"><input name="efn_2" type="text" class="font"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Sex/Sexe:</td>
      <td width="122"><input name="es_2" type="text" class="font"></td>
      <td width="99">Age:</td>
      <td width="128"><input name="ea_2" type="text" class="font"></td>
      <td width="89">Province: </td>
      <td width="133"><input name="ep_2" type="text" class="font"></td>
    </tr>
    <tr>
      <td>Salary/Salaire:</td>
      <td><input name="esal_2" type="text" class="font"></td>
      <td>Hours/Heures:</td>
      <td><input name="eh_2" type="text" class="font"></td>
      <td>Job/Occupation:</td>
      <td><input name="eo_2" type="text" class="font"></td>
    </tr>
    <tr>
      <td colspan="3">Type of requested coverage / Type de couverture demand&eacute;e: </td>
      <td><input name="ec_2" type="text" class="font"></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
</div>

Author

Commented:
Here's is the Javascript so far. Just guidance on how to add the table elemetns would be great, not necessarily doing the whole code:

<script type="text/javascript">

var storeCnt = 1;

function newStore(){
    var stores = document.getElementById('stores');

    var newStore = document.createElement('DIV');
    newStore.id = 'store_'+storeCnt++;

    var sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'stno_'+storeCnt;
    newStore.appendChild(document.createTextNode('Store Number: '));
    newStore.appendChild(sElem);

    sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'stad_'+storeCnt;
    newStore.appendChild(document.createTextNode('\nStore Address: '));
    newStore.appendChild(sElem);

    sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'sttel_'+storeCnt;
    newStore.appendChild(document.createTextNode('\nStore Phone: '));
    newStore.appendChild(sElem);
      
      sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'stfax_'+storeCnt;
    newStore.appendChild(document.createTextNode('\nStore Fax: '));
    newStore.appendChild(sElem);
      
      sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'sttime_'+storeCnt;
    newStore.appendChild(document.createTextNode('\nBest Time to Call: '));
    newStore.appendChild(sElem);

    stores.appendChild(newStore);
}

var EmpCnt = 1;

function newEmp(){
    var Emp = document.getElementById('Emp');

    var newEmp = document.createElement('DIV');
    newEmp.id = 'Emp_'+EmpCnt++;

    var sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'eln_'+EmpCnt;
    newEmp.appendChild(document.createTextNode('Last Name: '));
    newEmp.appendChild(sElem);

    sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'efn_'+EmpCnt;
    newEmp.appendChild(document.createTextNode(' First Name: '));
    newEmp.appendChild(sElem);

    sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'es_'+EmpCnt;
    newEmp.appendChild(document.createTextNode(' Sex: '));
    newEmp.appendChild(sElem);
      
      sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'ea_'+EmpCnt;
    newEmp.appendChild(document.createTextNode(' Age: '));
    newEmp.appendChild(sElem);
      
      sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'ep_'+EmpCnt;
    newEmp.appendChild(document.createTextNode(' Province: '));
    newEmp.appendChild(sElem);
      
      sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'esal_'+EmpCnt;
    newEmp.appendChild(document.createTextNode(' Salary: '));
    newEmp.appendChild(sElem);
      
      sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'eh_'+EmpCnt;
    newEmp.appendChild(document.createTextNode(' Hours: '));
    newEmp.appendChild(sElem);
      
      sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'eo_'+EmpCnt;
    newEmp.appendChild(document.createTextNode(' Job: '));
    newEmp.appendChild(sElem);
      
      sElem = document.createElement('INPUT');
    sElem.type = 'text';
    sElem.name = 'ec_'+EmpCnt;
    newEmp.appendChild(document.createTextNode(' Coverage: '));
    newEmp.appendChild(sElem);

    Emp.appendChild(newEmp);
}


</script>
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
After discussing this with the client we decided to scrap it and go the database route. Points alloted according to what I was looking for.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.