Link to home
Start Free TrialLog in
Avatar of cbeaudry1
cbeaudry1

asked on

Sending multiple records in a form by email

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.
ASKER CERTIFIED SOLUTION
Avatar of netsmithcentral
netsmithcentral
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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>
Avatar of cbeaudry1
cbeaudry1

ASKER

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.
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.
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>
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>
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.