HTML Help Forum

form submit converted to excel file

Discuss any HTML troubles including forms, tables, and frames.

form submit converted to excel file

Postby awp0707 » Fri Feb 24, 2012 5:23 pm

Hello everyone. I am working on a registration page, but the problem is that I am new to html forms and html in general. My goal is to get it to take the input from the user and convert it to an excel spreadsheet or maybe even just a table of some sort. Is that possible? Here is my code. It probably looks kind of ugly. Thank you.
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript">
/*   Set the counter that will increase every time
   the user adds a new language*/
var counter = 0;
function addstudent()
{
   // Ask the user for input
   var student = prompt("Student Name","");
   if (student == "" || student == null)
   {
      alert("Please enter a name.");
   }
   else
   {
      counter++;
      // Find the element to be copied
      var newNode = document.getElementById('readnode').cloneNode(true);
      newNode.id = '';
      newNode.style.display = 'block';
      var newField = newNode.childNodes;
      // Give all fields a unique value
      for (var i=0;i<newField.length;i++)
      {
         var theName = newField[i].name;
         var theId = newField[i].id;
         if (theName)
         {
            newField[i].name = theName + counter;
         }
         if (theId == "studentname")
         {
            // Change the field to the user input
            newField[i].innerHTML = student;
         }
         if (theName == "studenthidden")
         {
            // Replace the hidden field with the correct language
            newField[i].value = student;
         }
      }
      // Insert the elements
      var insertHere = document.getElementById('writenode');
      insertHere.parentNode.insertBefore(newNode,insertHere);
   }
}
</script>
<head>
<div id="bv_Text1" style="margin:0;padding:0;position:width:691px;height:102px;text-align:center;z-index:0;">
<font style="font-size:43px" color="#800080" face="Arial"><b>McKendree University Model U.N. <br>
Spring 2012 Registration</b></font></div>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>McKendree Model UN Registration</title>
<style type="text/css">
body
{
   background-color: #FFFFFF;
   color: #000000;
}
</style>
<style type="text/css">
a:hover
{
   color: #90F518;
}
</style>
</head>
<body>
<br>
<br>
If you are using Internet Explorer, please permit the script to run on the page. <br>
To do this, click allow on the bar that comes up on either the top or bottom of the page.
<br>
<hr>
<form method="post" action="mailto:awp0707@yahoo.com">
<strong>Sponsor Information</strong> <br>
<label for="sponsorname">Name (First and Last):</label>
<input type=text name="sponsorname" /><br>
<label for="sponsoremail">E-mail:</label> 
<input type=text name="sponsoremail" /><br>
<label for="schoolname">School:</label>
<input type=text name="schoolname" /><br>
<hr>
<strong>Student Registration</strong> <br> <br>
<span id="writenode"></span>
<input type="button" value="Add student" onClick="addstudent()" >
<input type="hidden" name="counter" value="counter" />
<input type="submit" value="Submit" >
</form>
<hr />
<div id="readnode" style="display: none">
   <strong id="studentname" name="studentname"></strong>
   &nbsp
   <input type="hidden" name="studenthidden" value="studenthidden" />
   <select name="grade">
      <option disabled="disabled" selected="selected">Grade</option>
      <option value="3">9</option>
      <option value="2">10</option>
      <option value="1">11</option>
      <option value="0">12</option>
   </select>
   &nbsp
   <select name="Committee">
      <option disabled="disabled" selected="selected">Committee</option>
      <option value="7">1st Political</option>
      <option value="6">3rd Social</option>
      <option value="5">6th Legal</option>
      <option value="4">Special Political</option>
      <option value="3">Economic and Social</option>
      <option value="2">Science and Technology</option>
      <option value="1">Security Council</option>
      <option value="0">General Assembly</option>
   </select>
   &nbsp Country
   <input type="text" name="country">
   &nbsp
   Resolution (.doc/.docx format please)
   <input type="file" id="Resolution Upload" style="width:215px;height:25px;font-family:Courier New;font-size:13px;z-index:0" name="FileUpload1">
   
   <input type="button" value="X"
      onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />

</div>
</body>
</html>
awp0707
 
Posts: 5
Joined: Fri Feb 24, 2012 5:16 pm

Re: form submit converted to excel file

Postby awp0707 » Fri Feb 24, 2012 11:05 pm

I tried to fix some of the html code based on the W3C Validator. Sorry I didn't do this before. Like I said, I'm new to html, so I wasn't sure exactly how to fix the problems, but I just played around with it until it was working. So here is the "better" code. Also, I'm going to specify a little bit more about my problem. My form was initially set up to "mailto:myemailaddress", but I didn't like how the submit button caused a permissions window to pop up. My next problem was the way that it sent the email, in code that wasn't very easily put into a spreadsheet. I guess that what I really want is either a way for the form to send an email with the information in a neat organization, or (preferably) a script or something that would take the submitted information and put it into a spreadsheet. Thanks again.

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<script type="text/javascript">
/*   Set the counter that will increase every time
   the user adds a new language*/
var counter = 0;
function addstudent()
{
   // Ask the user for input
   var student = prompt("Student Name","");
   if (student == "" || student == null)
   {
      alert("Please enter a name.");
   }
   else
   {
      counter++;
      // Find the element to be copied
      var newNode = document.getElementById('readnode').cloneNode(true);
      newNode.id = '';
      newNode.style.display = 'block';
      var newField = newNode.childNodes;
      // Give all fields a unique value
      for (var i=0;i<newField.length;i++)
      {
         var theName = newField[i].name;
         var theId = newField[i].id;
         if (theName)
         {
            newField[i].name = theName + counter;
         }
         if (theId == "studentname")
         {
            // Change the field to the user input
            newField[i].innerHTML = student;
         }
         if (theName == "studenthidden")
         {
            // Replace the hidden field with the correct language
            newField[i].value = student;
         }
      }
      // Insert the elements
      var insertHere = document.getElementById('writenode');
      insertHere.parentNode.insertBefore(newNode,insertHere);
   }
}
</script>
<div id="bv_Text1" style="margin:0;padding:0;position:width:691px;height:102px;text-align:center;z-index:0;"
<font style="font-size:43px" color="#800080" face="Arial"><b>McKendree University Model U.N. <br>
Spring 2012 Registration</b></font></div>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>McKendree Model UN Registration</title>
<style type="text/css">
//body
{
   background-color: #FFFFFF;
   color: #000000;
}
</style>
<style type="text/css">
a:hover
{
   color: #90F518;
}
</style>
</head>
<body>
<br>
<br>
If you are using Internet Explorer, please permit the script to run on the page. <br>
To do this, click allow on the bar that comes up on either the top or bottom of the page.
<br>
<hr>
<form method="post" action="mailto:awp0707@yahoo.com">
<strong>Sponsor Information</strong> <br>
<label for="sponsorname">Name (First and Last):</label>
<input type=text id="sponsorname" name="sponsorname" /><br>
<label for="sponsoremail">E-mail:</label> 
<input type=text id="sponsoremail" name="sponsoremail" /><br>
<label for="schoolname">School:</label>
<input type=text id="schoolname" name="schoolname" /><br>
<hr>
<strong>Student Registration</strong> <br> <br>
<span id="writenode"></span>
<input type="button" value="Add student" onClick="addstudent()" >
<input type="hidden" name="counter" value="counter" />
<input type="submit" value="Submit" >
</form>
<hr />
<div id="readnode" style="display: none">
   <strong id="studentname"></strong>
   &nbsp
   <input type="hidden" name="studenthidden" value="studenthidden" />
   <select name="grade">
      <option disabled="disabled" selected="selected">Grade</option>
      <option value="3">9</option>
      <option value="2">10</option>
      <option value="1">11</option>
      <option value="0">12</option>
   </select>
   &nbsp
   <select name="Committee">
      <option disabled="disabled" selected="selected">Committee</option>
      <option value="7">1st Political</option>
      <option value="6">3rd Social</option>
      <option value="5">6th Legal</option>
      <option value="4">Special Political</option>
      <option value="3">Economic and Social</option>
      <option value="2">Science and Technology</option>
      <option value="1">Security Council</option>
      <option value="0">General Assembly</option>
   </select>
   &nbsp Country
   <input type="text" name="country">
   &nbsp
   Resolution (.doc/.docx format please)
   <input type="file" id="ResolutionUpload" style="width:215px;height:25px;font-family:Courier New;font-size:13px;z-index:0" name="FileUpload1">
   
   <input type="button" value="X"
      onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />

</div>
</body>
</html>
awp0707
 
Posts: 5
Joined: Fri Feb 24, 2012 5:16 pm

Re: form submit converted to excel file

Postby faino » Sat Feb 25, 2012 1:34 pm

You need the use of a side-server language like PHP to properly handle the data. JavaScript just doesn't have the capabilities to parse e-mail data.
faino
 
Posts: 733
Joined: Wed Dec 08, 2010 6:15 pm
Location: Michigan

Re: form submit converted to excel file

Postby awp0707 » Sat Feb 25, 2012 2:15 pm

Thank you for the reply. If I'm going to need the use of PHP scripting, I have a few questions. First, what would I need to put in the "action=" part of the <form> tag? Secondly, do you have any suggestions about how I should go about making a script that could take the input from the form and transfer it to another file? Is there possibly an open-source option that I am not aware of? Thanks again.
awp0707
 
Posts: 5
Joined: Fri Feb 24, 2012 5:16 pm

Re: form submit converted to excel file

Postby faino » Sat Feb 25, 2012 6:38 pm

Well, you can create an Excel file though PHP, however that can may be a little over your head... for now, just create a 'process.php' file to handle your form. There is a bit to your form; you would need to make sure you pass the counter variable, then loop through the counter, grabbing the appropriate data from the given field.
Code: Select all
$main_array=array();
for($i=0;$i<count($counter);$i++) {
   $current=$counter[$i];
   $grade=$_REQUEST['grade'.$current];
   $commitee=$_REQUEST['Committee'.$current];
   // Etc...
   // Here would be the place to handle the file upload
   $content_array=array($grade,$commitee,/* Other variables here */);
   $array[$i]=$content_array;
}

Here are some links to get you started:

Creating Excel files from PHP
Log in or Register to see link

Uploading files with PHP
Log in or Register to see link

Using the for loop with PHP
Log in or Register to see link

I hope that gives you a better idea.
faino
 
Posts: 733
Joined: Wed Dec 08, 2010 6:15 pm
Location: Michigan

Re: form submit converted to excel file

Postby awp0707 » Sat Feb 25, 2012 10:03 pm

Thank you, faino. Using this idea for a php script, would I have to make my html <form> tag's action=process.php? Also, the output would be an array with the user's input in it, in order? Thanks a lot!
awp0707
 
Posts: 5
Joined: Fri Feb 24, 2012 5:16 pm

Re: form submit converted to excel file

Postby awp0707 » Sun Feb 26, 2012 3:19 pm

Nevermind. I figured it out. Thank you for all your help. I think that I'll be able to get this working. THANKS.
awp0707
 
Posts: 5
Joined: Fri Feb 24, 2012 5:16 pm

Re: form submit converted to excel file

Postby faino » Sun Feb 26, 2012 9:14 pm

Yes, it would be your action that would tell the form to send the data to said file. Also, you can access the data like so:
Code: Select all
$grade=$array[0][0];
$committee =$array[0][1];

PHP arrays are built of 0 and go up from there, so $array[0] would be the first array, then the second selector would be the number of the internal array, so $array[0][1] would be the first student's array, then calling the second item of said array.
faino
 
Posts: 733
Joined: Wed Dec 08, 2010 6:15 pm
Location: Michigan

Re: form submit converted to excel file

Postby fitnessfactor21 » Fri Mar 02, 2012 12:27 pm

thanks for the information. I found it very useful and easy to follow.





Log in or Register to see link
fitnessfactor21
 
Posts: 1
Joined: Fri Mar 02, 2012 12:15 pm

Re: form submit converted to excel file

Postby amandamaomao » Mon May 21, 2012 8:13 pm

Let me introduce a useful software to you.The program can handle tables that that are located in the same or different Excel files, and that merged data can be added to existing columns or new ones. Overall, we found the program to be well-designed and flexible, and we think it's a great choice for users who need Log in or Register to see link.
You can download the software for free on:http://www.merge-excel-files.com/
amandamaomao
 
Posts: 1
Joined: Mon May 21, 2012 7:55 pm

Re: form submit converted to excel file

Postby lanshan75 » Sun Jul 22, 2012 12:46 am

I am totally agree with what you said,but my English is poor, sometiomes I don't know how to express my feeling,I just want to make some friends who can help me in my English and share the happiness with each other.
__________________________________
Links removed - Mod
lanshan75
 
Posts: 2
Joined: Sun Jul 22, 2012 12:44 am


Return to General HTML

Who is online

Users browsing this forum: No registered users and 5 guests

cron