HTML form noob problem

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

      HTML form noob problem

      HTML form noob problem
      Hi,
      ich habe folgendes Problem.

      Es geht um folgendes Formular:

      Spoiler anzeigen

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html lang="de">
      3. <head>
      4. <!--
      5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      6. <link rel="stylesheet" type="text/css" media="all" href="styles/reset.css">
      7. <link rel="stylesheet" type="text/css" media="all" href="styles/main.css">
      8. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
      9. <script type="text/javascript" src="scripts/response.js"></script>
      10. <title>All about hardware</title>
      11. </head>
      12. <body>
      13. <div id="mainWrapper">
      14. <!-- #include file = "Includes/header.inc" -->
      15. <aside>
      16. <!-- #include file = "Includes/nav1.inc" -->
      17. </aside>
      18. <section>
      19. <h4>Newsletter signup</h4>
      20. <article class="hover">
      21. <form id="frmApplication" name="frmApplication" action="*******************/response.asp" method="post">
      22. <fieldset>
      23. <h5>Newsletter Settings</h5>
      24. <p>Signup for our new paid newsletter and be the first to get new updates and help us paying the costs for the website for just 5$/month.</p>
      25. <table>
      26. <tr>
      27. <td><label for="rdoType[0]">What kind of information would you like to recieve:</label>
      28. </tr>
      29. <tr>
      30. <td><input id="rdoType[0]" name="rdoType" type="radio" value ="I" checked>Just updates for the hardware guides
      31. </tr>
      32. <tr>
      33. <td><input id="rdoType[1]" name="rdoType" type="radio" value="F">All updates including news
      34. </tr>
      35. </table>
      36. </fieldset>
      37. </article>
      38. <article>
      39. <fieldset>
      40. <h5>Contact Information</h5>
      41. <table>
      42. <tr>
      43. <td><label for="txtFName">First Name:</label>
      44. <td> <input id="txtFName" name="txtFName" type="text" placeholder="Max" size="35" required="required" /><br>
      45. </tr>
      46. <tr>
      47. <td> <label for="txtLName">Last Name:</label>
      48. <td> <input id="txtLName" name="txtLName" type="text" placeholder="Mustermann" size="35" required="required" /><br>
      49. </tr>
      50. <tr>
      51. <td> <label for="txtAddr">Address:</label>
      52. <td> <input id="txtAddr" name="txtAddr" type="text" placeholder="Musterstrasse 1" size="40" required="required" /><br>
      53. </tr>
      54. <tr>
      55. <td><label for="selCountr"> Select your country:</label>
      56. <td><select id="selCountr" name="selCountr">
      57. <option value="GER">Germany</option>
      58. <option value="USA">United States of America</option>
      59. <option value="UK">United Kingdom</option>
      60. <option value="FR">France</option>
      61. </select><br>
      62. </tr>
      63. <tr>
      64. <td> <label for="txtZip">Zip Code:</label>
      65. <td> <input id="txtZip" name="txtZip" type="text" placeholder="99999" size="5" required="required" pattern="[0-9]{5}?" title="A zip code in the format of 99999" />
      66. </tr>
      67. </fieldset>
      68. <fieldset>
      69. <tr>
      70. <td> <label for="rdoSex[0]">Sex:</label>
      71. <td> <input id="rdoSex[0]" name="rdoSex" type="radio" value ="M" checked />M
      72. <input id="rdoSex[1]" name="rdoSex" type="radio" value="F" />F<br>
      73. </tr>
      74. <tr>
      75. <td> <label for="txtEmail">Email:</label>
      76. <td> <input id="txtEmail" name="txtEmail" type="email" placeholder="[email protected]" size="45" required="required" /><br>
      77. </tr>
      78. <tr>
      79. <td> <label for="txtPhone">Telephone:</label>
      80. <td> <input id="txtPhone" name="txtPhone" type="tel" placeholder="555 555-5555" size="15" required="required" />
      81. </tr>
      82. </table>
      83. </fieldset>
      84. <fieldset>
      85. </article>
      86. <article>
      87. <h5>Select Interests</h5>
      88. <table>
      89. <tr>
      90. <td> <input type="checkbox" id="chkCPU" name="chkCPU" /> </td>
      91. <td>CPU</td>
      92. <td> <input type="checkbox" id="chkGPU" name="chkGPU" /> </td>
      93. <td>GPU</td>
      94. <td> <input type="checkbox" id="chkSSD" name="chkSSD" /> </td>
      95. <td>SSDs</td>
      96. </tr >
      97. <tr>
      98. <td> <input type="checkbox" id="chkBuild" name="chkBuild" /> </td>
      99. <td>PC Builds</td>
      100. <td> <input type="checkbox" id="chkTutorials" name="chkTutorials" /> </td>
      101. <td>Tutorial</td>
      102. <td><input type="checkbox" id="chkConsole" name="chkConsole" /> </td>
      103. <td>Gaming Consoles</td>
      104. </tr>
      105. <tr>
      106. <td> <input type="checkbox" id="chkPhone" name="chkPhone" /> </td>
      107. <td>Smartphones</td>
      108. <td> <input type="checkbox" id="chkSoftware" name="chkSoftware" /> </td>
      109. <td>Software/OS</td>
      110. <td> <input type="checkbox" id="chkVideos" name="chkVideos" /> </td>
      111. <td>Videos</td>
      112. </tr>
      113. </table>
      114. </fieldset>
      115. <fieldset>
      116. </article>
      117. <article>
      118. <h5>Credit Card Information</h5>
      119. <table>
      120. <tr>
      121. <td><label for="selCard">Select a Card:</label>
      122. <td><select id="selCard" name="selCard">
      123. <option value="AMEX">AMEX</option>
      124. <option value="MC">Master Card</option>
      125. <option value="Visa">Visa</option>
      126. </select><br>
      127. </tr>
      128. <tr>
      129. <td><label for="txtCNum">Enter Card Number:</label>
      130. <td><input id="txtCNum" name="txtCNum" type="text" placeholder="3400 0000 0000 009" required="required" />
      131. </tr>
      132. </table
      133. </fieldset>
      134. <div>
      135. <input type="button" id="btnSubmit" value="Complete signup" onclick="CheckData()" />
      136. <input type="reset" value="Cancel" />
      137. </div>
      138. </form>
      139. </article>
      140. </section>
      141. <div class="clearfix"></div>
      142. </div>
      143. <!-- #include file = "Includes/footer.inc" -->
      144. </body>
      145. </html>
      Alles anzeigen



      Da soll man eingaben machen können.
      Das ganze möchte ich dann darauffolgend auf folgender repsonse.asp in einer Übersicht anzeigen (also alle eingebenen Daten als übersicht).

      Spoiler anzeigen

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html lang="de">
      3. <head>
      4. <!--
      5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      6. <link rel="stylesheet" type="text/css" media="all" href="styles/reset.css">
      7. <link rel="stylesheet" type="text/css" media="all" href="styles/main.css">
      8. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
      9. <script type="text/javascript" src="scripts/response.js"></script>
      10. <title>All about hardware</title>
      11. </head>
      12. <body>
      13. <div id="mainWrapper">
      14. <!-- #include file = "Includes/header.inc" -->
      15. <aside>
      16. <!-- #include file = "Includes/nav1.inc" -->
      17. </aside>
      18. <section>
      19. <h4>Newsletter signup</h4>
      20. <article class="hover">
      21. <h5>Success!</h5>
      22. <p>Thank you for signing up for our paid newsletter. Here is an overview of the data you entered before..</p>
      23. What kind of information would you like to recieve:
      24. <%=request.form(1)%>
      25. </article>
      26. <article>
      27. <fieldset>
      28. <h5>Contact Information</h5>
      29. <table>
      30. <tr>
      31. <td><label for="txtFName">First Name:</label>
      32. <td> <%=request.form("txtFName")%><br>
      33. </tr>
      34. <tr>
      35. <td> <label for="txtLName">Last Name:</label>
      36. <td> <%=request.form("txtLName")%><br><br>
      37. </tr>
      38. <tr>
      39. <td> <label for="txtAddr">Address:</label>
      40. <td> <%=request.form("txtAddr")%><br>
      41. </tr>
      42. <tr>
      43. <td><label for="selCountr"> Select your country:</label>
      44. <td> <%=request.form("selCountr")%>
      45. </tr>
      46. <tr>
      47. <td> <label for="txtZip">Zip Code:</label>
      48. <td> <%=request.form("txtZip")%>
      49. </tr>
      50. </fieldset>
      51. <fieldset>
      52. <tr>
      53. <td> <label for="rdoSex[0]">Sex:</label>
      54. <td> <%=request.form("rdoSex")%><br>
      55. </tr>
      56. <tr>
      57. <td> <label for="txtEmail">Email:</label>
      58. <td> <%=request.form("txtEmail")%><br>
      59. </tr>
      60. <tr>
      61. <td> <label for="txtPhone">Telephone:</label>
      62. <td> <%=request.form("txtPhone")%>
      63. </tr>
      64. </table>
      65. </fieldset>
      66. <fieldset>
      67. </article>
      68. <article>
      69. <h5>Select Interests</h5>
      70. <table>
      71. <tr>
      72. <td> <%=request.form("chkCPU")%> </td>
      73. <td> <%=request.form("chkGPU")%> </td>
      74. <td> <%=request.form("chkSSD")%> </td>
      75. </tr >
      76. <tr>
      77. <td> <%=request.form("chkBuild")%> </td>
      78. <td> <%=request.form("chkTutorials")%> </td>
      79. <td> <%=request.form("chkConsole")%> </td>
      80. </tr>
      81. <tr>
      82. <td> <%=request.form("chkPhone")%> </td>
      83. <td> <%=request.form("chkSoftware")%> </td>
      84. <td> <%=request.form("chkVideos")%> </td>
      85. </tr>
      86. </table>
      87. </fieldset>
      88. <fieldset>
      89. </article>
      90. <article>
      91. <h5>Credit Card Information</h5>
      92. <table>
      93. <tr>
      94. <td><label for="selCard">Select a Card:</label>
      95. <td><select id="selCard" name="selCard">
      96. <option value="AMEX">AMEX</option>
      97. <option value="MC">Master Card</option>
      98. <option value="Visa">Visa</option>
      99. </select><br>
      100. </tr>
      101. <tr>
      102. <td><label for="txtCNum">Enter Card Number:</label>
      103. <td><input id="txtCNum" name="txtCNum" type="text" placeholder="3400 0000 0000 009" required="required" />
      104. </tr>
      105. </table
      106. </fieldset>
      107. <div>
      108. <input type="button" id="btnSubmit" value="Submit Application" onmousedown="Javascript:CheckData()" />
      109. <input type="reset" value="Cancel" />
      110. </div>
      111. </form>
      112. </article>
      113. </section>
      114. <div class="clearfix"></div>
      115. </div>
      116. <!-- #include file = "Includes/footer.inc" -->
      117. </body>
      118. </html>
      Alles anzeigen


      Es geht auch alles gut, bis auf die Checkboxen, da krieg ich keine schöne Übersicht von dem, was ich angekreuzt hab.
      Wie geht das?

      Danke im Vorraus

      Brian

      Ja, ich führe Selbstgespräche. Es gibt einfach Momente, da brauche ich den Rat eines Experten.
      Ohne das jetzt alles groß gelesen zuhaben:

      <%=request.form("chkCPU")%> gibt ja einfach nur den Inhalt der Variable aus, dieser ist bei Checkboxen leer, bzw. die Variable existiert nicht, wenn die Checkbox nicht aktiviert wurde. Zur Darstellung würde ich erneut eine Checkbox anzeigen mit "disabled="disabled" (Readonly Checkbox) und falls die Variable "request.form("chkCPU")" existiert noch ein "checked="checked" hinzufügen, was die Checkbox aktiviert.

      Also im ganzen dann so: <input type="checkbox" disabled="disabled" <?php if(isset($_POST['chkCPU'])) echo" checked=\"checked\""; ?>> Nur halt in asp.net :D
      Du musst den Checkboxen auch einen Value geben afaik, dann halt entsprechend eine Checkbox ausgeben die den wert widerspiegelt. Damit man das nicht ändern kann, kannst du disabled="disabled" setzten.

      @Dez: Das sieht für mich nicht nach PHP aus, sondern nach einer .NET Sprache oder VB oder so, da ASP ;)
      Wie gesagt, ich bin in der Hinsicht gerade am Anfang. Wie würde das denn codemäßig aussehen, so als bsp?

      Ja, ich führe Selbstgespräche. Es gibt einfach Momente, da brauche ich den Rat eines Experten.
      Ich mach es mal exemplarisch mit dem chkCPU

      Spoiler anzeigen

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html lang="de">
      3. <head>
      4. <!--
      5. Date: 29/04/2013
      6. email: ********
      7. -->
      8. <meta name="author" content=********" />
      9. <meta name="keywords" content="Web Programming - an introduction" />
      10. <meta name="description" content="All about hardware" />
      11. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      12. <link rel="stylesheet" type="text/css" media="all" href="styles/reset.css">
      13. <link rel="stylesheet" type="text/css" media="all" href="styles/main.css">
      14. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
      15. <script type="text/javascript" src="scripts/response.js"></script>
      16. <title>All about hardware</title>
      17. </head>
      18. <body>
      19. <div id="mainWrapper">
      20. <!-- #include file = "Includes/header.inc" -->
      21. <aside>
      22. <!-- #include file = "Includes/nav1.inc" -->
      23. </aside>
      24. <section>
      25. <h4>Newsletter signup</h4>
      26. <article class="hover">
      27. <h5>Success!</h5>
      28. <p>Thank you for signing up for our paid newsletter. Here is an overview of the data you entered before..</p>
      29. What kind of information would you like to recieve:
      30. <%=request.form(1)%>
      31. </article>
      32. <article>
      33. <fieldset>
      34. <h5>Contact Information</h5>
      35. <table>
      36. <tr>
      37. <td><label for="txtFName">First Name:</label>
      38. <td> <%=request.form("txtFName")%><br>
      39. </tr>
      40. <tr>
      41. <td> <label for="txtLName">Last Name:</label>
      42. <td> <%=request.form("txtLName")%><br><br>
      43. </tr>
      44. <tr>
      45. <td> <label for="txtAddr">Address:</label>
      46. <td> <%=request.form("txtAddr")%><br>
      47. </tr>
      48. <tr>
      49. <td><label for="selCountr"> Select your country:</label>
      50. <td> <%=request.form("selCountr")%>
      51. </tr>
      52. <tr>
      53. <td> <label for="txtZip">Zip Code:</label>
      54. <td> <%=request.form("txtZip")%>
      55. </tr>
      56. </fieldset>
      57. <fieldset>
      58. <tr>
      59. <td> <label for="rdoSex[0]">Sex:</label>
      60. <td> <%=request.form("rdoSex")%><br>
      61. </tr>
      62. <tr>
      63. <td> <label for="txtEmail">Email:</label>
      64. <td> <%=request.form("txtEmail")%><br>
      65. </tr>
      66. <tr>
      67. <td> <label for="txtPhone">Telephone:</label>
      68. <td> <%=request.form("txtPhone")%>
      69. </tr>
      70. </table>
      71. </fieldset>
      72. <fieldset>
      73. </article>
      74. <article>
      75. <h5>Select Interests</h5>
      76. <table>
      77. <tr>
      78. <td> <input type="checkbox" name="chkCPU" disabled="disabled" <% if(request.form("chkCPU").toLower() == "true") { %> checked="checked" <% } %> /> </td>
      79. <td> <%=request.form("chkGPU")%> </td>
      80. <td> <%=request.form("chkSSD")%> </td>
      81. </tr >
      82. <tr>
      83. <td> <%=request.form("chkBuild")%> </td>
      84. <td> <%=request.form("chkTutorials")%> </td>
      85. <td> <%=request.form("chkConsole")%> </td>
      86. </tr>
      87. <tr>
      88. <td> <%=request.form("chkPhone")%> </td>
      89. <td> <%=request.form("chkSoftware")%> </td>
      90. <td> <%=request.form("chkVideos")%> </td>
      91. </tr>
      92. </table>
      93. </fieldset>
      94. <fieldset>
      95. </article>
      96. <article>
      97. <h5>Credit Card Information</h5>
      98. <table>
      99. <tr>
      100. <td><label for="selCard">Select a Card:</label>
      101. <td><select id="selCard" name="selCard">
      102. <option value="AMEX">AMEX</option>
      103. <option value="MC">Master Card</option>
      104. <option value="Visa">Visa</option>
      105. </select><br>
      106. </tr>
      107. <tr>
      108. <td><label for="txtCNum">Enter Card Number:</label>
      109. <td><input id="txtCNum" name="txtCNum" type="text" placeholder="3400 0000 0000 009" required="required" />
      110. </tr>
      111. </table
      112. </fieldset>
      113. <div>
      114. <input type="button" id="btnSubmit" value="Submit Application" onmousedown="javascript:CheckData()" />
      115. <input type="reset" value="Cancel" />
      116. </div>
      117. </form>
      118. </article>
      119. </section>
      120. <div class="clearfix"></div>
      121. </div>
      122. <!-- #include file = "Includes/footer.inc" -->
      123. </body>
      124. </html>
      Alles anzeigen



      Im Formular dnan einfach nur 'value="true"' in den input tag der Checkbox als attribut setzten.

      Hinweis: Ich bin mir nicht sicher ob du bei ASP die { } brauchst, setzte selber nur ASP.NET MVC 4 ein, aber eigentlich müsste das so gehen.

      @Dez: Sorry überlesen
      Kriege ich folgenden Fehler:

      "Microsoft VBScript compilation error '800a03ea'

      Syntax error

      /rboggs/wu/wu014/Kolb/response.asp, line 89

      if(request.form("chkCPU").toLower() == "true") {
      -------------------------------------^

      Habe das ganze so auf den Server vom prof hochgeladen und da kommt dann das, wenn ich CPU selektiere.

      Ja, ich führe Selbstgespräche. Es gibt einfach Momente, da brauche ich den Rat eines Experten.
      "Microsoft VBScript compilation error '800a03ea'

      Syntax error

      /rboggs/wu/wu014/Kolb/response.asp, line 89

      if(request.form("chkCPU") == "true") {
      ---------------------------^"

      EDIT:student.fgcu.edu/rboggs/wu/wu050/ccmrr/application.asp

      das ist das BSP, das wir bekommen haben. Bei dem Prof gehts ohne das ganze...

      Ja, ich führe Selbstgespräche. Es gibt einfach Momente, da brauche ich den Rat eines Experten.