SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: HTML Form

  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Form

    can you help me? how to submit a form and store it in a .csv file and post it in another html page.
    here is my code...
    <html>
    <head>
    <title>myForm</title>
    <script language="JavaScript">

    function WriteToFile(sText) {
    first=document.myform.GivenName.value;
    initial=document.myform.MiddleInitial.value;
    last=document.myform.Surname.value;
    f = document.getElementById("Course");
    course = f.options[f.selectedIndex].text;
    g = document.getElementById("year");
    year = g.options[g.selectedIndex].text;
    txtArea=document.myform.comments.value;
    for (var i=0; i < document.myform.gender.length; i++){
    if (document.myform.gender[i].checked){
    var rad_val = document.myform.gender[i].value;
    }
    }

    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var d = fso.OpenTextFile("d:\\guest.csv", 8, true, 0);
    d.Write(first+",");
    d.Write(initial+",");
    d.Write(last+",");
    d.Write(rad_val+",");
    d.Write(course+",");
    d.Write(year+",");
    d.Write("COMMENTS:"+",");
    d.WriteLine(txtArea);
    }
    </script>
    </head>
    <body bgcolor="#000000" text="#FFFFFF">
    <form name="myform" onSubmit="WriteToFile(this)">
    Given Nameinput type ="text"name ="GivenName"value=""/><br>
    Middle Initialinput type ="text"name ="MiddleInitial"value=""/><br>
    Surnameinput type ="text"name ="Surname"value=""/><br>
    Genderbr>
    <input type="radio" name="gender"value = "male">Male
    <input type="radio" name="gender"value = "female" >Female


    <P>Course: <SELECT id="Course" SIZE="1">
    <OPTION value="1" selected="selected">-
    <OPTION value="2">Bachelor of Science in Information Technology (B.S.I.T)
    <OPTION value="3">Bachelor of Science in Computer Sciences (B.S.C.S)
    <OPTION value="4">Bachelor of Science in Information Management (B.S.I.M)
    <OPTION value="5">Bachelor of Scinece in Nursing(B.S.N)
    <OPTION value="6">Bachelor of Scinece in Elecetrical Engineering(B.S.E.C.E)

    </SELECT>
    <P>YEAR: <SELECT id="year" SIZE="1">
    <OPTION value="1" selected="selected">-
    <OPTION value="2">1
    <OPTION value="3">2
    <OPTION value="4">3
    <OPTION value="5">4
    <OPTION value="6">5

    </SELECT>
    <br>Commentsbr>
    <textarea name="comments" rows="10" cols="120" value=""></textarea>
    <br>
    <br>
    <input type="submit" value="submit" />

    <input type="reset" value="clear" onClick="clear()" />
    </form>
    </body>
    </html>


    thanks....

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You will need a server side language to process the form.

    JavaScript has no file handling capabilities in the browser. JScript can do it using the ActiveX call but that will only work in Internet Explorer and only if both JScript and ActiveX are enabled and so will definitely not work for at least 2/3 of the people using the internet.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The way to do this is to use GET as the method of your form. When you submit the form your second page is opened and the form contents are held in the URL of the page. You can then extract the information using location.search and populate your page.

    There are two pages below: the first is your form page, the second is called page2.htm and is the destination page. When the form is submitted the destination page is rendered with the form details show. You can modify the populating process to suit your own needs.

    Code page 1:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <head>
     
    <title>myForm Page 1</title>
    </head>
     
    <body>
     
    <form name="myform" method="get" action="page2.htm">
      <p>Given Name: <input type="text" name="GivenName" value size="20"></p>
      <p>Middle Initial: <input type="text" name="MiddleInitial" value size="20"></p>
      <p>Surname: <input type="text" name="Surname" value size="20"></p>
      <p>Gender: <input type="radio" name="gender" value="male">Male
      <input type="radio" name="gender" value="female">Female</p>
      <p>Course: <select name="Course">
      <option value="0">Select here --</option>
      <option value="B.S.I.T">Bachelor of Science in Information Technology 
      (B.S.I.T)</option>
      <option value="B.S.C.S">Bachelor of Science in Computer Sciences (B.S.C.S)
      </option>
      <option value="B.S.I.M">Bachelor of Science in Information Management 
      (B.S.I.M)</option>
      <option value="B.S.N">Bachelor of Scinece in Nursing(B.S.N)</option>
      <option value="B.S.E.C.E">Bachelor of Scinece in Elecetrical 
      Engineering(B.S.E.C.E)</option>
      </select></p>
      <p>YEAR: <select name="year">
      <option value="0">Select</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>
      </select></p>
      <p>Comments: <textarea name="comments" rows="10" cols="120">This is a comment</textarea></p>
      <p><input type="submit" value="submit"> </p>
    </form>
     
    </body>
     
    </html>


    This is page 2
    Code page 2:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Second Page</title>
    <script language="JavaScript">
    <!--
     window.onload= function()
      { var searchString=location.search.substr(1);
        if(searchString.length !=0)
         { var allFields=searchString.split("&");
           var build="";
           for( var i=0;i<allFields.length;i++)
            { build+='<p>'+allFields[i]+'<\/p>\n';
            }
            document.body.innerHTML=build;  
         }
      }
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; color:#000080; font-weight:bold; }
    p { margin-top:0px; margin-bottom:3px; }
    -->
    </style>
    </head>
     
    <body>
     
    </body>
     
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •